微信小程序（4）进阶

1.Vant Weapp

https://youzan.github.io/vant-weapp/

npm init -y

npm i @vant/weapp -S --production

2.实现API promise化

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

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

//.wxml
<van-button type="primary" bindtap="getInfo">主要按钮</van-button>

//.js
async getIngo(){
  const {data: res} = await wx.p.request({
    method: 'GET',
    url: '',
    data: {name:'zs',age:20}
  })
  console.log(res)
},

3. 全局数据共享

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

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

npm i --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1

store.js

//用来创建Store的实例对象
import {action, observable} from 'mobx-miniprogram'

export const store = observable({
  //数据字段
  numA:1,
  numB:2,
  //计算属性，get表示只读
  get sum(){
    return this.numA+this.numB
  },
  //action方法，用来修改store中的值
  updateNumA:action(function(step){
    this.numA+=step
  }),
  updateNumB:action(function(step){
    this.numB+=step
  }),
  }
)

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

import {createStoreBindings} from 'mobx-miniprogram-bindings'
import {store} from '../../store/store'
Page({
  onLoad: function (options) {
    this.storeBindings=createStoreBindings(this,{
      store,
      fields:['numA','numB','sum'],
      actions:['updateNumA']
    })
  },
  onUnload: function () {
    this.storeBindings.destroyStoreBindings()
  },
  btnHandler(e){
    this.updateNumA(e.target.dataset.step)
  },
})

在页面中使用store中的成员

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

将store中的成员绑定到组件中

import {storeBindingsBehavior} from 'mobx-miniprogram-bindings'
import {store} from '../../store/store'
Component({
  behaviors:[storeBindingsBehavior],
  storeBindings:{
    store,
    fields:{
      numA:'numA',
      numB:'numB',
      sum:'sum'
    },
    actions:{
      updateNumB:'updateNumB'
    }
  },
  methods: {
    btnHandler2(e){
      this.updateNumB(e.target.dataset.step)
    }
  }
})

在组件中使用store中的成员

<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>

4.分包

4.1普通分包

//app.json
{
  "pages":[ // 主包的所有页面
    "pages/index",
    "pages/logs"
  ],
  "subpackages"：[ // 通过 subpackages节点，声明分包的结构
    {
      "root"："packageA"，// 第一个分包的根目录
      "pages"：[ // 当前分包下，所有页面的相对存放路径
        "pages/cat"
        "pages/dog"
    },{
      "root"："packageB"，// 第二个分包的根目录
      "name": "pack2",// 分包的别名
      "pages"：[ // 当前分包下，所有页面的相对存放路径
        "pages/apple",
        "pages/banana"
      ]
    }
  ]
}

打包原则：

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

引用原则：

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

4.2独立分包

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

//app.json
{
  "pages":[ // 主包的所有页面
    "pages/index",
    "pages/logs"
  ],
  "subpackages"：[ // 通过 subpackages节点，声明分包的结构
    {
      "root"："packageA"，// 第一个分包的根目录
      "pages"：[ // 当前分包下，所有页面的相对存放路径
        "pages/cat"
        "pages/dog"
    },{
      "root"："packageB"，// 第二个分包的根目录
      "name": "pack2",// 分包的别名
      "pages"：[ // 当前分包下，所有页面的相对存放路径
        "pages/apple",
        "pages/banana"
      ],
      "independent":true
    }
  ]
}

独立分包和普通分包以及主包之间，是相互隔绝的，不能相互引用彼此的资源！例如：

1.主包无法引用独立分包内的私有资源
2.独立分包之间,不能相互引用私有资源
3.独立分包和普通分包之间，不能相互引用私有资源
4.特别注意：独立分包中不能引用主包内的公共资源

4.3分包预下载

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

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