微信小程序Day5笔记

1、使用npm包

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

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

2. Vant Weapp

  1. 什么是Vant Weapp
    Vant Weapp是一套小程序UI组件库,主力于开发者快速搭建小程序应用。它所使用的是MIT开源许可协议,对商业使用比较友好。
    https://youzan.github.io/vant-weapp
  2. 安装Vant组件库,主要分为如下3步(npm init -y,自动初始化包管理配置文件):
  • 通过npm安装(建议指定版本为@1.3.3)
  • 构建npm包
  • 修改app.json
  1. 使用Vant组件
    在app.json的usingComponents节点中引入需要的组件,即可在wxml中直接使用组件。实例如下:
// app.json 文件
"usingComponents": {
    "van-button": "@vant/weapp/button/index"
}
// wxml文件
<van-button type="info">按钮</van-button>
  1. 定制全局主题样式
    Vant Weapp使用CSS变量来实现定制主题。
    在app.wxss中,写入CSS变量,即可对全局生效(每个子页面的根节点都是page):
// app.wxss
page {
  --button-danger-background-color: #C00000;
  --button-danger-border-color: #D60000;
}

3. API Promise化

  1. 基于回调函数的异步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

  1. 安装Mobx相关的包:
    npm install --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1
  2. 创建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;
  }),
})
  1. 将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()
  }
})
  1. 在页面上使用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'
    }
  }
})
  1. 在组件中使用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. 分包的好处

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

3. 分包前项目的构成

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

4. 分包后项目的构成

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

  • 主包:一般只包含项目的启动页面或TabBar页面、以及所有分包都需要用到的一些公共资源
  • 分包:只包含和当前分包有关的页面和私有资源
    在这里插入图片描述

5. 分包的加载规则

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

6. 分包的体积限制

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

7. 使用分包

  1. 创建
    在这里插入图片描述
{
  "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"
  }
}

  1. 打包原则
  • 小程序会按subpackages的配置进行分包,subpackages之外的目录将被打包到主包中
  • 主包也可以有自己的pages(即最外层的pages字段)
  • tabBar页面必须在主包内
  • 分包之间不能相互嵌套
  1. 引用原则
  • 主包无法引用分包内的私有资源
  • 分包之间不能相互引用私有资源
  • 分包可以引用主包内的公告资源

8. 独立分包

  1. 什么是独立分包
    独立分包本质上也是分包,只不过比较特殊,可以独立于主包和其他分包而单独运行。
  2. 独立分包和普通分包的区别
    最主要的区别:是否依赖于主包才能运行
  • 普通分包必须依赖于主包才能运行
  • 独立分包可以在不下载主包的情况下,独立运行
  1. 独立分包的应用场景
    可以按需,将某些具有一定功能独立性的页面配置到独立分包中。原因如下:
  • 当小程序从普通的分包页面启动时,需要首先下载主包
  • 独立分包不依赖主包即可运行,可以很大程度上提示分包页面的启动速度
    一个小程序中可以有多个独立分包。
  1. 配置独立分包
    在这里插入图片描述

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

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

9. 分包预下载

  1. 什么是分包预下载
    分包预下载指的是:在进入小程序的某个页面时,由框架自动预下载可能需要的分包,从而提升进入后续分包页面时的启动速度。
  2. 配置分包的预下载
    预下载分包的行为,会在进入指定的页面时触发。在app.json中,使用preloadRule节点定义分包的下载规则,示例代码如下:
{
  "preloadRule": { // 分包预下载的规则
    "pages/contact/contact": { // 触发分包预下载的页面路径
      // network表示在指定的网络模式下进行预下载
      // 可选择:all(不限网络) 和 wife(仅wife模式下进行下载)
      // 默认值:wife
      "network": "all",
      // packages:表示进入页面后,预下载哪些分包
      // 可以通过root或name指定预下载哪些分包
      "packages": ['packageA']
    }
  }
}
  1. 分包预下载的限制
    同一个分包中的页面享有共同的预下载大小限额2M。