Weex開發APP實戰(路由和調試方式)

本文主要講對weex的android工程的兩點改造，調試模式和路由方式。

一、路由方式

通過命令行創建項目時不推薦使用vue-router作爲路由的單頁面開發模式，當項目規模稍大之後原生應用會經常出現卡頓的情況，而使用多界面開發模式，weex官方提供的navigator使用文檔及其不全，這裏我們主要說一下navigator模塊的用法。

1、push(url,callback)

     跳轉界面，並將界面入棧

2、pop(url,callback)

    回退界面，並將界面出棧

看了上面的API，是不是發現並沒有界面間傳遞參數的api供我們使用，這個weex官方肯定想到了，對於界面參數傳遞官方推薦對url解析來處理，即將要傳遞的參數按照一定的格式拼接在url後面，如：

navigator.push('app.js?a=1&b=2');

在weex界面中通過weex.config.bundleUrl可以獲取該url，通過對url的解析即可獲取參數。

二、調試模式

weex提供的模板項目已經繼承了weex的調試工具和一部分調試代碼，但是直接拿來使用在界面的展現效果和調試方式上稍有不足，只需簡單的修改就能很方便的使用了。

需要修改的地方有：

1、app_config.xml

     一些app的配置

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.example.myapp" version="1.0.0"
        xmlns="http://www.w3.org/ns/widgets"
        xmlns:android="http://schemas.android.com/apk/res/android">
    <name>Hello</name>
    <preference name="loglevel" value="DEBUG" />
    <!--是否是debug模式-->
    <preference name="debug" value="true" />
    <!--debug模式啓動時的url-->
    <preference name="debug_url" value="http://127.0.0.1:8080/dist/index.js"/>
    <!--非debug包啓動加載的url-->
    <preference name="local_url" value="file://assets/index.js" />

</widget>

2、WXPageActivity.java

    此界面被我們定義爲渲染界面的模板，可以在調試的工程中實時熱更新，也可以手動刷新。

if (AppConfig.isDebug()){//只要是加這個判斷
      //以及這裏的debugId的獲取AppConfig.getDebugIp()
      mHotReloadManager = new HotReloadManager(AppConfig.getDebugIp(), new HotReloadManager.ActionListener() {
        @Override
        public void reload() {
          runOnUiThread(new Runnable() {
            @Override
            public void run() {
              Toast.makeText(WXPageActivity.this, "Hot reload", Toast.LENGTH_SHORT).show();
              createWeexInstance();
              renderPage();
            }
          });
        }

        @Override
        public void render(final String bundleUrl) {
          runOnUiThread(new Runnable() {
            @Override
            public void run() {
              Toast.makeText(WXPageActivity.this, "Render: " + bundleUrl, Toast.LENGTH_SHORT).show();
              createWeexInstance();
              loadUrl(bundleUrl);
            }
          });
        }
      });
    }

 

public static String getDebugIp() {
    String url=sPreferences.getString("launch_url", "http://127.0.0.1:8080/dist/index.js");
    String[] strArry1=url.split("/");
    String schema=strArry1[0];//http:
    String[] strArry2=strArry1[2].split(":");
    String debugPort=Integer.parseInt(strArry2[1])+1+"";//8081
    String url2=strArry2[0];//127.0.0.1
    String debugIp=schema+"//"+url2+":"+debugPort;
    return debugIp;
  }

修改android原生模板中的HotReloadManager，將紅框中的WXReload改爲refresh

 

三、綜合改造

結合上面兩點，我們需要在WXPageActivity中根據是否加載本地文件對url進行解析，主要是對'./、../、root:'幾種路徑寫法進行處理，讓我們在weex中可以使用這些寫法進行跳轉。

  首先是對路由 的修改，通過閱讀源碼發現要自動以路由方式比較好的方法就是自己實現weex提供的INavigator接口。

  INavigator有兩個方法需要我們實現，就是push和pop，分別是跳轉進入界面和返回（跳出），下面是我的實現，註釋很詳細，就不在一一說明。

public class WXNavigator implements INavigator{
    public static String schema; //http://xxx.xxx.xxx/app/
    @Override
    public boolean push(Activity activity, String param) {
        JSONObject jsonObject = JSON.parseObject(param);
        //獲取url
        String url = jsonObject.getString(URL);
        Intent intent=new Intent(activity,WXPageActivity.class);
        //調試模式和非調試模式的url解析方式稍有不同，這裏做一個三目判斷
        url= AppConfig.isDebug()?UrlParse.getDebugUrl(activity,url):UrlParse.getReleaseUrl(activity,url);
        Uri data = Uri.parse(url);
        if (data != null) {
            //將根據url構造的uri放入intent中，以便於在WXPageActivity中獲取
            intent.setData(data);
        }
        //啓動界面
        activity.startActivity(intent);
        //返回true，返回false會走weex默認路由方式
        return true;
    }

    @Override
    public boolean pop(Activity activity, String param) {
        //直接銷燬界面
        activity.finish();
        return false;
    }
}

在WXPageActivity的onCreate方法中中需要添加如下代碼：

 Intent intent = getIntent();
    Uri uri = intent.getData();
    String from = intent.getStringExtra("from");
    mFromSplash = "splash".equals(from);
    /*是否是啓動頁過來的，決定要賦值的uri*/
    if(mFromSplash){
        mUri = Uri.parse(AppConfig.getLaunchUrl());
    }else{
        mUri = uri;
    }
 String url;
 url =mUri.toString();
 loadUrl(url);

四、例子

跳轉界面

            var navigator = weex.requireModule('navigator')
            navigator.push({
                url: './twoPage.js',
                animated: "true"
            }, event => {
                // modal.toast({ message: 'callback: ' + event })
            })

返回 

              var nav = weex.requireModule('navigator')
              nav.pop({
                  url: '',
                  animated: "true"
              }, event => {
              })

標題

 

url解析等詳細代碼可以在githup項目中去查看https://github.com/liuxinyea/IWeex  歡迎start=。=