原理
??服務(wù)端將weex可用的模塊打包成JS Bundle下發(fā)到客戶(hù)端恩袱,JS Bundle沒(méi)有分具體模塊所以文件較大,每次進(jìn)入頁(yè)面去請(qǐng)求會(huì)產(chǎn)生多余的通信流量及下載時(shí)間。
??所以加入weex緩存策略,將服務(wù)端下發(fā)的JS Bundle緩存到本地文件,請(qǐng)求下載時(shí)獲取服務(wù)端JS_Bundle文件MD5并與本地緩存文件MD5校驗(yàn)汁掠,校驗(yàn)成功直接使用緩存,校驗(yàn)失敗清除緩存并從服務(wù)端下載新的文件集币,最后緩存考阱。(服務(wù)端JS_Bundle地址為空時(shí)直接使用本地可用緩存)
實(shí)現(xiàn)
??實(shí)現(xiàn)代碼很簡(jiǎn)單,只需要自定義一個(gè)WXSDKInstance鞠苟,重寫(xiě)renderByUrl及render方法即可乞榨。
STEP1
下載JS前重寫(xiě)renderByUrl
??在拿到服務(wù)端JS的url后秽之,首先判斷是否有本地JS緩存,若有則對(duì)比本地JS及服務(wù)端JS的MD5進(jìn)行校驗(yàn)吃既,校驗(yàn)通過(guò)則直接使用本地JS考榨,否則按原計(jì)劃下載服務(wù)端JS。Weex支持使用本地JS文件鹦倚。
@Override
public void renderByUrl(String pageName, String url, Map<String, Object> options, String jsonInitData, WXRenderStrategy flag) {
String local = "";
if(TextUtils.isEmpty(url) || md5Check(url)){
local = getLocalJs();//獲取本地JS路徑
}
if(!TextUtils.isEmpty(local){
super.renderByUrl(pageName, local, options, jsonInitData, flag);
}else {
super.renderByUrl(pageName, url, options, jsonInitData, flag);
}
}
/**
* 獲取本地JS路徑
*/
private String getLocalJs(){
try {
File f = new File(context.getFilesDir(), "local_js.txt");
if(f.exists()) {
return "file://" + f.getAbsolutePath();
}
} catch (Exception e) {
}
return "";
}
STEP2
渲染時(shí)重寫(xiě)render
??JS文件獲取成功后河质,若是從服務(wù)端下載的JS,則需要進(jìn)行文件緩存震叙。
@Override
public void render(String pageName, String template, Map<String, Object> options, String jsonInitData, WXRenderStrategy flag) {
saveWeexFile(template);
super.render(pageName, template, options, jsonInitData, flag);
}
/**
* 異步存儲(chǔ)JS Bundle RX實(shí)現(xiàn)
* @param template
*/
private void saveWeexFile(String template){
if(isLocalFile(getBundleUrl())){
return;
}
Observable
.just(template)
.map(new Function<String, Boolean>() {
@Override
public Boolean apply(String s) throws Exception {
//weex對(duì)文件名不敏感掀鹅,存txt文件
return FileUtil.saveFile(context.getFilesDir().getAbsolutePath(), "local_js.txt", s.getBytes("UTF-8"));
}
})
.subscribeOn(Schedulers.io())
.subscribe(new Consumer<Boolean>() {
@Override
public void accept(Boolean aBoolean) throws Exception {
if(aBoolean){
//緩存成功
}
}
},new Consumer<Throwable>(){
@Override
public void accept(Throwable throwable) throws Exception {
throwable.printStackTrace();
}
});
}
/**
* 異步存儲(chǔ)JS Bundle
* @param template
*/
private void saveWeexFile(String template){
if(isLocalFile(getBundleUrl())){
return;
}
Thread thread = new Thread( new Runnable(){
@Override
public void run(){
FileUtil.saveFile(context.getFilesDir().getAbsolutePath(), "local_js.txt", template.getBytes("UTF-8"));
}
});
thread.start();
}
/**
* 判斷是本地文件還是網(wǎng)絡(luò)url
*/
private boolean isLocalFile(String url){
if(TextUtils.isEmpty(url){
return false;
}
Uri uri = Uri.parse(url);
if (uri != null && TextUtils.equals(uri.getScheme(), "file")) {
return true;
}
return false;
}
STEP3
在頁(yè)面使用自定義WXSDKInstance替換原WXSDKInstance
PS
??如果weex頁(yè)面更新不頻繁,就沒(méi)必要每次都進(jìn)行文件校驗(yàn)捐友。每次啟動(dòng)app只進(jìn)行一次文件校驗(yàn)并緩存MD5淫半,后續(xù)打開(kāi)頁(yè)面進(jìn)行本地MD5校驗(yàn)溃槐。