Android 視角詳細全面的基于 Vue 2.0 Weex 接入過程

一、說在前面的話

目前weex已在尚妝旗下的達人店app上線了一個常用的訂單管理頁面，截止目前Android上未發現問題，渲染時間在100-300ms之間。

作為Android開發，此文首先會從Android的角度為主來記錄接入的過程，希望給未接入的同學更方便省時地接入weex提供一點幫助。其中會涉及到 預加載 ， 降級 ， 熱更新 ， 埋點 以及在app不更新的情況下 動態配置新頁面 等問題，這些Android和iOS都是統一的邏輯，希望和大家一起交流。

二、Android接入過程

其實對于module、component的定義，以及IWXImgLoaderAdapter、IWXHttpAdapter等adapter的重寫，在playgroud和weexteam里都已經有很好的例子了。

1、gradle依賴

compile 'com.taobao.android:weex_sdk:0.10.0’

compile 'com.android.support:support-v4:24.0.0'
compile 'com.android.support:appcompat-v7:24.0.0'
compile 'com.android.support:recyclerview-v7:24.0.0'
compile 'com.squareup.okhttp:okhttp:2.3.0'
compile 'com.squareup.okhttp:okhttp-ws:2.3.0'
compile 'com.alibaba:fastjson:1.2.8'
//（可選）支持調試的依賴，參考https://github.com/weexteam/weex-devtools-android/blob/master/README-zh.md

compile 'com.taobao.android:weex_inspector:0.0.8.5'
compile 'com.google.code.findbugs:jsr305:2.0.1'
compile 'com.taobao.android:weex_inspector:0.0.8.5'</pre> 
  
2、新建weex module
 
  
在原來的project上，新建單獨的 weex module。代碼結構如下：
 
  
3、初始化weex
 
  
通過類WeexManager來統一管理weex相關的配置，以下是WeexManager里的init函數的主要內容，在application的onCreate里調用：
 
  
public void init(Application application, IWeexService weexService) {


    //通過在線參數控制是否使用weex,ConfigManager是尚妝的在線參數模塊，以后有機會再簡單介紹一下
    if (!ConfigManager.getBoolean(CONFIG_WEEX_ENABLE, true)) {
        return;
    }

    context = application.getApplicationContext();
    weexDir = context.getDir(WEEX_MODULE, Context.MODE_PRIVATE);

    //根據需要注冊圖片、網絡、存儲等adapter
    WXSDKEngine.initialize(application,
            new InitConfig.Builder()
                    .setImgAdapter(new FrescoImageAdapter())
                    .setUtAdapter(new UserTrackAdapter())
                    .setStorageAdapter(new StorageAdapter())
                    .setHttpAdapter(new OkHttpAdapter())
                    .setURIAdapter(new CustomURIAdapter())
                    .build());

    this.weexService = weexService;

    //獲取本地緩存的weex js配置
    configList = WXJsonUtils.getList(SHStorageManager.get(WEEX_MODULE, WEEX_CONFIG, ""), WeexConfig.class);
    update();

    try {
        //頁面通用的一些接口
        WXSDKEngine.registerModule("shopBase", ShopModule.class);
        //主要是a標簽的跳轉
        WXSDKEngine.registerModule("event", WXEventModule.class);
        //模態對話框
        WXSDKEngine.registerModule("shopModal", ModalModule.class);
        //用fresco重寫圖片組件
        WXSDKEngine.registerComponent("image", FrescoImageComponent.class);
    } catch (WXException e) {
        LogUtils.e(e);
    }

    SHEventBus.register(ModuleName.WEEX, "weexDebugHost", new ISHEventBusCallback<String>() {
        @Override
        public void handle(String debugHost, String s) {
            if (!TextUtils.isEmpty(s)) {
                LogUtils.e(s);
                return;
            }
            if (TextUtils.isEmpty(debugHost)) {
                WXEnvironment.sRemoteDebugMode = false;
            } else {
                WXEnvironment.sRemoteDebugMode = true;
                WXEnvironment.sRemoteDebugProxyUrl = "ws://" + debugHost + "/debugProxy/native";
            }
            WXSDKEngine.reload();
        }
    });

    SHEventBus.register(ModuleName.WEEX, "netChanged", new ISHEventBusCallback<Boolean>() {
        @Override
        public void handle(Boolean result, String s) {
            if (!TextUtils.isEmpty(s)) {
                LogUtils.e(s);
            } else {
                if (result.booleanValue()) {
                    update();
                }
            }
        }
    });

    //獲取weex配置，更新js文件
    weexConfigRequest.setCallBack(new IRequestCallBack<SHResponse<List<WeexConfig>>>() {
        @Override
        public void onResponseSuccess(SHResponse<List<WeexConfig>> response) {
            if (response.isSuccess && null != response.data) {
                SHStorageManager.putToDisk(WEEX_MODULE, WEEX_CONFIG, JsonUtils.toJson(response.data));
                configList = response.data;
                update();
            }
        }

        @Override
        public void onResponseError(int i) {

        }
    });
    weexConfigRequest.start();

}</pre> 

1）考慮到第一次接入weex，有點擔心兼容問題，萬一引起崩潰等不確定因素，所以這里做了一個開關。其實每接入一個新的sdk都最好有個 控制開關 ，以避免因為不確定因素導致不穩定。
 
  
2）weexDir是js的下載存儲路徑，為了加快頁面打開時間，會對js進行 預加載到本地
 
  
3） sdk對a標簽的處理只調用了"event"的openURL接口，但是卻沒有注冊 "event" 。所以需要自己實現WXEventModule，并注冊。
 
  
4）模態對話框 ModalModule 的實現參考sdk里的WXModalUIModule
 
  
5） FrescoImageAdapter 和 FrescoImageComponent 的實現依賴我們開源的 SHImageView 支持webp，支持壓縮，支持沒有協議的鏈接（忽略協議可以讓瀏覽器根據頁面時http或者https自動選擇使用的協議，從而避免了網站改為https的情況下仍然訪問http資源而無法訪問的問題。）
 
  
6）OkHttpAdapter的實現參考github上zjutkz同學的實現 OkHttpAdapter，感謝，經過改寫，支持沒有協議的鏈接，支持cookie
 
  
7）ShopModule是自定義的Module，定義通用的一些接口，比如設置title bar是否顯示，以及title bar的title；關閉當前頁面，分享，錯誤日志收集等。
 
  
8）UserTrackAdapter用于埋點，另外可以在ShopModule里自定義接口收集埋點、錯誤信息等。
 
  
9）CustomURIAdapter用于支持相對地址，具體實現參見以下：
 
  
public class CustomURIAdapter implements URIAdapter {
    @NonNull
    @Override
    public Uri rewrite(WXSDKInstance instance, String type, Uri uri) {
        if (null == uri) {
            return null;
        }
        String url = uri.toString();
        if (url.startsWith("http")) {
            return uri;
        }else if (url.startsWith("http://")) {
            if (SHStorageManager.get("APP", "https", true)) {
                url = "https:" + url;
            }else {
                url = "http:" + url;
            }
        }else {
            url = SHHost.getMobileHost() + url;
        }
        return Uri.parse(url);
    }
}
 
  
4、新建統一的weex頁面
 
  
這邊考慮到以后頁面有可能嵌入到其他activity，所以把weex的渲染放入新建的 WeexFragment 。然后新建WeexActivity來引用該WeexFragment 。所有的單獨頁面的weex渲染都使用這個 WeexActivity ，非單獨頁面的使用 weexFragment ，這樣新加頁面時，無需重新注冊activity。weex處理邏輯統一，方便管理，方便動態配置。 通過統一跳轉協議跳轉到WeexActivity，通過intent傳入兩個參數url和h5 。
 
  
showjoyshop://page.sh/weex
 
  
intent參數：
 
  
url ：js鏈接，可以是本地的存儲地址/sdcard/com.showjoy.shop/weex/order.js，也可以是線上鏈接 https://xxxxx/0.4.3/order.js
 
  
h5 ：用來降級的h5頁面鏈接，當渲染失敗時，會跳轉到該h5頁面
 
  
5、開始渲染js，失敗后降級到h5
 
  
首先實例化WXSDKInstance
 
  
wxInstance = new WXSDKInstance(activity);
wxInstance.registerRenderListener(this);
wxInstance.onActivityCreate();
registerBroadcastReceiver();
 
  
1）當前類實現接口IWXRenderListener，可以參考weexteam里的AbsWeexActivity實現
 
  
2）注冊的廣播是DefaultBroadcastReceiver，可以可以參考weexteam里的AbsWeexActivity實現
 
  
然后講一下渲染，支持本地js以及線上js
 
  
if (url.startsWith("http")) {
    wxInstance.renderByUrl(
            getPageName(),
            url,
            options,
            jsonInitData,
            CommonUtils.getDisplayWidth(activity),
            CommonUtils.getDisplayHeight(activity),
            WXRenderStrategy.APPEND_ASYNC);

}else {
    new Thread(new Runnable() {
        @Override
        public void run() {
            String file = WeexUtils.readFile(url);
            handler.sendMessage(handler.obtainMessage(LOAD_LOCAL_FILE, file));
        }
    }).start();
}
 
  
其中，getPageName()自定義即可，getDisplayWidth和getDisplayHeight獲取屏幕寬高。
 
  
傳入本地的存儲地址時，先讀取文件，然后同個Handler在UI線程渲染，如下：
 
  
接收LOAD_LOCAL_FILE后handler里的實現：
 
  
case LOAD_LOCAL_FILE:
                    if (activity.getLifeState() != LifeState.DESTORY ) {
                        if (wxInstance != null) {
                            String content = (String) msg.obj;
                            if (TextUtils.isEmpty(content)) {
                                SHJump.openUrl(activity, h5Url);
                                finishActivity();
                            }else {
                                wxInstance.render((String) msg.obj, null, null);
                            }
                        }
                    }
                    break;
 
  
這里getLifeState()是我們自己BaseActivity的實現，可以自行判斷。SHJump和finishActivity都是自己的實現，大家自己實現即可。
 
  
渲染回調的實現，按需要處理即可，渲染成功后隱藏loading，view創建后添加view。 渲染異常時降級跳轉到h5 。如下：
 
  
Override
public void onViewCreated(WXSDKInstance instance, View view) {
    //viewMap.put(weexJsUrl, view);
    addWeexView(view);
}
@Override
public void onRenderSuccess(WXSDKInstance instance, int width, int height) {
    toHideLoading();
}
@Override
public void onRefreshSuccess(WXSDKInstance instance, int width, int height) {
    toHideLoading();
}
@Override
public void onException(WXSDKInstance instance, String errCode, String msg) {
    LogUtils.e("weex exception:", errCode, msg);
    SHJump.openUrlForce(activity, h5Url);
    finishActivity();
}
 
  
6、多個js在同個頁面渲染
 
  
為了實現如圖的tab，一開始在.vue文件里使用tabbar組件，后來發現在Android機型適配上不夠好。于是后來就將兩個tab做成兩個頁面，生成兩個js文件。首先渲染“我的訂單.js”，生成如下的界面。
 
  
 
 
  
然后點擊“本店訂單”時，調用自定義module里的接口 loadPage ，參數為h5的鏈接。 三端實現接口loadPage，h5直接跳轉，而iOS和Android通過h5鏈接從weex跳轉配置里找到對應的js，重新渲染顯示 。下面具體做幾點說明：
 
  
1）定義Map<String, WXSDKInstance> wxsdkInstanceMap;來存儲不同js的WXSDKInstance，定義Map<String, View> viewMap來存儲不同js渲染后的View。之所以要存儲多個WXSDKInstance，是因為WXSDKInstance不能重復渲染，而且當WXSDKInstance destory后，之前渲染的view里的內容也會被清空。注意在在頁面destory時，記得把所有WXSDKInstance都destory就好了。
 
  
2）viewMap里的key對應頁面的js。點擊tab切換頁面時，如對應的js已渲染，則直接取出view來顯示。
 
  
3）上文提到的 weex跳轉配置 ，在以下的跳轉規則里一同介紹。
 
  
二、App的跳轉規則的weex支持方案設計
 
  
跳轉規則如下圖，如果看不清，可以到新頁面放大查看。
 
  
 
 
  
主要介紹一下兩個配置參數：
 
  
 
   
 
在參數weexPages配置所有的weex頁面。
 
示例如下：
 
 
  
 
  
[
   {
       "page":"order",
       "url":"https://dshdjshjbx.js",
       "md5":"323827382huwhdjshdjs",
       "h5":"http://dsds.html"
       "v":"1.5.0"
    },
    {
       "page":"detail",
       "url":"https://dsdsds.js",
       "md5":"323827382huwhdjshdjs",
       "h5":"http://dsds.html"
       "v":"1.5.0"
    }
]
 
  
page : 對應統一跳轉的 path
 
  
url : 需要渲染的js，
 
  
md5 : js文件的md5值用于校驗，
 
  
h5 : 渲染失敗后的降級方案,
 
  
v : 最低支持的版本號
 
  
在頁面訪問h5頁面時，拿url跟weexPages里的url進行對比，如果一致就采用weex打開。這里的對比，目前還比較簡單粗暴，后續會進行優化，最終目標是 只對比 ? 之前的一部分，后面的參數通過intent傳入到weex頁面，參與weex的渲染。
 
  
這樣就達到了動態攔截，動態上線weex的目的。
 
  
三、js預加載方案
 
  
前面講到為了加快weex打開時間，會預加載js，這里就介紹一下js預加載的實現。
 
  
 
   
 
1）每次更新完配置文件，遍歷，查看是否存在md5一致的page_xxx.js文件，如果不存在則更新.
 
 
   
 
2）下載完成后，保存格式為xxx.js，校驗md5
 
    
 
     
相同的話，記錄文件的最后修改時間；
 
     
不同的話，刪除已下載文件，重新下載，重復校驗流程。
 
    
 
 
   
 
3）支持統一跳轉協議，page對應目前app端的統一跳轉協議里的page，有必要的時候可以替換原來的native頁面，解決native頁面錯誤不能及時修復的問題。加載失敗的話，打開h5頁面。
 
 
   
 
4）每次打開指定頁面的時候，先檢查本地是否有對應page文件，再檢驗最后修改時間是否跟記錄的一致
 
    
 
     
一致就加載
 
     
不一致就用線上url。
 
    
 
 
  
 
  
四、遇到的問題以及解決方法
 
  
問題一：上線后，發現在一些機型渲染失敗，public void onException(WXSDKInstance instance, String errCode, String msg)回調里，errCode返回wx_create_instance_error，msg返回createInstance fail!
 
  
解決辦法：將apk解壓出來后，發現編譯出了支持5種abi的包。然而libweexv8.so只在armeabi和x86里有，缺少對其它三種abi的支持，那么如果應用運行于arm64-v8a，x86_64，armeabi-v7a為首選abi的設備上時，就會加載失敗了。其實arm64-v8a,armeabi-v7a，x86_64這三個abi，應用并不是必須要做支持，手機一般都會提供自動兼容。所以我們只要把對x86, arm64-v8a,x86_64的支持去掉就可以。如下在主模塊的build.gradle的android里的defaultConfig內添加如下內容:
 
  
defaultConfig {  
    ndk {  
        abiFilters "armeabi", "x86"  
    }  
}
 
  
 
  
問題二：OkHttpAdapter里調用onHttpFinish出現解析異常，日志如下：
 
  
com.alibaba.fastjson.JSONException: syntax error, pos 2
    at com.alibaba.fastjson.parser.DefaultJSONParser.parse(DefaultJSONParser.java:1300)
    at com.alibaba.fastjson.parser.DefaultJSONParser.parse(DefaultJSONParser.java:1210)
    at com.alibaba.fastjson.JSON.parse(JSON.java:109)
    at com.alibaba.fastjson.JSON.parse(JSON.java:100)
    at com.taobao.weex.http.WXStreamModule.parseJson(WXStreamModule.java:378)
    at com.taobao.weex.http.WXStreamModule$2.onResponse(WXStreamModule.java:365)
    at com.taobao.weex.http.WXStreamModule$StreamHttpListener.onHttpFinish(WXStreamModule.java:523)
    at com.showjoy.weex.commons.adapter.OkHttpAdapter$6.onResponse(OkHttpAdapter.java:161)
    at okhttp3.RealCall$AsyncCall.execute(RealCall.java:133)
    at okhttp3.internal.NamedRunnable.run(NamedRunnable.java:32)
    at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1113)
    at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:588)
    at java.lang.Thread.run(Thread.java:818)
 
  
解決方法：catch異常
 
  
try {
    if (null != listener) {
        listener.onHttpFinish(wxResponse);
    }
} catch (Exception e) {
    LogUtils.e(e);
}
 
  
問題三：相對地址以及線上線下環境切換問題。
 
  
解決方法：在最新版本已支持相對地址，在.vue文件里鏈接以及請求地址使用相對地址，h5頁面自動選擇該頁面使用的域名，而在iOS和Android都做攔截處理，根據當前環境添加相應的域名。
 
  
 
   
Android 實現URIAdapter 注入
 
   
iOS 實現WXURLRewriteProtocol 注入
 
  
 
  
參考鏈接：
 
  
https://github.com/weexteam/
 
  
http://weex-project.io/doc/
 
  
https://github.com/alibaba/weex/
 
  
 
 
  
來自：https://github.com/ShowJoy-com/showjoy-blog/issues/25