1.更新方式
更新方式主要有兩種，
第一種痢缎，將準(zhǔn)備和項(xiàng)目一起打包的js文件放置在assets文件夾下胁勺，同時(shí)增加更新js文件的邏輯和讀取更新文件的邏輯，當(dāng)在apk發(fā)布之后想要更新js文件時(shí)独旷，只要走下載邏輯署穗，將js文件下載到自定義目錄下，在加載的時(shí)候讀取新的js文件即可嵌洼。
這種方式的缺點(diǎn)在于案疲，js文件普遍都比較大，我目前做的兩個(gè)demo一個(gè)展示的功能頁面是40kb麻养，紅包雨動畫是16kb褐啡，如果有數(shù)十個(gè)文件，那么apk的大小也是無法保證的鳖昌。
第二種备畦，直接訪問后臺提供的js文件低飒，即通過網(wǎng)絡(luò)方式加載，類似于webview加載h5頁面懂盐，此種方式可以搭配緩存策略來做褥赊。
兩種方式可以配合使用，對于比較重要的頁面可以放在assets下面莉恼，其他的頁面可以通過初始化時(shí)進(jìn)行下載拌喉，之后如果有更新可以通過和本地的文件進(jìn)行版本比對，如果需要更新再下載俐银，不需要更新就是用本地文件尿背。變動較大的可以直接使用網(wǎng)絡(luò)文件。
2.自定義組件
自定義Native View
public class WeexImageView extends WXComponent {
public WeexImageView(WXSDKInstance instance, WXDomObject dom, WXVContainer parent, boolean isLazy) {
super(instance, dom, parent, isLazy);
}
@Override
protected View initComponentHostView(@NonNull Context context) {
return new KaolaImageView(context);
}
@Override
public View getHostView() {
return super.getHostView();
}
@WXComponentProp(name = "url")
public void setUrlStr(String url) {
ImageLoaderManager.startLoad(new ImageLoaderBuilder(((KaolaImageView) mHost), url));
}
}
//注冊之后weex才能使用當(dāng)前view
WXSDKEngine.registerComponent("kaolaimage", WeexImageView.class);
通過$vm(id)找到自定義組件的上下文捶惜，通過this.$el(id)找到組件残家。
自定義Module
public class DeviceModule extends WXModule {
@WXModuleAnno
public void getOSVersion(@Nullable JSCallback callback) {
String osversion = android.os.Build.VERSION.RELEASE;
if(callback != null) {
callback.invoke(osversion);
}
}
@WXModuleAnno
public void getSDKVersion(@Nullable JSCallback callback) {
@SuppressWarnings("deprecation")
String sdkversion = android.os.Build.VERSION.SDK;
if(callback != null) {
callback.invoke(sdkversion);
}
}
}
WXSDKEngine.registerModule("deviceApi", DeviceModule.class);
自定義weex View
官方文檔中提到了自定義weex view的方法，其中在一個(gè)新的we文件中定義view是可以達(dá)到效果的售躁，如果新view與使用者不在同一個(gè)目錄下，需要使用 require('path-a/new.we') 引用進(jìn)來才可以茴晋。官網(wǎng)孩提供的另外一種陪捷，文件內(nèi)部的引用view的方法是不行的，在中英文的文檔中分別有兩種方式一種是通過 <element> 一種是通過 <we-element> ,兩種我都試過了沒有效果诺擅。
3.調(diào)試方式
調(diào)試方式我開發(fā)的時(shí)候主要采用了三層方式市袖。第一層在瀏覽器中調(diào)試，第二層通過weex-pack在官方提供的demo項(xiàng)目中調(diào)試烁涌，第三步再放在我們項(xiàng)目中進(jìn)行調(diào)試苍碟。
1.在瀏覽器中進(jìn)行調(diào)試，官方提供了單獨(dú)的we頁面可以直接通過weex filename.we命令熱更新到瀏覽器中查看撮执。通過這種方式可以很方便的在瀏覽器中查看log信息微峰。
這個(gè)命令有個(gè)缺點(diǎn)，多個(gè)文件就無法通過此命令動態(tài)更新抒钱，必須一個(gè)一個(gè)執(zhí)行蜓肆。
2.通過weex-pack命令，能夠生成一個(gè)官方提供的demo項(xiàng)目谋币，其中提供了android仗扬，ios和web三種方式的打包，通過這種方式可以直接打包成apk在手機(jī)上調(diào)試蕾额。
在demo中調(diào)試時(shí)早芭，可以使用weex debug命令，打開瀏覽器的窗口诅蝶，掃描二維碼即可在瀏覽器中調(diào)試退个，方便查看log信息募壕。
這個(gè)步驟需要針對手機(jī)進(jìn)行布局上的一些微調(diào)，因?yàn)槲以趯?shí)現(xiàn)過程中發(fā)現(xiàn)在瀏覽器中運(yùn)行正常的demo帜乞，放在手機(jī)上就顯示不正確了司抱。主要是表現(xiàn)在布局上，目前還不太清楚原理黎烈，估計(jì)可能底weex使用的布局有關(guān)系习柠。
但是這種方式也有缺點(diǎn)，初始化項(xiàng)目完成之后照棋，需要手動更改一次playground項(xiàng)目中的assets/disc目錄下的文件(可以全部刪除)资溃，因?yàn)槊看未虬粫h掉已經(jīng)無用的文件。感覺這里是個(gè)bug烈炭。
3.在項(xiàng)目中打包查看溶锭，通過以上兩步基本上放在我們項(xiàng)目中就不會有什么問題了。在weex_gala分支下符隙，我也在調(diào)試面板里增加了更新和demo顯示頁面趴捅，不過服務(wù)器我搭在了我的電腦上，之后會遷移到外網(wǎng)上霹疫。
一些目前遇到的問題
打包工具很多但是有一些不是很完善拱绑，還需要等待他們的版本更新，比如weexpack工具可以直接打包成apk丽蝎，但是無用的文件卻不會刪掉猎拨，需要手動刪除。weex loader工具需要自己設(shè)置很多東西來管理項(xiàng)目屠阻。期待之后weexpack的完善红省。
目前還不支持停止和還原動畫，他們之后的任務(wù)已經(jīng)羅列在這里了https://github.com/alibaba/weex/issues/1494国觉。
分頁加載的流暢性比RN好了很多吧恃，但是官方提供的下拉刷新和上拉加載效果都不是很好，會有卡頓的情況蛉加。
對Native的依賴比RN多蚜枢，本身并沒有加載圖片的方法，需要依賴native的加載圖片邏輯针饥。當(dāng)然也可以使用native的網(wǎng)絡(luò)加載模式厂抽。
因?yàn)閰⒖剂藇ue，所以主要的view更新都是響應(yīng)式的丁眼，即數(shù)據(jù)更新之后筷凤，view中即可實(shí)時(shí)顯示出來，但是這種data設(shè)置需要在<template>標(biāo)簽內(nèi)，如果想在<style>中更新就不行了藐守。
單個(gè)的we文件的大小在10k以內(nèi)挪丢，但是生成的js文件就很大了，我做的兩個(gè)功能分別是16kb(動畫)和43kb(列表)卢厂。網(wǎng)上的Demo中有的有上百kb乾蓬，所以是否要把js文件放在本地的assets文件夾下還是需要考慮的。
目前的成果
完成了之前列表頁的分頁加載邏輯實(shí)現(xiàn)慎恒；
完成了首頁富運(yùn)營紅包雨動畫的實(shí)現(xiàn)任内；
跑通更新流程；
之后要做的事
在項(xiàng)目中統(tǒng)一weex總線邏輯融柬；
紅包雨動畫的暫停和點(diǎn)擊效果死嗦；
使用項(xiàng)目中成熟的模塊，例如請求模塊和一些基本信息獲取的方法粒氧；
