weex(weex官网)

摘要: weex 旨在兼顾web动态性与native的用户体验,如果想将两者的优势最大化,那么缓存就显得格外重要,本文介绍如何利用缓存,实现weex页面迅速打开,甚至“秒开”的效果。

作者:阿里云-移动云-大前端团队

前言

weex 旨在兼顾web动态性与native的用户体验,如果想将两者的优势最大化,那么缓存就显得格外重要,本文介绍如何利用缓存,实现weex页面迅速打开,甚至“秒开”的效果。

正文

要实现 native 端的缓存,需要两个层面:

  • JS 文件缓存

  • request 请求缓存

单纯缓存JS文件是没用的,除非你的JS文件是hello world级别:不会在JS内部进行网络请求加载其他资源。有人说我的JS也有网络请求,请求了一张图片,也是可以的呀?十有八九那是 SDWebImage 功劳,那是你实现了图片加载的协议,SDWebImage已经帮你做了缓存了。

下面详细来看下如何让 weex 在 iOS 上支持常见的网络缓存:

JS 文件缓存

大致有两种思路:

  • 预加载类型:在启动后,客户端主动到服务端拉取会用到JS并缓存。这样下次用到该JS文件事即可实现“秒开”。

  • 类似于传统的网络缓存类型:第一次加载该JS文件时,需要通过网络加载,下次访问时就可以不走网络,需要设置cache策略。

预加载方式也是常见的缓存方式,启动后预先加载,在此不做赘述。

第二种类型,有一篇文章已经有比较详细的论述:

  • 《Weex的JS缓存实现》

具体的思路用流程图表示如下:

weex(weex官网)

具体的步骤如下:

  • 下载JS前重写renderByUrl

  • 渲染时重写render

  • 在页面使用自定义WXSDKInstance替换原WXSDKInstance

第一步 下载JS前重写renderByUrl

在拿到服务端JS的url后,首先判断是否有本地JS缓存,若有则对比本地JS及服务端JS的MD5进行校验,校验通过则直接使用本地JS,否则按原计划下载服务端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 "";
}

第二步 渲染时重写render

JS文件获取成功后,若是从服务端下载的JS,则需要进行文件缓存。

@Overridepublic void render(String pageName, String template, Map<String, Object> options, String jsonInitData, WXRenderStrategy flag) {
 saveWeexFile(template); super.render(pageName, template, options, jsonInitData, flag);
}/**
* 异步存储JS Bundle RX实现
* @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对文件名不敏感,存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();
 }
 });
 }/**
* 异步存储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();
}/**
* 判断是本地文件还是网络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;
}

第三步 在页面使用自定义WXSDKInstance替换原WXSDKInstance

注意:如果weex页面更新不频繁,就没必要每次都进行文件校验。每次启动app只进行一次文件校验并缓存MD5,后续打开页面进行本地MD5校验。

request 缓存

上面介绍的是JS的缓存,但是 JS 文件缓存后,还是无法实现无网络状况下,直接打开 JS 页面,JS 页面还有大量的资源文件,JS 文件内部还是会发送网络请求,这些网络请求依然需要用到缓存策略。

这个部分的缓存基本的思路如下:

  • 与传统的缓存是一样的。

  • 添加一个缓存方式:先缓存后网络。

weex的网络请求部分,可以设置扩展,设置后,所有的weex SDK的网络请求都会经由该扩展处理,所以request部分的请求,实际上与传统的缓存是一样的。比如我们熟悉的NSCache、YYCache等第三方的网络请求方式也是可以复用的。

免责声明: 文章源于会员发布,不作为任何投资建议

如有侵权请联系我们删除,本文链接:https://www.sws100.com/baike/11920.html

(0)
句子百科句子百科
上一篇 2022年 8月 27日
下一篇 2022年 8月 27日

相关推荐

  • 中国国鸟是什么(中国国鸟是什么鸟)

    很多国家都有自己的国鸟,像美国的白头鹰,还有象征法国的高卢雄鸡,大家多多少少能数出几个。但小伙伴们肯定不知道,咱们中国的国鸟又是什么呢?

    2022年 10月 30日
  • 绿地集团是央企还是国企(绿地集团是央企还是国企呢)

    近日,封面新闻记者注意到,11月13日,绿地控股集团通过官网发布公告宣布公司所属行业类别由“房地产业”变更为“土木工程建筑业”。 公告称,鉴于公司基建产业收入占比已超过50%,按照《上市公司行业分类指引(2012 年修订)》(证监会公告[2012]31 号)的相关规定,根据中国证券监督管理委员会日前核准并发布的《2021年3季度上市公司行业分类结果》,公司所…

    2022年 10月 12日
  • 白色塑料发黄怎么变白(84消毒液能把塑料变白吗)

    从电器中去除泛黄可能会很痛苦,但您可以尝试几种方法。每周使用含有漂白剂、魔术橡皮擦或小苏打的通用清洁剂清洁电器。对于严重泛黄的情况,将过氧化霜涂抹在器具上,并在阳光直射下放置 3 至 4 小时以逆转变色。 进行基本清洁 1、用通用清洁剂擦拭电器。要清洁白色电器,请使用含有漂白剂的通用清洁喷雾剂,它可以消毒表面并美白污渍。将产品喷在干净的布或海绵上,并彻底擦拭…

    2023年 4月 10日
  • 武汉地铁最晚几点收班(武汉地铁一般最晚几点停运)

    春节期间 武汉地铁制定专项行车方案 节日期间按照休息日组织运营 地铁线网早上6时30分开班 1月20日、26日、27日 轨道交通4号线在运营结束后 增开大站快车临客 满足夜间乘坐火车到达的乘客 换乘地铁前往市区的需求 具体运营方案为↓ 1月21日至1月27日(除夕至大年初六),轨道交通1、2、3、4、5、6、7、8、11号线运营时间为6:30至23:00;轨…

    社会百科 2023年 3月 23日
  • 下午两点多是什么时辰(晚上11点到凌晨一点是什么时辰)

    首先是年周天时分秒 n?m: 年 例句:N?m 2000 2000年 gi?: 小时 例句:1 gi? (1小时)phút: 分钟 例句:2 phút (2分钟)giay: 秒 例句:30 giay (30秒钟) 例句:Tám gi? b?n m??i l?m phút b?n m??i l?m giay 8点45分45秒 ngày: 天 例句:N?m ng…

    2023年 5月 15日

联系我们

在线咨询: QQ交谈

邮件:k37759@foxmail.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信