微信小程序Day5笔记

1、使用npm包

1. 小程序中使用npm包有以下限制

不支持依赖于Node.js内置库的包
不支持依赖于浏览器内置对象的包
不支持依赖于C++插件的包

2. Vant Weapp

什么是Vant Weapp
Vant Weapp是一套小程序UI组件库，主力于开发者快速搭建小程序应用。它所使用的是MIT开源许可协议，对商业使用比较友好。
https://youzan.github.io/vant-weapp
安装Vant组件库，主要分为如下3步(npm init -y，自动初始化包管理配置文件)：

通过npm安装(建议指定版本为@1.3.3)
构建npm包
修改app.json

使用Vant组件
在app.json的usingComponents节点中引入需要的组件，即可在wxml中直接使用组件。实例如下：

// app.json 文件
"usingComponents": {
    "van-button": "@vant/weapp/button/index"
}
// wxml文件
<van-button type="info">按钮</van-button>

定制全局主题样式
Vant Weapp使用CSS变量来实现定制主题。
在app.wxss中，写入CSS变量，即可对全局生效(每个子页面的根节点都是page)：

// app.wxss
page {
  --button-danger-background-color: #C00000;
  --button-danger-border-color: #D60000;
}

3. API Promise化

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

wx.request({
  method: '',
  url: '',
  data: {},
  success: ()=>{},
  fail: ()=>{},
  complete: ()=>{}
})

缺点：容易造成回调地狱的问题，代码的可读性、维护性查。
2. 什么是API Promise化
API Promise化，就是通过额外的配置，将官方提供的、基于回调函数的异步API，升级改造为基于Promise的异步API，从而提高代码的可读性、维护性，避免回调地狱的问题。
3. 实现API Promise化
在小程序中，实现API Promise主要依赖于miniprogram-api-promise这个第三方的npm包。它的包装和使用步骤如下：
npm i --save miniprogram-api-promise@1.0.4

import {promisifyAll} from 'miniprogram-api-promise'
const wxp = wx.p = {}
promisifyAll(wx, wxp)

在小程序的app.js文件，只需调用一次 promisifyAll 方法，即可实现异步API的Promise化。
4. 调用Promise之后的异步API

<van-button type="danger" bindtap="getInfo">按钮</van-button>

async getInfo() {
  const {data:res} = await wx.p.request({
    method: 'GET',
    url: '',
    data: {name: 'zs', age: 18}
  });
  console.log(res);
}

2、全局数据共享

1. 什么是全局数据共享

全局数据共享又叫做状态管理，是为了解决组件之间数据共享的问题。
常用的数据共享方案有：Vuex、Redux、Mobx

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

在小程序中，可使用mobx-miniprogram配合mobx-miniprogram-bindings实现全局数据共享。

mobx-miniprogram用来创建Store实例对象。
mobx-miniprogram-bindings用来把Store中的共享数据或方法，绑定到组件或页面中使用。

3. 使用Mobx

安装Mobx相关的包：
npm install --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1
创建Store实例：创建Store文件夹，store文件

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

export const store = observable({
  // 数据字段
  numA: 1,
  numB: 2,
  // 计算属性： get + 函数名
  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文件中

// 页面的.js文件
import {createStoreBindings} from 'mobx-miniprogram-binding'
import {store} from '../../Store/store'
Page({
  onLoad: function() {
    this.storeBindings = createStoreBindings(this, {
      store,
      fields: ['numA', 'numB', 'sum'],
      actions: ['updateNum1', 'updateNum2']
    })
  },
  onUnload: function() {
    this.storeBindings.destroyStoreBindings()
  }
})

在页面上使用Store中的成员：页面的wxml和JS文件

<view>{{numA}} + {{numB}} = {{sum}}</view>
<van-button type="primary" bindtap="btnHandler1" data-step="{{1}}">numA + 1</van-button>
<van-button type="danger" bindtap="btnHandler1" data-step="{{-1}}">numA - 1</van-button>

 btnHandler1(e) {
    this.updateNum1(e.target.dataset.step);
  },

可以为组件提供data-*自定义属性传参，其中*代表的是参数的名字。
<button bindtap="btnHandler" data-info="{{2}}">事件传参</button>
info 会被解析为参数的名字
数值 2 会被解析为参数的值
在事件处理函数中，通过event.target.dataset.参数名获取到具体参数的值。
5. 将Store的成员绑定到组件中

import {storeBindingsBehavior} from 'mobx-miniprogram-bindings'
import {store} from '../../Store/store'
Component({
  behaviors: [storeBindingsBehavior], // 通过storeBindingsBehavior来实现自动绑定

  storeBindings: {
    store, // 指定要绑定的store
    fields: { // 指定要绑定的字段数据
      numA:()=>store.numA, // 绑定字段的第1种方式
      numB:(store)=>store.numB, // 绑定字段的第2种方式
      sum: 'sum' // 绑定字段的第3种方式
    },
    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="danger" bindtap="btnHandler2" data-step="{{-1}}">numB - 1</van-button>

 btnHandler2(e) {
    this.updateNum2(e.target.dataset.step);
  },

3、分包

1. 什么是分包

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

2. 分包的好处

可以优化小程序首次启动的下载时间
在多团队共同开发时可以更好的解耦协作

3. 分包前项目的构成

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

4. 分包后项目的构成

分包后，小程序项目由1个主包+多个分包组成：

主包：一般只包含项目的启动页面或TabBar页面、以及所有分包都需要用到的一些公共资源
分包：只包含和当前分包有关的页面和私有资源

5. 分包的加载规则

在小程序启动时，默认会下载主包并启动主包内页面

tabBar页面需要放到主包中

当用户今天分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示

非tabBar页面可以按照功能的不同，划分为不同的分包之后，进行按需下载

6. 分包的体积限制

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

7. 使用分包

创建

{
  "pages":[
    "pages/home/home"
  ],
  "subPackages": [
    {
      "root": "packageA",
      "name": "p1",
      "pages": [
        "pages/cat/cat",
        "pages/dog/dog"
      ]
    },
    {
      "root": "packageB",
      "name": "p2",
      "independent": true,
      "pages": [
        "pages/apple/apple",
        "pages/pear/pear"
      ]
    }
  ],
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "/images/tabs/home.png",
        "selectedIconPath": "/images/tabs/home-active.png"
      }
    ]
  },
  "usingComponents": {
    "van-button": "@vant/weapp/button/index",
    "my-numbers": "./components/numbers/numbers"
  }
}

打包原则

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

引用原则

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

8. 独立分包

什么是独立分包
独立分包本质上也是分包，只不过比较特殊，可以独立于主包和其他分包而单独运行。
独立分包和普通分包的区别
最主要的区别：是否依赖于主包才能运行

普通分包必须依赖于主包才能运行
独立分包可以在不下载主包的情况下，独立运行

独立分包的应用场景
可以按需，将某些具有一定功能独立性的页面配置到独立分包中。原因如下：

当小程序从普通的分包页面启动时，需要首先下载主包
独立分包不依赖主包即可运行，可以很大程度上提示分包页面的启动速度
一个小程序中可以有多个独立分包。

配置独立分包
引用原则
独立分包和普通分包以及主包之间，是相互隔绝的，不能相互引用彼此的资源。

主包无法引用独立分包内的私有资源
独立分包之间，不能相互引用私有资源
独立分包和普通分包之间，不能相互引用私有资源
独立分包内不能引用主包内的公共资源

9. 分包预下载

什么是分包预下载
分包预下载指的是：在进入小程序的某个页面时，由框架自动预下载可能需要的分包，从而提升进入后续分包页面时的启动速度。
配置分包的预下载
预下载分包的行为，会在进入指定的页面时触发。在app.json中，使用preloadRule节点定义分包的下载规则，示例代码如下：

{
  "preloadRule": { // 分包预下载的规则
    "pages/contact/contact": { // 触发分包预下载的页面路径
      // network表示在指定的网络模式下进行预下载
      // 可选择：all(不限网络) 和 wife(仅wife模式下进行下载)
      // 默认值：wife
      "network": "all",
      // packages：表示进入页面后，预下载哪些分包
      // 可以通过root或name指定预下载哪些分包
      "packages": ['packageA']
    }
  }
}

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