使用npm包

小程序对npm包的支持与限制

目前，小程序中已经支持使用 npm 安装第三方包，从而来提高小程序的开发效率。但是，在小程序中使用 npm 包有如下 3 个限制： ① 不支持依赖于 Node.js 内置库 的包 ② 不支持依赖于 浏览器内置对象 的包 ③ 不支持依赖于 C++ 插件 的包 总结：虽然 npm 上的包有千千万，但是能供小程序使用的包却“为数不多”。

vant Weapp

Vant Weapp 是有赞前端团队开源的一套 小程序 UI 组件库 ，助力开发者快速搭建小程序应用。它所使用的是 MIT 开源许可协议 ，对商业使用比较友好。 官方文档地址 https://youzan.github.io/vant-weapp

安装 Vant组件 

在小程序项目中，安装 Vant 组件库主要分为如下 3 步： ① 通过 npm 安装 ② 构建 npm 包 ③ 修改 app.json 详细的操作步骤，大家可以参考 Vant 官方提供的快速上手教程： https://youzan.github.io/vant-weapp/#/quickstart#an-zhuang

使用Vant组件库 

安装完 Vant 组件库之后，可以在 app.json 的 usingComponents 节点中引入需要的组件，即可在 wxml 中 直接使用组件。示例代码如下：

// app.json
"usingComponents" : {
    "van-button" : "@vant/weapp/button/index"
}

// 页面的.wxml结构

<van-button type="primary">按钮</van-button>

定制全局主题样式

Vant Weapp 使用 CSS 变量 来实现定制主题。 关于 CSS 变量的基本用法，请参考 MDN 文档： https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties

在app.wxss中，写入css变量，即可对全局生效

// app.wxss

page {
    --button-danger-background-color: #C000000;
    --button-danger-border-color: #D60000;
}

所有可用的 颜色变量 ，请参考 Vant 官方提供的配置文件： https://github.com/youzan/vant-weapp/blob/dev/packages/common/style/var.less

API Promise化

基于回调函数的异步API的缺点

默认情况下，小程序官方提供的 异步 API 都是 基于回调函数 实现的，例如，网络请求的 API 需要按照如下的方 式调用：

wx.request({
    method: '',
    url: '',
    data: {},
    success: () => {}, // 请求成功的回调函数
    fail: () => {},    // 请求失败的回调函数
    complete: () => {} // 请求完成的回调函数
})

缺点：容易造成 回调地狱 的问题，代码的 可读性 、 维护性 差！

实现API Promise化

在小程序中，实现 API Promise 化主要依赖于 miniprogram-api-promise 这个第三方的 npm 包。它的安装 和使用步骤如下：

// 安装插件
npm install --save miniprogram-api-promise@1.0.4


// 在小程序入口文件中（app.js），只需要调用一次promisifyAll() 方法，即可实现异步API 的Promise化

import { promisifyAll } from 'miniprogram-api-promise'

const wxp = wx.p = {}

// promisify all wx's api

promisifyAll(wx,wxp)

调用 Promise化之后的异步API

// 页面的.wxml 结构
<van-button type="danger" bindtap="getInfo">vant按钮</van-button>

// 页面的.js文件
async getInfo(){
    const { data: res } = await wx.p.request({
        method: 'GET',
        url: 'https:// xxx',
        data: {}
    })
    console.log(res)
}

全局数据共享

全局数据共享 （又叫做：状态管理）是为了解决 组件之间数据共享 的问题。 开发中常用的全局数据共享方案有：Vuex、Redux、MobX 等。

小程序中的全局数据共享方案 MobX

在小程序中，可使用 mobx-miniprogram 配合 mobx-miniprogram-bindings 实现全局数据共享。其中： ⚫ mobx-miniprogram 用来 创建 Store 实例对象 ⚫ mobx-miniprogram-bindings 用来 把 Store 中的共享数据或方法 ， 绑定到组件或页面中使用

// 安装MobX相关的包
npm install --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1

注意：MobX 相关的包安装完毕之后，记得删除 miniprogram_npm 目录后，重新构建 npm。 

创建 MobX的Store实例

import { observable, action } from 'mobx-miniprogram'

export const store = observable({
    // 数据字段
    numA: 1,
    numB: 2,
    // 计算属性
    get sum() {
    return this.numA + this.numB
    },
    // actions 方法，用来修改 store 中的数据
    updateNum1: action(function (step) {
        this.numA += step
    }),
    updateNum2: action(function (step) {
        this.numB += step;
    })
})

将 Store 中的成员绑定到页面中

// 页面的.js文件
import { createStoreBindings } from 'mobx-miniprogram-bindings'

import { store } from '../../store/store'

Page({
    onl oad: function () {
        this.storeBindings = createStroeBindings(this,{
            store,
            fields: ['numA','numB','sum'],
            actions: ['updateNum1']
    })
    },
    onUnload: function(){
        this.storeBindings.destroyStoreBindings()
    }
})

在页面上使用Store中的成员

// 页面的.wxml结构
<view>{{numA}} + {{numB}} = {{sum}}</view>
<van-button type="primary" bindtap="btnHandler1" data-step="{{1}}">numA + 1 </van-button>
<van-button type="primary" bindtap="btnHandler1" data-step="{{-1}}">numA - 1 </van-button>

// 按钮tap事件的处理函数
btnHandler1(e) {
    this.updateNum1(e.target.dataset.step)
}

将 Store中的成员绑定到组件

import { storeBindingsBehavior } from 'mobx-miniprogram-bindings'
import { store } from '../../store/store'

Component({
    behaviors: [ storeBindingsBehavior ],
    storeBindings: {
        store,
        fields: {
            numA: () => store.numA,
            numB: (store) => store.numB,
            sum: 'sum'
        },
        actions: {
            updateNum2: 'updateNum2'
        }
    }
})

在组件中使用store中的成员

// 页面的.wxml结构
<view>{{numA}} + {{numB}} = {{sum}}</view>
<van-button type="primary" bindtap="btnHandler2" data-step="{{1}}">numB + 1 </van-button>
<van-button type="primary" bindtap="btnHandler2" data-step="{{-1}}">numB - 1 </van-button>

// 按钮tap事件的处理函数
btnHandler2(e) {
    this.updateNum2(e.target.dataset.step)
}

小程序分包

什么是分包

分包指的是把一个 完整的小程序项目 ，按照需求 划分为不同的子包 ，在构建时打包成不同的分包，用户在使用 时 按需进行加载 。

分包的好处

对小程序进行分包的好处主要有以下两点： ⚫ 可以 优化小程序首次启动的下载时间 ⚫ 在 多团队共同开发 时可以更好的 解耦协作

分包前项目的构成

分包前，小程序项目中 所有的页面 和 资源 都被打包到了一起，导致整个 项目体积过大， 影响小程序 首次启动的 下载时间 。

分包后项目的构成

分包后，小程序项目由 1 个主包 + 多个分包 组成： ⚫ 主包：一般只包含项目的 启动页面 或 TabBar 页面 、以及所有分包都需要用到的一些 公共资源 ⚫ 分包：只包含和当前分包有关的页面和私有资源

分包的加载规则

① 在小程序启动时，默认会 下载主包 并 启动主包内页面 ⚫ tabBar 页面需要放到主包中 ② 当用户进入分包内某个页面时， 客户端会把对应分包下载下来 ，下载完成后再进行展示 ⚫ 非 tabBar 页面可以按照功能的不同，划分为不同的分包之后，进行按需下载

分包的体积限制

目前，小程序分包的大小有以下两个限制： ⚫ 整个小程序所有分包大小不超过 16M （主包 + 所有分包） ⚫ 单个分包/主包大小不能超过 2M

分包的配置方法 

{
    "pages": [
        "pages/index",
        "pages/logs"
    ],
    "subpackages": [ // 通过subpackages节点，声明分包的结构
        {
            "root": 'moduleA',// 第一个分包的根目录
            "pages": [ // 当前分包下，所有页面的相对存放路径
                "pages/rabbit",
                "pages/squirrel"
            ]
        },{
            "root": "moduleB", // 第二个分包的根目录,
            "name"："pack2", // 分包的别名
            "pages": [ // 当前分包下，所有页面的相对存放路径
                    "pages/pear",
                    "pages/pineapple"
                ],
                "independent": true // 通过此节点，声明当前 moduleB 分包为“独立分包”
           }
    ]
}

打包原则

① 小程序会按 subpackages 的配置进行分包，subpackages 之外的目录将被打包到主包中 ② 主包也可以有自己的 pages（即最外层的 pages 字段） ③ tabBar 页面必须在主包内 ④ 分包之间不能互相嵌套

引用原则

① 主包 无法引用 分包内的私有资源 ② 分包之间 不能相互引用 私有资源 ③ 分包 可以引用 主包内的公共资源

独立分包

什么是独立分包

独立分包 本质上也是分包 ，只不过它比较特殊， 可以独立于主包和其他分包而单独运行 。

独立分包和普通分包的区别

最主要的区别： 是否依赖于主包才能运行 ⚫ 普通分包必须依赖于主包才能运行 ⚫ 独立分包可以在不下载主包的情况下，独立运行

独立分包的应用场景

开发者可以按需，将某些 具有一定功能独立性的页面 配置到 独立分包 中。原因如下： ⚫ 当小程序从普通的分包页面启动时，需要首先下载主包 ⚫ 而独立分包 不依赖主包 即可运行， 可以很大程度上提升分包页面的启动速度 注意：一个小程序中可以有多个独立分包。

独立分包的配置方法

{
    "pages": [
        "pages/index",
        "pages/logs"
    ],
    "subpackages": [
        {
            "root": 'moduleA',
            "pages": [
                "pages/rabbit",
                "pages/squirrel"
            ]
        },{
            "root": "moduleB",
            "pages": [
                    "pages/pear",
                    "pages/pineapple"
                ],
                "independent": true // 通过此节点，声明当前 moduleB 分包为“独立分包”
           }
    ]
}

独立分包引用原则

独立分包和普通分包以及主包之间，是 相互隔绝 的， 不能相互引用彼此的资源 ！例如： ① 主包 无法引用 独立分包内的私有资源 ② 独立分包之间， 不能相互引用 私有资源 ③ 独立分包和普通分包之间， 不能相互引用 私有资源 ④ 特别注意： 独立分包中不能引用主包内的公共资源

分包预下载

什么是分包预下载

分包预下载指的是：在进入小程序的某个页面时， 由框架自动预下载可能需要的分包 ，从而提升进入后续分包 页面时的启动速度。

配置分包的预下载

预下载分包的行为，会在进入指定的页面时触发 。在 app.json 中，使用 preloadRule 节点定义分包的预下载 规则，示例代码如下：

// app.json

{
    "preloadRule": {
        "pages/contact/contact": {
            // network 表示在指定的网络模式下进行预下载
            // 可选择值 all(不限网络)和 wifi（仅 wifi模式下进行预下载）
            // 默认值 wifi
            "network": 'all',
            // packages 表示进入页面后，预下载那些分包
            // 可用通过 root 或 name 指定预下载哪些分包
            "packages": ["pkgA"]
        }
    }
}

同一个分包中的页面享有共同的预下载大小限额 2M。