美文网首页
微信小程序可借鉴的点

微信小程序可借鉴的点

作者: senpaiLi | 来源:发表于2020-11-15 23:26 被阅读0次
    一、微信小程序介绍

    小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验。

    • 快速的加载
    • 更强大的能力
    • 原生的体验
    • 易用且安全的微信数据开放
    • 高效和简单的开发
    二、体验优化

    1、webview预加载
    微信会在小程序加载前,先初始化一个全局webview,减少启动浏览器内核的时间



    由webview加载流程可以看出,App中打开WebView的第一步并不是建立连接,而是启动浏览器内核

    优化前后对比:


    2、Page Frame
    在加载小程序时,会先初始化一个page_frame.html 内容模板

    • 首页启动时,即第一次通过pageframe.html生成内容后,后台服务会缓存pageframe.html模板首次生成的html内容。
    • 非首次新打开页面时,页面请求的pageframe.html内容直接走后台缓存
    • 非首次新打开页面时,pageframe.html页面引入的外链js资源走本地缓存

    官网说明:

    wx.navigateTo会创建一个新的页面层级,对于每一个新的页面层级,视图层都需要进行一些额外的准备工作。在小程序启动前,微信会提前准备好一个页面层级用于展示小程序的首页。除此以外,每当一个页面层级被用于渲染页面,微信都会提前开始准备一个新的页面层级,使得每次调用wx.navigateTo都能够尽快展示一个新的页面。

    3、小程序缓存
    项目内已实现

    4、双线程

    微信小程序抽离了视图层View 和逻辑层 App Service


    保证了即使逻辑层在做复杂的计算,也不会影响到界面的流畅性。

    渲染层和逻辑层之间通信,是通过 Native的WeixinJSBridge 转发实现的。
    逻辑层通过 Page 实例的setData方法传递数据到渲染层。由于需要两个线程的一些通信消耗,为了提高性能,每次只设置需要改变的最小单位数据。

    但是如果所有的逻辑都依赖跨线程通信,也会带来不必要的开销。wxs

    5、原生组件
    某些复杂的控件使用原生组件实现:
    视频、相机、地图等
    https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html

    6、其他层面的优化
    使用Virtual DOM,进行局部更新

    三、小程序支持

    1、开发工具(IDE、自动化工具)
    2、多端统一开发工具——kbone
    3、

    其他可借鉴的点:

    微信小程序:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#entryPagePath

    示例:


    目前项目中可以配置的参数:
    iPadFullScreen、forbid_cache、titleStyle、btnStyle

    处理方式:
    匹配APPID、小程序入口URL

    PWA 渐进式应用

    引用:
    https://tech.meituan.com/2017/06/09/webviewperf.html
    https://mp.weixin.qq.com/s/3QE3g0NmaBAi91lbrihhVw
    https://developers.weixin.qq.com/ebook?action=get_post_info&docid=000a64a29c48b0eb0086f161b5940a&highline=%E8%99%9A%E6%8B%9Fdom
    https://tech.youzan.com/weapp-booting/

    相关文章

      网友评论

          本文标题:微信小程序可借鉴的点

          本文链接:https://www.haomeiwen.com/subject/xykubktx.html