前言
前面一篇文章误证，已經(jīng)描述了weex集成Android的環(huán)境配置和方法，并實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的加載本地文件的demo附迷。那么這篇主要講下加載遠(yuǎn)程文件和遠(yuǎn)程調(diào)試彭则。
加載遠(yuǎn)程文件
加載遠(yuǎn)程文件也很簡(jiǎn)單，Weex提供了訪問(wèn)遠(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ò)訪問(wèn)權(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)前目錄下會(huì)生成一個(gè)weex_tmp的文件夾猿规，遠(yuǎn)程訪問(wèn)的地址就是：http://本機(jī)ip:3001/weex_tmp/h5_render/hello_world_1.js
遠(yuǎn)程調(diào)試
添加依賴(lài)
遠(yuǎn)程調(diào)試需要添加weex devtool aar的依賴(lài)，當(dāng)然也是可以通過(guò)對(duì)源碼的依賴(lài)的宙橱。最新的release版本可以通過(guò)這里查看姨俩。
源碼依賴(lài)就不再細(xì)說(shuō)了，添加module师郑，導(dǎo)入源碼环葵。這里僅講述下通過(guò)gradle的配置添加依賴(lài)的方式。
首先宝冕，gradle中添加依賴(lài)
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è)說(shuō)明：
- 調(diào)試應(yīng)該只需要在debug包完成张遭，因此可以寫(xiě)成debugcompile即可
- okhttp作為遠(yuǎn)程通信包是必須導(dǎo)入的，反射引用的包
- 版本的使用需要兼容
| weex sdk | weex inspector | debug server |
|---|---|---|
| 0.8.0.0+ | 0.8.0.0+ | 0.2.39+ |
| 0.7.0+ | 0.07.13 | 0.2.38 |
| 0.6.0+ | 0.0.2.2 | NULL |
添加Debug開(kāi)關(guān)
- 設(shè)置sRemoteDebugMode 和 配置sRemoteDebugProxyUrl
Weex SDK的WXEnvironment類(lèi)里有一對(duì)靜態(tài)變量標(biāo)記了weex當(dāng)前的調(diào)試模式是否打開(kāi)和Debug Server的websocket地址
public static boolean sRemoteDebugMode; //是否開(kāi)啟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()來(lái)重置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)試
- 服務(wù)端運(yùn)行
weex debug
調(diào)試界面 -
打開(kāi)集成devtool的應(yīng)用歉甚，上述的調(diào)試界面出現(xiàn)對(duì)應(yīng)的手機(jī)信息（要在同一個(gè)局域網(wǎng)內(nèi)）
手機(jī)連接到 Debug Server - 點(diǎn)擊
Debugger，然后根據(jù)提示按F12
如圖所示扑眉，紅框部分為我在hook函數(shù)中打的log查看log - 在手機(jī)App List頁(yè)面點(diǎn)擊
Inspector纸泄，查看頁(yè)面結(jié)構(gòu)
頁(yè)面結(jié)構(gòu)
另附上官網(wǎng)關(guān)于devtool介紹的時(shí)序圖，有時(shí)間可以對(duì)照源碼看看：
以上便是Android集成遠(yuǎn)程調(diào)試的相關(guān)內(nèi)容襟雷，舉例比較簡(jiǎn)單刃滓，但也能夠表述集成的過(guò)程和使用方法。
