WeexContainer-Android:Android 平台上 Weex 容器
ReinaldoMul
7年前
<h2>WeexContainer-Android</h2> <p>一个Android平台上Weex容器,实现MPA,Bundle缓存、验签等通用功能。</p> <h2>一、Demo:</h2> <p><a href="/misc/goto?guid=4959757688625380972" rel="nofollow,noindex">http://www.masonliu.com/app/digua/download</a></p> <p><a href="/misc/goto?guid=4959757688713145584" rel="nofollow,noindex">https://github.com/MasonLiuChn/WeexExplorer</a></p> <h2>二、功能:</h2> <ol> <li>Native跳转Weex</li> <li>Native通知Weex</li> <li>Weex跳转Weex(实现MPA多页面应用)</li> <li>Weex跳转、调用Native</li> <li>Bundle缓存功能</li> <li>Bundle验证签名</li> <li>开启调试器ChromeDebugger</li> <li>新网络模块</li> </ol> <h3>(一)Native跳转Weex</h3> <ol> <li>加载assets/weex下(使用assets方式时,只支持放在assets/weex下)</li> <li>加载存储空间内的文件</li> <li>加载网络文件 <ul> <li>Release环境下,加载网络文件的顺序是 a.查找缓存文件(有问题则删除)->b. 使用网络文件->c.查找assets</li> </ul> </li> </ol> <pre> <code class="language-javascript">//example WeexPageActivity.startFrom( LauncherActivity.this, //"file://local/weex/main.js", //"file://sdcard/xx", "http://192.168.12.20:10004/dist/pages/main.js", null);</code></pre> <h3>(二)Native通知Weex</h3> <ul> <li>1、Weex SDK 本身提供了globalEvent实现Native发事件给Weex,这里以监听Android返回键为例介绍其用法:</li> </ul> <pre> <code class="language-javascript">public void onBackPressed() { if (mWXSDKInstance != null && renderSuccess) { Map<String, Object> params = new HashMap<>(); params.put("name", "returnmsg"); mWXSDKInstance.fireGlobalEventCallback("androidback", params); } else { super.onBackPressed(); } }</code></pre> <pre> <code class="language-javascript">const globalEvent = weex.requireModule('globalEvent'); export default { created() { this.globalEvent = globalEvent; this.globalEvent.addEventListener("androidback", e => { this.router.back() }); }, methods: {} }</code></pre> <h3>(三)Weex跳转Weex,实现MPA多页面应用</h3> <ul> <li>1、Weex工程内使用VueRouter做页面跳转,Url为Bundle的网络地址</li> </ul> <pre> <code class="language-javascript">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')</code></pre> <ul> <li>2、Android工程无需做配置,本SDK会自动开启新Activity加载Bundle</li> <li>3、使用者想做自定义的跳转配置,则可以使用SDK提供的如下方法:</li> </ul> <pre> <code class="language-javascript">WeexUtil.setNavigatorPushHandler(new WXNavigatorManager.WXNavigatorPushHandler(){ public void push(WXSDKInstance mWXSDKInstance, Uri uri, String instanceId){ } }); WeexUtil.setURLIntercepter(url -> { return url; });</code></pre> <h3>(四)Weex跳转、调用Native</h3> <ul> <li>1、Weex工程使用如下:</li> </ul> <pre> <code class="language-javascript">weex.requireModule("CommonModule").handle('/activity/movieDetail?id=123')</code></pre> <ul> <li>2、Android工程使用如下:</li> </ul> <pre> <code class="language-javascript">WeexUtil.setCommonModuleHandler((content, mWXSDKInstance, commonModule) -> { //我这里使用了ARouter处理Native端的跳转 //RouterUtil.go((Activity) mWXSDKInstance.getContext(), content); });</code></pre> <ul> <li>3、Weex调用Native时如果是需要返回结果的调用,则需自己实现注册一个Module,编写带有jscallback的方法</li> </ul> <pre> <code class="language-javascript">/*****example jscallback*****/ @JSMethod(uiThread = false) public void nativeHttpGet(String url, JSCallback callback) {}</code></pre> <h3>(五)Bundle缓存功能</h3> <ul> <li>1、SDK提供了默认的Bundle缓存功能 <ul> <li>Release环境下,加载网络文件的顺序是 a.查找缓存文件(有问题则删除)->b. 使用网络文件->c.查找assets</li> <li>使用LRU实现缓存,对相同url的Bundle实施缓存,默认缓存容量15</li> </ul> </li> <li>2、使用者若想自己实现缓存,可以使用下面方法</li> </ul> <pre> <code class="language-javascript">WeexUtil.setCacheHandler(new WXLoadAndCacheManager.WXCacheHandler(){ public void cache(InputStream inputStream, String url){ } });</code></pre> <h3>(六)Bundle验证签名</h3> <p>SDK没有提供默认的验签功能,因为这属于应用方的业务。但SDK提供了拦截Bundle下载的方法,在该方法里开发者可以校验下载Bundle url里https的证书 或者 bundle文件的md5</p> <pre> <code class="language-javascript">WeexUtil.setNetworkHandler(new WXLoadAndCacheManager.WXNetworkHandler(){ public InputStream executeDownload(String url) throws Exception{ return null; } });</code></pre> <h3>(七)开启调试器ChromeDebugger</h3> <ul> <li>1、该SDK集成了weex debug功能,启动SDK时,将下面第二个参数设置为true</li> </ul> <pre> <code class="language-javascript">WeexUtil.init(this,true,BuildConfig.BUILD_IP,null);</code></pre> <ul> <li>2、weex debug</li> <li>3、在chrome上打开debug server如 <a href="/misc/goto?guid=4959757688798769012" rel="nofollow,noindex">http://yourip:8088</a></li> <li>4、启动app</li> <li>5、此时chrome页面上出现了手机设备</li> <li>6、点击debugger开始调试</li> </ul> <h3>(八)新网络模块</h3> <p>网络请求模块除了weex自带的stream,还额外提供了nativeHttpGet方法,使用okhttp做请求,后续会增加post、put、delete等方法</p> <pre> <code class="language-javascript">var commonModule=weex.requireModule("CommonModule"); commonModule.nativeHttpGet(url,(response)=>{ if(!response.ok){ reject(response) }else{ resolve(response) } } );</code></pre> <h2>三、Usage</h2> <h3>(一)简单用法</h3> <pre> <code class="language-javascript">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' }</code></pre> <pre> <code class="language-javascript">//在Applicaiton里设置 WeexUtil.init(this, false, BuildConfig.BUILD_IP,null);</code></pre> <pre> <code class="language-javascript">WeexPageActivity.startFrom( LauncherActivity.this, "http://192.168.12.20:10004/dist/pages/main.js", null);</code></pre> <h3>(二)高级用法</h3> <pre> <code class="language-javascript">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> <h2>四、Todo</h2> <ol> <li>合并默认bundle下载和nativeHttp的网络库</li> <li>对外提供方法可设置okhttpclient</li> <li>iOS...</li> </ol> <h2>Contact me:</h2> <ul> <li> <p>Blog: <a href="/misc/goto?guid=4959757688872923371" rel="nofollow,noindex">http://www.masonliu.com</a></p> </li> <li> <p>Email: <a href="/misc/goto?guid=4959757688956346966" rel="nofollow,noindex">MasonLiuChn@gmail.com</a></p> </li> </ul> <p> </p> <p> </p>