小程序手札 - 第三方插件的使用

// 安装插件
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)
}

全局数据共享

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

// 安装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({
    onLoad: 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)
}

小程序分包

什么是分包

分包的好处

分包前项目的构成

分包后项目的构成

分包的加载规则

分包的体积限制

分包的配置方法 

{
    "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 分包为“独立分包”
           }
    ]
}

打包原则

引用原则

独立分包

什么是独立分包

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

独立分包的应用场景

独立分包的配置方法

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