小程序入门概览

一、appID/OpenID/UnionID的区别

openID：每个用户针对每个公众号或小程序等应用会产生一个安全的OpenID。

UnionID：同一个用户在不同的应用（小程序、公众号），unionid是相同的。

unionid 是用户的身份证，不同应用间识别用户的唯一性只可以用unionid。

openid 也可以用来标记用户身份，但是仅限于在同一个应用中

appid：微信应用的身份证（小程序、公众号等的ID）

二、授权登录流程

1.通过 wx.getSetting() 判断用户是否授权；

2.通过 wx.login() 获取临时登录凭证code，向后端获取session/token、openid、unionId，存入Storage

3.页面给定一个<button>，设置open-type="getUserInfo";

4.点击button，通过wx.getUserInfo()获取加密签名信息（signature、encryptedData、iv、rawData）；

5.通过签名，向后端获取用户数据

三、分包

• 底部栏对应的页面为主包；需要点点进入的页面作为子包
• 子包可以访问主包的内容；主包不能访问子包的内容，子包间也不能访问；

分包加载

每个使用分包小程序==必定含有一个主包==。

所谓的==主包==，即放置==默认启动页面/TabBar== 页面，以及一些==所有分包都需用到公共资源/JS 脚本==；而分包则是根据开发者的配置进行划分。

在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示。

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

• 整个小程序所有分包大小不超过 20M
• 单个分包/主包大小不能超过 2M

对小程序进行分包，可以优化小程序首次启动的下载时间，以及在多团队共同开发时可以更好的解耦协作。

配置方法

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

├── 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 后，将按 subpackages 配置路径进行打包，subpackages 配置路径外的目录将被打包到主包中
• 主包也可以有自己的 pages，即最外层的 pages 字段。
• subpackage 的根目录不能是另外一个 subpackage 内的子目录
• tabBar 页面必须在主包内

独立分包

独立于主包和其他分包运行。从==独立分包中页面进入小程序时==，==不需要下载主包==。当用户进入普通分包或主包内页面时，主包才会被下载。

• 独立分包中不能依赖主包和其他分包中的内容，包括 js 文件、template、wxss、自定义组件、插件等（使用 分包异步化 时 js 文件、自定义组件、插件不受此条限制）
• 主包中的 app.wxss 对独立分包无效，应避免在独立分包页面中使用 app.wxss 中的样式；
• App 只能在主包内定义，独立分包中不能定义 App，会造成无法预期的行为；
• 独立分包中暂时不支持使用插件

四、生命周期

应用的生命周期：

• onLaunch：首次打开小程序（全局只触发一次）
• onShow：初始化后或从后台切回前台
• onHide：切到后台
• onError：出现错误

页面的生命周期：

• onLoad：页面加载时执行，只执行一次
• onShow：页面展示时执行，执行多次；
• onReady：页面初次渲染时执行，只执行一次；
• onHide：页面从前台进入后台时执行；
• onUnload：页面卸载时执行；

执行顺序：

onLoad –> onShow –> onReady –> onHide

从A页面切换到B页面，再从B页面返回到A页面时，只触发onShow

组件的生命周期：

created（重要）：组件实例刚刚被创建好时触发。此时还不能调用 setData

attached（重要）：在组件完全初始化完毕、进入页面节点树后被触发。this.data 已被初始化为组件的当前值

ready：在组件在视图层布局完成后执行

detached（重要）：在组件离开页面节点树后被触发