2-微信小程序框架二

965 阅读11分钟

一、分包加载:

1、简介 某些情况下,开发者需要将小程序划分成不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载。在构建小程序分包项目时,构建会输出一个或多个功能的分包,其中每个分包小程序必定含有一个主包,所谓的主包,即放置默认启动页面/TabBar 页面,以及一些所有分包都需用到公共资源/JS 脚本,而分包则是根据开发者的配置进行划分。 在小程序启动时,默认会下载主包并启动主包内页面,如果用户需要打开分包内某个页面,客户端会把对应分包下载下来,下载完成后再进行展示。 目前小程序分包大小有以下限制: 1、整个小程序所有分包大小不超过 8M;2、单个分包/主包大小不能超过 2M。

2、分包小程序目录结构 app.js、app.json、app.wxss、packageA、packageB、pages(index、log)、utils

开发者通过在 app.json subPackages 字段声明项目分包结构: { "pages":[ "pages/index", "pages/logs" ], "subPackages": [ { "root": "packageA", "pages": [ "pages/cat", "pages/dog" ] }, { "root": "packageB", "pages": [ "pages/apple", "pages/banana" ] } ] }

3、打包原则 【1】声明 subPackages 后,将按 subPackages 配置路径进行打包,subPackages 配置路径外的目录将被打包到 app(主包)中。 【2】app(主包)也可以有自己的 pages(即最外层的 pages 字段)。 【3】subPackage 的根目录不能是另外一个 subPackage 内的子目录。 【4】首页的 TAB 页面必须在 app(主包)内。

4、引用原则 【1】packageA 无法 require packageB JS 文件,但可以 require app、自己 package 内的 JS 文件。 【2】packageA 无法 import packageB 的 template,但可以 require app、自己 package 内的 template。 【3】packageA 无法使用 packageB 的资源,但可以使用 app、自己 package 内的资源。

5、低版本兼容 由微信后台编译来处理旧版本客户端的兼容,后台会编译两份代码包,一份是分包后代码,另外一份是整包的兼容代码。 新客户端用分包,老客户端还是用的整包,完整包会把各个 subpackage 里面的路径放到 pages 中。

二、多线程:

1、简介 一些异步处理的任务,可以放置于 Worker 中运行,待运行结束后,再把结果返回到小程序主线程。Worker 运行于一个单独的全局上下文与线程中,不能直接调用主线程的方法。 Worker 与主线程之间的数据传输,双方使用 Worker.postMessage() 来发送数据,Worker.onMessage() 来接收数据,传输的数据并不是直接共享,而是被复制的。

2、使用步骤 【1】配置 Worker 信息 在 app.json 中可配置 Worker 代码放置的目录,目录下的代码将被打包成一个文件。 { "workers": "workers" }

【2】添加 Worker 代码文件 根据步骤 1 中的配置,在代码目录下新建以下两个入口文件。 app.js、app.json、project.config.json、workers(workers/request/index.js 、workers/request/utils.js、workers/response/index.js)

【3】编写 Worker 代码 在 workers/request/index.js 编写 Worker 响应代码 // 在 Worker 线程执行上下文会全局暴露一个 worker 对象,直接调用 worker.onMeesage/postMessage 即可 worker.onMessage(function (res) { console.log(res) })

【4】在主线程中初始化 Worker 在主线程的代码 app.js 中初始化 Worker var worker = wx.createWorker('workers/request/index.js') // 文件名指定 worker 的入口文件路径,绝对路径

【5】主线程向 Worker 发送消息 worker.postMessage({ msg: 'hello worker' })

三、基础库:

1、版本分布(全部、iOS版本、Android版本) 2、与客户端版本对应关系 【1】iOS客户端版本6.7.0==基础库版本2.2.2 【2】Android客户端版本6.6.7==基础库版本2.2.2

四、兼容:

1、介绍 小程序的功能不断的增加,但是旧版本的微信客户端并不支持新功能,所以在使用这些新能力的时候需要做兼容。

2、兼容方式(版本比较) 微信客户端和小程序基础库的版本号风格为 Major.Minor.Patch(主版本号.次版本号.修订号)。 开发者可以根据版本号去做兼容

3、兼容方式(接口) 对于新增的 API,可以用以下代码来判断是否支持用户的手机。 if (wx.openBluetoothAdapter) { wx.openBluetoothAdapter() } else { // 如果希望用户在最新版本的客户端上体验您的小程序,可以这样子提示 wx.showModal({ title: '提示', content: '当前微信版本过低,无法使用该功能,请升级到最新微信版本后重试。' }) }

4、兼容方式(参数) 对于 API 的参数或者返回值有新增的参数,可以判断用以下代码判断。 wx.showModal({ success: function(res) { if (wx.canIUse('showModal.cancel')) { console.log(res.cancel) } } })

5、兼容方式(组件) 对于组件,新增的组件或属性在旧版本上不会被处理,不过也不会报错。如果特殊场景需要对旧版本做一些降级处理。 Page({ data: { canIUse: wx.canIUse('cover-view') } })

五、运行机制:

1、介绍 小程序启动会有两种情况,一种是「冷启动」,一种是「热启动」。 假如用户已经打开过某小程序,然后在一定时间内再次打开该小程序,此时无需重新启动,只需将后台态的小程序切换到前台,这个过程就是热启动; 冷启动指的是用户首次打开或小程序被微信主动销毁后再次打开的情况,此时小程序需要重新加载启动。

2、更新机制 小程序冷启动时如果发现有新版本,将会异步下载新版本的代码包,并同时用客户端本地的包进行启动,即新版本的小程序需要等下一次冷启动才会应用上。 如果需要马上应用最新版本,可以使用 wx.getUpdateManager API 进行处理。

3、运行机制 【1】小程序没有重启的概念 【2】当小程序进入后台,客户端会维持一段时间的运行状态,超过一定时间后(目前是5分钟)会被微信主动销毁 【3】当短时间内(5s)连续收到两次以上收到系统内存告警,会进行小程序的销毁

4、再次打开逻辑 用户打开小程序的预期有以下两类场景: 【1】打开首页: 场景值有 1001, 1019, 1022, 1023, 1038, 1056 【2】 打开小程序指定的某个页面: 场景值为除 A 以外的其他

六、性能:

1、目前微信提供了两种性能分析工具,和几个性能优化上的建议,开发者可以参考使用。

2、分析工具 【1】性能 Trace 工具 提供了 Trace 导出工具,开发者可以在开发者工具 Trace Panel 中使用该功能。

【2】使用方法 《1》PC 上需要先安装 adb 工具,可以参考一些主流教程进行安装,Mac 上可使用 brew 直接安装。 《2》确定 adb 工具已成功安装后,在开发者工具上打开 Trace Panel,将 Android 手机通过 USB 连接上 PC,点击「Choose Devices」,此时手机上可能弹出连接授权框,请点击「允许」。 《3》选择设备后,在手机上打开你需要调试的开发版小程序,通过右上角菜单,打开性能监控面板,重启小程序。 《4》重启后,在小程序上进行操作,完成操作后,通过右上角菜单,导出 Trace 数据。 《5》此时开发者工具 Trace Panel 上会自动拉取 Trace 文件,选择你要分析的 Trace 文件即可。

【3】性能面板 提供了性能面板让开发者了解小程序的性能。开发者可以在开发版小程序下打开性能面板,打开方法:进入开发版小程序,进入右上角更多按钮,点击「显示性能窗口」。

【4】性能面板指标说明 CPU、内存、启动耗时、下载耗时、页面切换耗时、帧率/FPS、首次渲染耗时、再次渲染耗时、数据缓存

3、优化建议 【1】setData setData 是小程序开发中使用最频繁的接口,也是最容易引发性能问题的接口。

【2】工作原理 小程序的视图层目前使用 WebView 作为渲染载体,而逻辑层是由独立的 JavascriptCore 作为运行环境。在架构上,WebView 和 JavascriptCore 都是独立的模块,并不具备数据直接共享的通道。当前,视图层和逻辑层的数据传输,实际上通过两边提供的 evaluateJavascript 所实现。即用户传输的数据,需要将其转换为字符串形式传递,同时把转换后的数据内容拼接成一份 JS 脚本,再通过执行 JS 脚本的形式传递到两边独立环境。

【3】常见的 setData 操作错误 《1》频繁的去setData 《2》每次 setData 都传递大量新数据 《3》后台态页面进行 setData

【4】图片资源 目前图片资源的主要性能问题在于大图片和长列表图片上,这两种情况都有可能导致 iOS 客户端内存占用上升,从而触发系统回收小程序页面。

【5】图片对内存的影响 在 iOS 上,小程序的页面是由多个 WKWebView 组成的,在系统内存紧张时,会回收掉一部分 WKWebView。从过去我们分析的案例来看,大图片和长列表图片的使用会引起wkwebview的回收。

【6】图片对页面切换的影响 除了内存问题外,大图片也会造成页面切换的卡顿。我们分析过的案例中,有一部分小程序会在页面中引用大图片,在页面后退切换中会出现掉帧卡顿的情况。建议开发者尽量减少使用大图片资源。

【7】代码包大小的优化 开发者在实现业务逻辑同时也有必要尽量减少代码包的大小,因为代码包大小直接影响到下载速度,从而影响用户的首次打开体验。除了代码自身的重构优化外,还可以从这两方面着手优化代码大小: 《1》控制代码包内图片资源 小程序代码包经过编译后,会放在微信的 CDN 上供用户下载,CDN 开启了 GZIP 压缩,所以用户下载的是压缩后的 GZIP 包,其大小比代码包原体积会更小。GZIP 对基于文本资源的压缩效果最好,在压缩较大文件时往往可高达 70%-80% 的压缩率。 《2》及时清理没有使用到的代码和资源 在日常开发的时候,我们可能引入了一些新的库文件,而过了一段时间后,由于各种原因又不再使用这个库了,我们常常会只是去掉了代码里的引用,而忘记删掉这类库文件了。

七、文件系统:

1、简介 文件系统是小程序提供的一套以小程序和用户维度隔离的存储以及一套相应的管理接口。通过 wx.getFileSystemManager() 可以获取到全局唯一的文件系统管理器,所有文件系统的管理操作通过 FileSystemManager 来调用。 var fs = wx.getFileSystemManager()

2、代码包文件(代码包文件指的是在项目目录中添加的文件) 【1】访问代码包文件 代码包文件的访问方式是从项目根目录开始写文件路径,不支持相对路径的写法。 【2】修改代码包文件 代码包内的文件无法在运行后动态修改或删除,修改代码包文件需要重新发布版本。

3、本地文件(通过调用接口本地产生,或通过网络下载下来,存储到本地的文件) 【1】本地临时文件 临时产生,随时会被回收的文件。不限制存储大小。 【2】本地缓存文件 小程序通过接口把本地临时文件缓存后产生的文件,不能自定义目录和文件名。除非用户主动删除小程序,否则不会被删除。跟本地用户文件共计最多可存储 50MB 文件。 【3】本地用户文件 小程序通过接口把本地临时文件缓存后产生的文件,允许自定义目录和文件名。除非用户主动删除小程序,否则不会被删除。跟本地用户文件共计最多可存储 50MB 文件。

4、读写权限 【1】代码包文件:可读,不可写 【2】本地临时文件:可读,不可写 【3】本地缓存文件:可读,不可写 【3】本地用户文件:可读,可写