當(dāng)前環(huán)境為
weex 1.3.13-beta.7碉纳，vue2.0用法
本文總體根據(jù)官網(wǎng)鏈接https://weex.apache.org/cn/guide/integrate-to-your-app.html 進行集成屁魏，同時記錄下遇到的問題和解決方法怎茫。
引入gradle
// ============= weex start =============
compile 'com.android.support:recyclerview-v7:23.1.1'
compile 'com.android.support:support-v4:23.1.1'
compile 'com.android.support:appcompat-v7:23.1.1'
compile 'com.alibaba:fastjson:1.1.46.android'
compile 'com.taobao.android:weex_sdk:0.16.0@aar'
// ============= weex end =============
// 圖片庫框架
compile 'com.github.bumptech.glide:glide:3.7.0'
ps: 版本可以高不可以低昨悼。官網(wǎng)文檔weex_sdk:0.5.1會報錯誤E/jsengine: ReportException :undefined:5: ReferenceError: Vue is not defined改成當(dāng)前最新版即可蝗锥，這里用的是weex_sdk:0.16.0。
ImageAdapter配置
public class ImageAdapter implements IWXImgLoaderAdapter {
@Override
public void setImage(final String url, final ImageView view, WXImageQuality quality, WXImageStrategy strategy) {
//實現(xiàn)你自己的圖片下載率触，否則圖片無法顯示终议。
WXSDKManager.getInstance().postOnUiThread(new Runnable() {
@Override
public void run() {
Glide.with(WXEnvironment.getApplication()).load(url).placeholder(R.mipmap.ic_launcher).diskCacheStrategy(DiskCacheStrategy.SOURCE).crossFade().dontAnimate().into(view);
}
}, 0);
}
}
application初始化
public class WXApplication extends Application {
@Override
public void onCreate() {
super.onCreate();
InitConfig config = new InitConfig.Builder().setImgAdapter(new ImageAdapter()).build();
WXSDKEngine.initialize(this, config);
}
}
開始渲染W(wǎng)eex View
public class WeexActivity extends AppCompatActivity implements IWXRenderListener {
WXSDKInstance mWXSDKInstance;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_weex);
mWXSDKInstance = new WXSDKInstance(this);
mWXSDKInstance.registerRenderListener(this);
/**
* WXSample 可以替換成自定義的字符串，針對埋點有效葱蝗。
* template 是.we transform 后的 js文件穴张。
* option 可以為空，或者通過option傳入 js需要的參數(shù)两曼。例如bundle js的地址等皂甘。
* jsonInitData 可以為空。
* width 為-1 默認(rèn)全屏悼凑，可以自己定制偿枕。
* height =-1 默認(rèn)全屏，可以自己定制佛析。
*/
mWXSDKInstance.render("WXSample", WXFileUtils.loadAsset("index.js", this), 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) {
Toast.makeText(this, "onException: " + errCode + ", " + msg, Toast.LENGTH_SHORT).show();
}
@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();
}
}
}
主要是mWXSDKInstance.render("WXSample", WXFileUtils.loadAsset("index.js", this), null, null, -1, -1, WXRenderStrategy.APPEND_ASYNC);這一句益老， mWXSDKInstance.render加載本地目錄js文件， mWXSDKInstance.renderByUrl可加載遠程js文件寸莫，實現(xiàn)熱更新捺萌。
jsbundle資源生成
android加載weex和加載RN類似也是要提供個jsbundle文件。weex生成jsbundle也很簡單膘茎，在weex項目下運行npm run build, 編譯完成后會在dist目錄下生成文件桃纯。每個vue文件會生成對應(yīng)的js。
image
把dist目錄下js文件拷貝到android assets目錄披坏。至此态坦，集成完成。
源碼
https://github.com/huazhiyuan2008/WeexHotFixDemo
思考與總結(jié)
-
weex_sdk版本最好要最新棒拂，遇到莫名其妙的問題伞梯，可以考慮升級此版本 - 每個vue生成單獨的jsbundle玫氢，這樣做到頁面文件獨立，size很小谜诫，有利于熱更新加載速度漾峡。
- 熱更新整體方案和細節(jié)進一步思考
