weex用于android調研總結

1.更新方式

更新方式主要有兩種，

第一種，將準備和項目一起打包的js文件放置在assets文件夾下，同時增加更新js文件的邏輯和讀取更新文件的邏輯，當在apk發布之后想要更新js文件時，只要走下載邏輯，將js文件下載到自定義目錄下，在加載的時候讀取新的js文件即可。

這種方式的缺點在于，js文件普遍都比較大，我目前做的兩個demo一個展示的功能頁面是40kb，紅包雨動畫是16kb，如果有數十個文件，那么apk的大小也是無法保證的。

第二種，直接訪問后臺提供的js文件，即通過網絡方式加載，類似于webview加載h5頁面，此種方式可以搭配緩存策略來做。

兩種方式可以配合使用，對于比較重要的頁面可以放在assets下面，其他的頁面可以通過初始化時進行下載，之后如果有更新可以通過和本地的文件進行版本比對，如果需要更新再下載，不需要更新就是用本地文件。變動較大的可以直接使用網絡文件。

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才能使用當前view
WXSDKEngine.registerComponent("kaolaimage", WeexImageView.class);</code></pre> 
  
通過$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);</code></pre> 
  
自定義weex View
 
  
官方文檔中提到了自定義weex view的方法，其中在一個新的we文件中定義view是可以達到效果的，如果新view與使用者不在同一個目錄下，需要使用 require('path-a/new.we') 引用進來才可以。官網孩提供的另外一種，文件內部的引用view的方法是不行的，在中英文的文檔中分別有兩種方式一種是通過 <element> 一種是通過 <we-element> ,兩種我都試過了沒有效果。
 
  
3.調試方式
 
  
調試方式我開發的時候主要采用了三層方式。第一層在瀏覽器中調試，第二層通過weex-pack在官方提供的demo項目中調試，第三步再放在我們項目中進行調試。
 
  
1. 在瀏覽器中進行調試 ，官方提供了單獨的we頁面可以直接通過weex filename.we命令熱更新到瀏覽器中查看。通過這種方式可以很方便的在瀏覽器中查看log信息。
 
  
這個命令有個缺點，多個文件就無法通過此命令動態更新，必須一個一個執行。
 
  
2. 通過weex-pack命令 ，能夠生成一個官方提供的demo項目，其中提供了android，ios和web三種方式的打包，通過這種方式可以直接打包成apk在手機上調試。
 
  
在demo中調試時，可以使用weex debug命令，打開瀏覽器的窗口，掃描二維碼即可在瀏覽器中調試，方便查看log信息。
 
  
這個步驟需要針對手機進行布局上的一些微調，因為我在實現過程中發現在瀏覽器中運行正常的demo，放在手機上就顯示不正確了。主要是表現在布局上，目前還不太清楚原理，估計可能底weex使用的布局有關系。
 
  
但是這種方式也有缺點，初始化項目完成之后，需要手動更改一次playground項目中的assets/disc目錄下的文件(可以全部刪除)，因為每次打包不會刪掉已經無用的文件。感覺這里是個bug。
 
  
3. 在項目中打包查看 ，通過以上兩步基本上放在我們項目中就不會有什么問題了。在weex_gala分支下，我也在調試面板里增加了更新和demo顯示頁面，不過服務器我搭在了我的電腦上，之后會遷移到外網上。
 
  
一些目前遇到的問題
 
  
打包工具很多但是有一些不是很完善，還需要等待他們的版本更新，比如weexpack工具可以直接打包成apk，但是無用的文件卻不會刪掉，需要手動刪除。weex loader工具需要自己設置很多東西來管理項目。期待之后weexpack的完善。
 
  
分頁加載的流暢性比RN好了很多，但是官方提供的下拉刷新和上拉加載效果都不是很好，會有卡頓的情況。
 
  
對Native的依賴比RN多，本身并沒有加載圖片的方法，需要依賴native的加載圖片邏輯。當然也可以使用native的網絡加載模式。
 
  
因為參考了vue，所以主要的view更新都是響應式的，即數據更新之后，view中即可實時顯示出來，但是這種data設置需要在 <template\> 標簽內，如果想在 <style\> 中更新就不行了。
 
  
單個的we文件的大小在10k以內，但是生成的js文件就很大了，我做的兩個功能分別是16kb(動畫)和43kb(列表)。網上的Demo中有的有上百kb，所以是否要把js文件放在本地的assets文件夾下還是需要考慮的。
 
  
目前的成果
 
  
完成了之前列表頁的分頁加載邏輯實現；
 
  
完成了首頁富運營紅包雨動畫的實現；
 
  
跑通更新流程；
 
  
之后要做的事
 
  
在項目中統一weex總線邏輯；
 
  
紅包雨動畫的暫停和點擊效果；
 
  
使用項目中成熟的模塊，例如請求模塊和一些基本信息獲取的方法；
 
  
 
 
  
來自：http://www.jianshu.com/p/9755ba86143d