WeexContainer-Android：Android 平臺上 Weex 容器

ReinaldoMul 6年前發布 | 45K 次閱讀 Weex Android開發 移動開發

WeexContainer-Android

一個Android平臺上Weex容器，實現MPA,Bundle緩存、驗簽等通用功能。

一、Demo：

http://www.masonliu.com/app/digua/download

https://github.com/MasonLiuChn/WeexExplorer

二、功能：

  1. Native跳轉Weex
  2. Native通知Weex
  3. Weex跳轉Weex（實現MPA多頁面應用）
  4. Weex跳轉、調用Native
  5. Bundle緩存功能
  6. Bundle驗證簽名
  7. 開啟調試器ChromeDebugger
  8. 新網絡模塊

（一）Native跳轉Weex

  1. 加載assets/weex下(使用assets方式時，只支持放在assets/weex下)
  2. 加載存儲空間內的文件
  3. 加載網絡文件
    • Release環境下，加載網絡文件的順序是 a.查找緩存文件（有問題則刪除）->b. 使用網絡文件->c.查找assets
//example
WeexPageActivity.startFrom(
                LauncherActivity.this,
                //"file://local/weex/main.js",
                //"file://sdcard/xx",
                "http://192.168.12.20:10004/dist/pages/main.js",
                null);

（二）Native通知Weex

  • 1、Weex SDK 本身提供了globalEvent實現Native發事件給Weex，這里以監聽Android返回鍵為例介紹其用法：
public void onBackPressed() {
        if (mWXSDKInstance != null && renderSuccess) {
            Map<String, Object> params = new HashMap<>();
            params.put("name", "returnmsg");
            mWXSDKInstance.fireGlobalEventCallback("androidback", params);
        } else {
            super.onBackPressed();
        }
    }
const globalEvent = weex.requireModule('globalEvent');
export default {
    created() {
        this.globalEvent = globalEvent;
        this.globalEvent.addEventListener("androidback", e => {
            this.router.back()
        });
    },
    methods: {}
}

（三）Weex跳轉Weex，實現MPA多頁面應用

  • 1、Weex工程內使用VueRouter做頁面跳轉，Url為Bundle的網絡地址
const basePath = 'http://192.168.12.20:10004/dist';
export default [
    {path: '/', component: basePath + '/pages/index.js'},
    {path: '/main', component: basePath + '/pages/main.js'}
];
...
router.push('/main')
  • 2、Android工程無需做配置，本SDK會自動開啟新Activity加載Bundle
  • 3、使用者想做自定義的跳轉配置，則可以使用SDK提供的如下方法：
WeexUtil.setNavigatorPushHandler(new WXNavigatorManager.WXNavigatorPushHandler(){
    public void push(WXSDKInstance mWXSDKInstance, Uri uri, String instanceId){
    }
});


WeexUtil.setURLIntercepter(url -> {
            return url;
});</code></pre> 
  
（四）Weex跳轉、調用Native
 
  
     
   
  • 1、Weex工程使用如下：
    •  
  
 
  
weex.requireModule("CommonModule").handle('/activity/movieDetail?id=123')
 
  
     
   
  • 2、Android工程使用如下：
    •  
  
 
  
WeexUtil.setCommonModuleHandler((content, mWXSDKInstance, commonModule) -> {
            //我這里使用了ARouter處理Native端的跳轉
            //RouterUtil.go((Activity) mWXSDKInstance.getContext(), content);
});
 
  
     
   
  • 3、Weex調用Native時如果是需要返回結果的調用，則需自己實現注冊一個Module，編寫帶有jscallback的方法
    •  
  
 
  
/*****example jscallback*****/
@JSMethod(uiThread = false)
public void nativeHttpGet(String url, JSCallback callback) {}
 
  
（五）Bundle緩存功能
 
  
     
   
  • 1、SDK提供了默認的Bundle緩存功能 
    
       
     
    • Release環境下，加載網絡文件的順序是 a.查找緩存文件（有問題則刪除）->b. 使用網絡文件->c.查找assets
      •  
     
    • 使用LRU實現緩存，對相同url的Bundle實施緩存，默認緩存容量15
      •  
    
     </li> 
   
  • 2、使用者若想自己實現緩存，可以使用下面方法
    •  
  </ul> 
  
    WeexUtil.setCacheHandler(new WXLoadAndCacheManager.WXCacheHandler(){
    public void cache(InputStream inputStream, String url){
    }
});
     
  
    （六）Bundle驗證簽名
     
  
    SDK沒有提供默認的驗簽功能，因為這屬于應用方的業務。但SDK提供了攔截Bundle下載的方法，在該方法里開發者可以校驗下載Bundle url里https的證書 或者 bundle文件的md5
     
  
    WeexUtil.setNetworkHandler(new WXLoadAndCacheManager.WXNetworkHandler(){
    public InputStream executeDownload(String url) throws Exception{
    return null;
    }
});
     
  
    （七）開啟調試器ChromeDebugger
     
  
       
   
    • 1、該SDK集成了weex debug功能，啟動SDK時，將下面第二個參數設置為true
      •  
  
     
  
    WeexUtil.init(this,true,BuildConfig.BUILD_IP,null);
     
  
       
   
    • 2、weex debug
      •  
   
    • 3、在chrome上打開debug server如 http://yourip:8088
      •  
   
    • 4、啟動app
      •  
   
    • 5、此時chrome頁面上出現了手機設備
      •  
   
    • 6、點擊debugger開始調試
      •  
  
     
  
    （八）新網絡模塊
     
  
    網絡請求模塊除了weex自帶的stream，還額外提供了nativeHttpGet方法，使用okhttp做請求，后續會增加post、put、delete等方法
     
  
    var commonModule=weex.requireModule("CommonModule");
commonModule.nativeHttpGet(url,(response)=>{
            if(!response.ok){
                reject(response)
            }else{
                resolve(response)
            }
        }
);
     
  
    三、Usage
     
  
    （一）簡單用法
     
  
    repositories {
    maven { url "https://jitpack.io" }
    maven { url "https://github.com/MasonLiuChn/MasonMavenRepository/raw/maven/releases" }
}
dependencies {
 compile 'com.github.MasonLiuChn:WeexContainer-Android:1.0.0'
}
     
  
    //在Applicaiton里設置
 WeexUtil.init(this, false, BuildConfig.BUILD_IP,null);
     
  
    WeexPageActivity.startFrom(
                LauncherActivity.this,
                "http://192.168.12.20:10004/dist/pages/main.js",
                null);
     
  
    （二）高級用法
     
  
    public static void init(Application application,
                            boolean connectDebuggerOnAppDebug,
                            @Nullable String debuggerHost,
                            @Nullable IWXImgLoaderAdapter iwxImgLoaderAdapter) {
    

    }
    

    public static void setDebugable(boolean isDebug) {
    

    }
    

    public static void setNavigatorPushHandler(WXNavigatorManager.WXNavigatorPushHandler handler) {
    

    }
    

    public static void setURLIntercepter(WXURLManager.WXURLHandler handler) {
    

    }
    

    public static void setCommonModuleHandler(WXCommonModuleManager.WXCommonModuleHandler handler) {
    

    }
    

    public static void setCacheHandler(WXLoadAndCacheManager.WXCacheHandler handler) {
    

    }
    

    public static void setNetworkHandler(WXLoadAndCacheManager.WXNetworkHandler handler) {
    

    }</code></pre> 
  
    四、Todo
     
  
       
   
    1. 合并默認bundle下載和nativeHttp的網絡庫
      2.  
   
    2. 對外提供方法可設置okhttpclient
      3.  
   
    3. iOS...
      4.  
  
     
  
    Contact me:
     
   
  
     
     
  
     
 本文由用戶 ReinaldoMul 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！