web前端开发 | 对小程序的理解及分包

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

一、什么是微信小程序

微信小程序，是小程序的一种，英文名Wechat Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。

小程序和普通网页开发的区别

网页开发者需要面对的环境是各式各样的浏览器，PC 端需要面对 IE、Chrome、QQ浏览器等，在移动端需要面对Safari、Chrome以及 iOS、Android 系统中的各式 WebView 。

而小程序开发过程中需要面对的是两大操作系统 iOS 和 Android 的微信客户端，以及用于辅助开发的小程序开发者工具，小程序中三大运行环境也是有所区别的，如表所示。

运行环境	逻辑层	渲染层
iOS	JavaScriptCore	WKWebView
安卓	V8	chromium定制内核
小程序开发者工具	NWJS	Chrome WebView

二、使用步骤

1. 进入 https://mp.weixin.qq.com/cgi-bin/registermidpage?action=index&lang=zh_CN。

2. 注册账号，任何邮箱即可。

3. 去邮箱确认即可。

4. 下载安装微信开发者工具

根据自己系统选择合适的版本。

5. 双击进入微信开发者工具，点击新建。

6. 项目配置

AppID建议用自己的，在微信公众号平台开发->开发管理->开发设置->开发者ID。

三、代码结构

小程序创建完毕，代码结构如下：

1. pages：包含小程序页面。

每个页面都有一个独立的文件夹。

每个页面包含4个文件：js页面逻辑，json页面配置，wxss页面样式，wxml页面结构。

2. app.js:全局入口文件。

3. app.json:全局配置文件。

4.app.wxss:全局样式文件。

5.project.config.json：整个项目的配置文件。

6.sitemap.json:配置小程序及其页面是否允许被微信索引。

接下来大家就可以根据自己的项目需求进行开发，一些常用的配置属性可以借鉴官方文档。我们也给大家介绍几个有代表性的功能

四、小程序运行机制

1. 小程序的生命周期。

小程序从启动到最终被销毁，会经历很多不同的状态，小程序在不同状态下会有不同的表现。

2. 小程序冷启动

冷启动：如果用户首次打开，或小程序销毁后被用户再次打开，此时小程序需要重新加载启动，即冷启动。

小程序冷启动时，如果启动时不带 path（A 类场景），默认情况下将会进入小程序的首页。在页面对应的 json 文件中（也可以全局配置在 app.json 的 window 段中），指定 restartStrategy 配置项可以改变这个默认的行为，使得从某个页面退出后，下次 A 类场景的冷启动可以回到这个页面。

代码示例：

{  "restartStrategy": "homePage"}

3. 小程序热启动

热启动：如果用户已经打开过某小程序，然后在一定时间内再次打开该小程序，此时小程序并未被销毁，只是从后台状态进入前台状态，这个过程就是热启动。

小程序热启动时，打开的页面有以下情况：

（A 类场景）若启动的场景中不带 path，则保留上次的浏览的状态。

（B 类场景）若启动的场景中带有 path，则 reLaunch 到对应 path 的页面。

4.退出状态

每当小程序可能被销毁之前，页面回调函数 onSaveExitState 会被调用。如果想保留页面中的状态，可以在这个回调函数中“保存”一些数据，下次启动时可以通过 exitState 获得这些已保存数据。

代码示例：​​​​​​​

{"restartStrategy": "homePageAndLatestPage"}​​​​​​

Page({onLoad: function() {var prevExitState = this.exitState // 尝试获得上一次退出前 onSaveExitState 保存的数据if (prevExitState !== undefined) { // 如果是根据 restartStrategy 配置进行的冷启动，就可以获取到      prevExitState.myDataField === 'myData'     }  },onSaveExitState: function() {var exitState = { myDataField: 'myData' } // 需要保存的数据return {data: exitState,expireTimeStamp: Date.now() + 24 * 60 * 60 * 1000 // 超时时刻    }  }})

注意事项：

如果超过 expireTimeStamp ，保存的数据将被丢弃，且冷启动时不遵循 restartStrategy 的配置，而是直接从首页冷启动。

expireTimeStamp 有可能被自动提前，如微信客户端需要清理数据的时候。

在小程序存活期间， onSaveExitState 可能会被多次调用，此时以最后一次的调用结果作为最终结果。

在某些特殊情况下（如微信客户端直接被系统杀死），这个方法将不会被调用，下次冷启动也不遵循 restartStrategy 的配置，而是直接从首页冷启动。

五、自定义tabBar

自定义 tabBar 可以让开发者更加灵活地设置 tabBar 样式，以满足更多个性化的场景。

使用流程：

1. 配置信息。

在 app.json 中的 tabBar 项指定 custom 字段，同时其余 tabBar 相关配置也补充完整。

所有 tab 页的 json 里需声明 usingComponents 项，也可以在 app.json 全局开启。​​​​​​​

{  "tabBar": {    "custom": true,    "color": "#000000",    "selectedColor": "#000000",    "backgroundColor": "#000000",    "list": [{      "pagePath": "page/component/index",      "text": "组件"    }, {      "pagePath": "page/API/index",      "text": "接口"    }]  },  "usingComponents": {}}

2. 添加tabBar代码文件

在代码根目录下添加入口文件:​​​​​​​

custom-tab-bar/index.jscustom-tab-bar/index.jsoncustom-tab-bar/index.wxmlcustom-tab-bar/index.wxss

3. 编写tabBar代码

用自定义组件的方式编写即可，该自定义组件完全接管 tabBar 的渲染。另外，自定义组件新增 getTabBar 接口，可获取当前页面下的自定义 tabBar 组件实例。

六、微信小程序分包

微信小程序限制了代码包不能超过 2MB，限制大小是对小程序启动速度的考虑，但是2MB 大小严重限制了小程序功能的扩展，业务需求可能需要更大的体积，综合考虑微信推出了“分包加载方案”。

目前小程序分包大小有以下限制：

整个小程序所有分包大小不超过20M。

单个分包/主包大小不能超过2M。

具体方法包含：

使用分包、独立分包、分包预下载、分包异步化

我们主要介绍一下使用分包，其他方式可以参考微信官方文档。

五、使用分包

1. 配置方法

假设支持分包的小程序目录结构如下：​​​​​​​

├── app.js├── app.json├── app.wxss├── packageA│   └── pages│       ├── cat│       └── dog├── packageB│   └── pages│       ├── apple│       └── banana├── pages│   ├── index│   └── logs└── utils

开发者通过在 app.json subpackages 字段声明项目分包结构：​​​​​​​

{  "pages":[    "pages/index",    "pages/logs"  ],  "subpackages": [    {      "root": "packageA",      "pages": [        "pages/cat",        "pages/dog"      ]    }, {      "root": "packageB",      "name": "pack2",      "pages": [        "pages/apple",        "pages/banana"      ]    }  ]}

subpackages 中，每个分包的配置有以下几项：

字段	类型	说明
root	String	分包根目录
name	String	分包别名，分包预下载时可以使用
pages	stringArray	分包页面路径，相对于分包根目录
independent	Boolean	分包是否是独立分包

2. 打包原则

• 声明 subpackages 后，将按 subpackages 配置路径进行打包，subpackages 配置路径外的目录将被打包到主包中。

• 主包也可以有自己的 pages，即最外层的 pages 字段。

• subpackage 的根目录不能是另外一个 subpackage 内的子目录。

• subpackage 的根目录不能是另外一个 subpackage 内的子目录。

3. 引用原则

• packageA 无法 require packageB JS 文件，但可以 require 主包、packageA 内的 JS 文件；使用 分包异步化 时不受此条限制

• packageA 无法 import packageB 的 template，但可以 require 主包、packageA 内的 template

• packageA 无法使用 packageB 的资源，但可以使用主包、packageA 内的资源

4. 低版本兼容

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

总结

小程序有如下特点：

1.无需安装随时可用。

2.触手可及。

3.用完即走，无需卸载。