在做一个app的时候,通常我们会写安卓和IOS两种页面,但是使用weex可以只写一次代码,将其嵌入到安卓和IOS相对应的地方。

weex和安卓之间的页面跳转一般有三种情况:

  • weex->weex
  • native->weex
  • weex->native

一.weex->weex(weex页面之间跳转)
例如:a页面跳转到b页面
a页面:

  navigator.push({                   
  	url:"http://dotwe.org/raw/dist/38e202c16bdfefbdb88a8754f975454c.bundle.wx",
   	animated:"true",
 },event=>{});

参数:
url:b页面的url(猜测是发布后的js文件的地址)
animated:是否跳转时有动画
event:跳转之后的callback操作

跳转时可能有参数传递,下面介绍一下百度来的参数传递方式
1.直接在url后面添加参数
2.使用全局参数storage
3.使用广播BroadcastChannel
详情weex页面间的通讯(传参)

二.native->weex(安卓跳转到weex页面)
首先我们可以新建一个WXPageActivity,然后在这个acitvity里面渲染weex页面

public class WXPageActivity extends AppCompatActivity implements IWXRenderListener {
	protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        View view=findViewById(R.id.view);  //在哪里渲染weex
        mWXSDKInstance = new WXSDKInstance(this);
        mWXSDKInstance.registerRenderListener(this);
        try {
            asyncLoadPages(view,url,param);
        } catch (JSONException e) {
            e.printStackTrace();
        }
    }
     private void asyncLoadPages(final View view, String url, Map<String,Object> param) throws JSONException {
        if(!WXSDKEngine.isInitialized()) {  //初始化未完成
            view.postDelayed(new Runnable() {
                @Override
                public void run() {
                    try {
                        asyncLoadPages(view,url,param);
                    } catch (JSONException e) {
                        e.printStackTrace();
                    }
                }
            }, 1);
        } else {
            loadPages(url,param);
        }
    }
     private void loadPages(String url,Map<String,Object> param) throws JSONException {
        String pageName = "WXSample";
        String bundleUrl = url;  //weex的js文件的url
        mWXSDKInstance.renderByUrl(pageName, bundleUrl, param, null, WXRenderStrategy.APPEND_ASYNC);
    }
}

三.weex->native(weex跳转到安卓原生页面)
实际上,无论是weex之间的跳转还是weex和原生互相跳转,我们都可以将其放在原生里面去操作
首先,我们在原生那里注册一个module

public class WxNavEvent extends WXModule {
	//这里可以写一些方法,在weex页面直接调用
	 @JSMethod(uiThread = false)  
    public void pushView(String name,Map<String,Object> param){
        Activity activity=(Activity)mWXSDKInstance.getContext();
        Intent intent=new Intent(activity,activity1.class);
        activity.startActivity(intent);
    }
}
//不要忘记注册,在初始化配置WxSDK的时候
WXSDKEngine.registerModule("wxNavEvent", WxNavEvent.class);

在weex中的调用

const weexNav=weex.requireModule("wxNavEvent");
//直接调用方法
weexNav.pushView("name",{});  //参数一定要传

以上是weex->native,实际上我们也可以利用原生实现weex->weex,比如我用的下面的这个笨方法

 @JSMethod(uiThread = false)
 public void pushWeexView(String url, Map<String,Object> param){
        Activity activity=(Activity)mWXSDKInstance.getContext();
        Intent intent=new Intent(activity,WXPageActivity.class);
        intent.putExtra("url",url);  //weex的js文件的url
        intent.putExtra("param",JSON.toJSONString(param));//字典型的参数
        activity.startActivity(intent);
    }

撒花完结~

Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐