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>