前言

前面一篇文章，已經(jīng)描述了weex集成Android的環(huán)境配置和方法，并實(shí)現(xiàn)了一個(gè)簡單的加載本地文件的demo。那么這篇主要講下加載遠(yuǎn)程文件和遠(yuǎn)程調(diào)試。

加載遠(yuǎn)程文件

加載遠(yuǎn)程文件也很簡單，Weex提供了訪問遠(yuǎn)程地址的接口renderByUrl，具體實(shí)現(xiàn)代碼：

public class MainActivity extends AppCompatActivity implements IWXRenderListener {
    WXSDKInstance mWXSDKInstance;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mWXSDKInstance = new WXSDKInstance(this);
        mWXSDKInstance.registerRenderListener(this);
//        mWXSDKInstance.render("Weex Test Page", WXFileUtils.loadFileContent("hello_world_1.js",this),null,null,-1,-1, WXRenderStrategy.APPEND_ASYNC);
        mWXSDKInstance.renderByUrl("weex Test Page","http://xx.xx.xx.xx:3001/weex_tmp/h5_render/hello_world_1.js",                null,null,-1,-1, WXRenderStrategy.APPEND_ASYNC);
    }
 
    @Override
    public void onViewCreated(WXSDKInstance instance, View view) {
        setContentView(view);
    }
 
    @Override
    public void onRenderSuccess(WXSDKInstance instance, int width, int height) {
    }
 
    @Override
    public void onRefreshSuccess(WXSDKInstance instance, int width, int height) {
    }
 
    @Override
    public void onException(WXSDKInstance instance, String errCode, String msg) {
    }
 
    @Override
    protected void onResume() {
        super.onResume();
        if(mWXSDKInstance!=null){
            mWXSDKInstance.onActivityResume();
        }
    }
 
    @Override
    protected void onPause() {
        super.onPause();
        if(mWXSDKInstance!=null){
            mWXSDKInstance.onActivityPause();
        }
    }
 
    @Override
    protected void onStop() {
        super.onStop();
        if(mWXSDKInstance!=null){
            mWXSDKInstance.onActivityStop();
        }
    }
 
    @Override
    protected void onDestroy() {
        super.onDestroy();
        if(mWXSDKInstance!=null){
            mWXSDKInstance.onActivityDestroy();
        }
    }
}

其他代碼跟之前本地是一樣一樣的。切記要在Manifest文件中添加網(wǎng)絡(luò)訪問權(quán)限 <uses-permission android:name="android.permission.INTERNET"/>,這樣就實(shí)現(xiàn)了加載遠(yuǎn)程文件。
運(yùn)行時(shí)，首先在.we的目錄中執(zhí)行weex hello_world_1.we --port 3001,然后在當(dāng)前目錄下會生成一個(gè)weex_tmp的文件夾，遠(yuǎn)程訪問的地址就是：http://本機(jī)ip:3001/weex_tmp/h5_render/hello_world_1.js

遠(yuǎn)程調(diào)試

添加依賴

遠(yuǎn)程調(diào)試需要添加weex devtool aar的依賴，當(dāng)然也是可以通過對源碼的依賴的。最新的release版本可以通過這里查看。
源碼依賴就不再細(xì)說了，添加module，導(dǎo)入源碼。這里僅講述下通過gradle的配置添加依賴的方式。
首先，gradle中添加依賴

dependencies {
  compile 'com.taobao.android:weex_inspector:0.8.0.0'
  compile 'com.squareup.okhttp3:okhttp:3.4.1'
  compile 'com.squareup.okhttp3:okhttp-ws:3.4.1'
}

這里補(bǔ)充幾個(gè)說明：

• 調(diào)試應(yīng)該只需要在debug包完成，因此可以寫成debugcompile即可
• okhttp作為遠(yuǎn)程通信包是必須導(dǎo)入的，反射引用的包
• 版本的使用需要兼容

添加Debug開關(guān)

• 設(shè)置sRemoteDebugMode 和 配置sRemoteDebugProxyUrl
  Weex SDK的WXEnvironment類里有一對靜態(tài)變量標(biāo)記了weex當(dāng)前的調(diào)試模式是否打開和Debug Server的websocket地址

public static boolean sRemoteDebugMode; //是否開啟debug模式，默認(rèn)關(guān)閉
public static String sRemoteDebugProxyUrl;  //DebugServer的webSocket地址

• 修改sRemoteDebugMode之后調(diào)用reload()

private void initDebugEnviroment(){
  WXEnvironment.sRemoteDebugMode = true;
  WXEnvironment.sRemoteDebugProxyUrl = "ws://xx.xx.xx.xx:8088/debugProxy/native";
  WXSDKEngine.reload()
}

在調(diào)用設(shè)置Debug模式后，一定要是調(diào)用WXSDKEngine.reload()來重置Weex的運(yùn)行環(huán)境上下文，這個(gè)方法重新創(chuàng)建了weex運(yùn)行時(shí)和DebugBridge并講所有的JS調(diào)用橋接到調(diào)試服務(wù)器執(zhí)行。
值得注意的是如果Debug的環(huán)境設(shè)置在SDK初始化之前，那么就不需要在調(diào)用reload方法了

運(yùn)行調(diào)試

1. 服務(wù)端運(yùn)行weex debug
   
   調(diào)試界面

2. 打開集成devtool的應(yīng)用，上述的調(diào)試界面出現(xiàn)對應(yīng)的手機(jī)信息（要在同一個(gè)局域網(wǎng)內(nèi)）

   
   
   手機(jī)連接到 Debug Server
3. 點(diǎn)擊Debugger，然后根據(jù)提示按F12
   
   查看log
   如圖所示，紅框部分為我在hook函數(shù)中打的log
4. 在手機(jī)App List頁面點(diǎn)擊Inspector，查看頁面結(jié)構(gòu)
   
   頁面結(jié)構(gòu)

另附上官網(wǎng)關(guān)于devtool介紹的時(shí)序圖，有時(shí)間可以對照源碼看看：

devtool時(shí)序圖

以上便是Android集成遠(yuǎn)程調(diào)試的相關(guān)內(nèi)容，舉例比較簡單，但也能夠表述集成的過程和使用方法。