一、小程序对npm 的限制

在小程序中使用npm包有3个限制：① 不支持依赖于Node.js内置库的包 ② 不支持依赖于浏览器内置对象的包 ③ 不支持依赖于C++插件的包

二、使用Vant Weapp组件库

Vant Weapp 是有赞前端团队开源的一套小程序 UI 组件库，使用的是MIT 开源许可协议

1、安装组件

① 通过npm安装
② 构建npm包
③ 修改app.json
详细步骤：安装Vant组件库

2、使用组件

在app.json 的usingComponents节点中引入需要的组件，即可在wxml 中直接使用组件

// 通过 npm 安装
// app.json
"usingComponents": {
  "van-button": "@vant/weapp/button/index"
}

3、定制全局样式

Vant Weapp 使用 CSS 变量来实现定制主题。在app.wxss中写入全局css变量

Page{
	--button-danger-background-color:#efefef;
}

css变量的基本使用可以参考MDN文档：css自定义属性
所有可用的颜色变量可参考 Vant 官方文件：Vant官方提供的配置文件

三、API Promise化

小程序提供的异步API是基于回调函数实现的，容易造成回调地狱问题，并且代码可读性和维护性较差。
API Promise化，指的是通过额外的配置，将官方提供的、基于回调函数的异步 API，升级改造为基于Promise 的异步 API。

1、下载miniprogram-api-promise

在小程序中，实现 API Promise 化主要依赖于 miniprogram-api-promise 这个第三方的 npm 包。

npm i --save miniprogram-api-promise@1.0.4

2、引入

在小程序的入口文件app.js中，调用一次proimisifyAll()方法，即可实现异步API的Promise化

import { promisifyAll } from "miniprogram-api-promise";

const wxp = wx.p = {};
// promisify all wx's appi
promisifyAll(wx,wxp)

3、使用

使用wx.p.request()方法

asyn addbtn() {
	await wx.p.request({
		method:'GET',
		url:"https://www.abc.com",
		data:{name:'憨瓜'}
	})
}

四、全局数据共享

开发中常用的全局数据共享方案有：Vuex、Redux、MobX 等。
在小程序中，可以使用mobx-miniprogram和mobx-miniprogram-bindings实现全局数据共享
mobx-miniprogram是用来创建Store实例对象
mobx-miniprogram-bindings是用来把Store中的共享数据或方法，绑定到组件或页面中使用

《1》安装Mobx

npm i mobx-miniprogram  mobx-miniprogram-bindings --save

注意：Mobx相关的包安装完毕之后，必须删除miniprogram_npm目录后，重新构建npm

《2》创建Mobx的Store实例

// 引入
import { observable, action } from "mobx-miniprogram";

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

《3》将Store中的成员绑定到页面中

// 页面.js文件
import { creatStoreBindings } from "mobx-miniprogram-bindings";
import {store} from "../../store/store";
Page({
    // 监听页面加载
    omLoad:function(){
        this.storeBindings = creatStoreBindings(this.{
            store,
            fields:["numA","numB","sum"],
            actions:["updateNum"]
        })
    },
    // 监听页面卸载
    onUnLoad:function(){
        this.storeBindings.destroyStoreBindings()
    }
})

《4》在页面中使用Store中的成员

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

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

《5》 将 Store 中的成员绑定到组件中

import { storeBindingBehavior } from "mobx-miniprogram-bindings";
import {store} from "../../store/store";
Component({
    // 通过 storeBindingBehavior 来实现自动绑定
    behaviors:[storeBindingBehavior],
    storeBindings:{
        store,
        fields:{
            numA:()=>store.numA, // 绑定字段的方法一
            numB:(store)=>store.numB, // 绑定字段的方法二
            sum:"sum" // 绑定字段的方法三
        } 
    },
  // 指定要绑定的方法
   actions:{
    updatedNum:'updateNum'
   }
})

《6》在组件中使用Store中的成员

// 组件的.wxml结构
<view>{{numA}} + {{numB}} = {{sum}}</view>
<button bindtap="btnHandle" data-step="{{1}}">numA + 1</button>

// 按钮tap 事件的处理函数
methods:{
	btnHandle(e) {
    	this.updatedNum(e.target.dataset.step),
	}
}

五、分包

1、分包概念

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

分包前，整个项目体积过大，影响首次启动的下载时间
分包后，项目由1个主包+多个分包组成
主包：包含项目的启动页或TabBar页面、以及所有分包都需要用到的一些公共资源
分包：只包含当前分包有关的页面和私有资源

《1》分包加载机制
小程序启动时，默认会下载主包并启动主包内页面，tabBar页面需要放到主包内
当用户进入分包内某个页面时，客户端会吧对应的分包下载下来，非tabBar页面可以按照功能的不同，划分为不同的分包之后，进行按需下载

《2》分包的体积限制
整个小程序所有分包大小不超过 16M（主包 + 所有分包）
单个分包/主包大小不能超过 2M

2、使用分包

《1》配置方法
在app.json 的 subpackages 节点中声明分包的结构

{
    "pages": [
        "pages/index/index"
    ],
    "subpackages": [ // 通过 subpackages 节点，声明分包的结构
    	{ 
	        "root": "/package1",  // 分包的根路径
	        "pages": ["pages/cat/cat","pages/dog/dog"],// 当前分包下所有的页面相对存放路径
	        "name": "pg1" // 分包的别名  
	   	 },{
	        "root": "/package2",
	        "pages": ["pages/man/man","pages/woman/woman"]
	    }
	 ]
}

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

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

3、独立分包

独立分包可以独立于主包和其他分包而单独运行。
优点：不依赖于主包运行，可以提升分包页面的启动速度，一个小程序可以有多个独立分包
《1》配置方法
通过 independent 节点 声明独立分包

"subpackages": [{
    "root": "/package1",
    "pages": ["pages/cat/cat","pages/dog/dog"],
    "independent": true  // 通过independent节点声明当前 package1分包为独立分包
},

《2》引用原则
独立分包和普通分包以及主包之间，是相互隔绝的，不能相互引用彼此的资源（独立分包不能引用主包的公共资源）

4、分包预下载

在进入小程序的某个页面时，由框架自动预下载可能需要的分包，从而提升进入后续分包页面时的启动速度。
《1》定义预下载规则
在app.json中通过 preloadRule 节点定义分包的预下载规则，预下载分包的行为，会在进入指定的页面时触发

"preloadRule": { // 分包预下载规则
    "pages/home/home":{ // 触发分包预下载规则的页面路径
        "network": "all", // 在指定的网络模式下进行预下载，默认值为wifi，可选值all/wifi
        "packages": ["package1"] // 进入页面后，预下载哪些分包，可以通过root/name指定预下载哪些分包
    }
},

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