前言
前面一篇文章,已经描述了weex集成Android的环境配置和方法,并实现了一个简单的加载本地文件的demo。那么这篇主要讲下加载远程文件和远程调试。
加载远程文件
加载远程文件也很简单,Weex提供了访问远程地址的接口renderByUrl
,具体实现代码:
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
文件中添加网络访问权限 <uses-permission android:name="android.permission.INTERNET"/>
,这样就实现了加载远程文件。
运行时,首先在.we
的目录中执行weex hello_world_1.we --port 3001
,然后在当前目录下会生成一个weex_tmp的文件夹,远程访问的地址就是:http://本机ip:3001/weex_tmp/h5_render/hello_world_1.js
远程调试
添加依赖
远程调试需要添加weex devtool aar的依赖,当然也是可以通过对源码的依赖的。最新的release版本可以通过这里查看。
源码依赖就不再细说了,添加module,导入源码。这里仅讲述下通过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'
}
这里补充几个说明:
- 调试应该只需要在debug包完成,因此可以写成debugcompile即可
- okhttp作为远程通信包是必须导入的,反射引用的包
- 版本的使用需要兼容
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开关
- 设置sRemoteDebugMode 和 配置sRemoteDebugProxyUrl
Weex SDK的WXEnvironment类里有一对静态变量标记了weex当前的调试模式是否打开和Debug Server的websocket地址
public static boolean sRemoteDebugMode; //是否开启debug模式,默认关闭
public static String sRemoteDebugProxyUrl; //DebugServer的webSocket地址
- 修改sRemoteDebugMode之后调用reload()
private void initDebugEnviroment(){
WXEnvironment.sRemoteDebugMode = true;
WXEnvironment.sRemoteDebugProxyUrl = "ws://xx.xx.xx.xx:8088/debugProxy/native";
WXSDKEngine.reload()
}
在调用设置Debug模式后,一定要是调用WXSDKEngine.reload()来重置Weex的运行环境上下文,这个方法重新创建了weex运行时和DebugBridge并讲所有的JS调用桥接到调试服务器执行。
值得注意的是如果Debug的环境设置在SDK初始化之前,那么就不需要在调用reload方法了
运行调试
- 服务端运行
weex debug
调试界面 -
打开集成devtool的应用,上述的调试界面出现对应的手机信息(要在同一个局域网内)
手机连接到 Debug Server - 点击
Debugger
,然后根据提示按F12
查看log 如图所示,红框部分为我在hook函数中打的log - 在手机App List页面点击
Inspector
,查看页面结构
页面结构
另附上官网关于devtool介绍的时序图,有时间可以对照源码看看:
devtool时序图
以上便是Android集成远程调试的相关内容,举例比较简单,但也能够表述集成的过程和使用方法。
网友评论