微信小程序——使用npm包、分包

使用npm包

支持与限制

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

vant weapp

安装

1. 初始化文件

npm init -y
npm i @vant/weapp@1.3.3 -S --production

1. 构建 npm 包功能
   • 建议先点击 微信开发者工具 --> 详情 --> 本地设置 --> 使用 npm 模块
   • 然后点击 微信开发者工具 --> 菜单栏 --> 工具 --> 构建npm
   • 提示 构建成功，耗时 xxx 秒 且控制台没有任何的错误，说明包构建成功，可以进行使用
     • 否则就需要把 node_modules、miniprogram_npm 删除
     • 删除以后，重新安装包，并点击 工具 --> 构建npm，进行重新构建
2. 修改 app.json
   • 将 styles: v2 进行移除，防止 小程序本身的 UI 样式和 Vant 的组件样式库 冲突

使用

安装完 Vant 组件库之后，可以在 app.json 的 usingComponents 节点中引入需要的组件，即可在 wxml 中直接使用组件

"usingComponents": {
  "van-button": "@vant/weapp/button/index"
}
<van-button type="default">默认按钮</van-button>

Toast的使用

1. 全局注册

   "usingComponents": {
     "van-toast": "@vant/weapp/toast/index"
   }
   

2. 在js文件中导入

   import Toast from '/@vant/weapp/toast/toast';
    onReady(){
     Toast('我是提示文案，建议不超过十五字~');
   }
   

3. 需要在页面搭配vant标签使用

   <van-toast id="van-toast" />
   

定义与使用CSS变量

定义

html {
    --main-color:#c00000;
}

使用var()函数

.box1,.box2{
    background-color:var(--main-color)
}

使用 CSS 变量定制 Vant 的主题样式

在 app.wxss 中，写入 CSS 变量，即可对全局生效

page{
    --button-danger-background-color:#C00000;
    --button-danger-border-color:#D60000;
}
//page是根节点
//--button-danger....是固定写法
参考：https://github.com/youzan/vant-weapp/blob/dev/packages/common/style/var.less

API Promise

API Promise 化，指的是通过额外的配置，将官方提供的、基于回调函数的异步 API ，升级改造为基于 Promise 的异步 API ，从而提高代码的可读性、维护性，避免回调地狱的问题

安装

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

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

2. 下载完成，我们不能直接使用这个包，而是需要再次重新构建npm包

   • 建议在构建前先删除原有的 miniprogram_npm
   • 然后再点击工具，构建 npm

使用

1. 在小程序入口文件中调用一次 promisifyAll()方法

   import { promisifyAll } from 'miniprogram-api-promise'
   

2. 声明一个常量，为一个空对象

   const wxp = wx.p = {}
   

3. 调用 promisifyAll()方法

   promisifyAll(wx, wxp)
   

• promisifyAll : 做的事就是将 wx 拥有的属性方法都 copy 并改造了一份给了 wxp 这个对象
• 然而, wxp 只是当前 js 文件的一个常量，只能在当前文件使用
• 因此：我们在 wx 上挂载一个属性 p 让他和 wxp 指向同一个空对象
• 在其他页面或者组件就可以通过全局对象 wx 点出 p 来访问到 wxp
• 此时 wx.p 发起异步的请求时，得到的是一个 promise 对象
• 那么我们就可以使用 async/await 简化 Promise 语法

async getInfo(){
  const res = await wx.p.request({
			method:'get',
      url:'https/.....',
      data:{
          name:'zs',
          age:21
      }
  })
  console.log(res) //promise对象实例
}

注意： 本地设置——>勾选编译增强（否则会报mark错误）

全局数据共享

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

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

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

安装

npm install --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1 
（构建npm）

创建 Store 实例对象

1. 在项目根目录下创建 store 文件夹，在文件夹中创建 store.js 文件
2. 在文件内部，导入 mobx-miniprogram 创建 Store 实例的包
3. 创建 Store 仓库，声明全局共享的数据，并导入

import { observable } from 'mobx-miniprogram'

export const store = observable({
  numA: 1,
  numB: 2
})

定义计算属性

1. 在计算属性的方法前，必须加 get 修饰符，代表 sum 的值是只读的，无法进行修改
2. 计算属性 sum 依赖于 numA 和 numB 的值，因此 sum 函数的返回值就是最终的值

import { observable } from 'mobx-miniprogram'

export const store = observable({
  numA: 1,
  numB: 2,
   //定义计算属性
  get sum(){
		return this.numA+this.numB        
  }
})

定义action方法

1. 导入 action 函数
2. action 函数，专门用来修改 store 中数据的值

import { observable } from 'mobx-miniprogram'

export const store = observable({
  numA: 1,
  numB: 2,
   //定义计算属性
  get sum(){
		return this.numA+this.numB        
  },
   //定义action方法，用来修改store中的数据
    updateNum1:action(function(step){
       this.numA+=step
    })
})

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

1. createStoreBindings 方法

   • 参数1： 绑定给谁：当前页面 this，当前页面的实例对象
   • 参数2： 对象 { store(容器)， fields(数据)， actions(修改方法) }
     • 映射容器的实例
     • 映射容器的数据字段
     • 映射容器修改的方法

2. destroyStoreBindings 方法

   • 对 createStoreBindings 方法的返回值，进行清理销毁的工作

在页面的.js文件中

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()
  }
})

<view>{{ numA }} + {{ numB }} = {{ sum }}</view>

<van-button type="warning" bindtap="btnHandler1" data-step="{{ 1 }}">
  numA + 1
</van-button>

<van-button type="primary" bindtap="btnHandler1" data-step="{{ -1 }}">
  numA -1
</van-button>
btnHandler1 (e) {
  this.updateNumA(e.target.dataset.step)
}

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

在组件.js文件中

import { storeBindingsBehavior } from 'mobx-miniprogram-bindings'
import { store } from '../../store/store'

Component({
  // 通过 storeBindingsBehavior 来实现自动绑定
  behaviors: [storeBindingsBehavior],

  storeBindings: {
    store, // 指定要绑定的 Store
    // 指定要绑定的字段数据
    fields: {
      numA: () => store.numA, // 绑定字段的第 1 种方式
      numB: (store) => store.numB, // 绑定数据的第 2 个方式
      sum: 'sum' // 绑定数据的第 3 个方式
    },
    // 指定要绑定的方法
    actions: {
      updateNumA: 'updateNumA'
    }
  }
})

分包

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

• 可以优化小程序首次启动的下载时间

• 在多团队共同开发时可以更好的解耦协作

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

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

加载规则

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

体积限制

小程序分包的大小有以下两个限制：

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

配置分包

1. 更改项目的目录
2. 在 app.json 的 subpackages 节点中声明分包的结构

在app.json中声明

{
  "pages": [ //主包的页面
    "pages/home/home",
    "pages/message/message",
    "pages/contact/contact",
    "pages/shoplist/shoplist"
  ],
  "subPackages": [
    {
      "root": "pkgA", //第一个分包的名称
      "pages": [
        "pages/cat/cat", //第一个分包的页面
        "pages/dog/dog"
      ]
    },
    {
      "root": "pkgB",//第二个分包的名称
      "pages": [
        "pages/apple/apple"
      ]
    }
  ]
  "sitemapLocation": "sitemap.json"
}

设置分包的别名

提供一个name属性代表每个分包的别名

查看分包的体积：详情——>基本设置

打包原则

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

引用原则

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

独立分包

独立分包本质上也是分包，只不过它比较特殊，可以独立于主包和其他分包而单独运行

最主要的区别：是否依赖于主包才能运行

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

注意：一个小程序中可以有多个独立分包

将普通分包改造成独立分包

普通分包和独立分包的区别就是在 subpackages 数组中，是否配置了 independent 这个属性

• 和普通分包对比, 独立分包就是在 subpackages 数组的某个元素中, 配置 independent 为true即可

"subPackages": [
    {
      "root": "pkgA", //第一个分包的名称
      "pages": [
        "pages/cat/cat", //第一个分包的页面
        "pages/dog/dog"
      ],
      "independent":true//将第一个分包设置为独立分包
    },
    {
      "root": "pkgB",//第二个分包的名称
      "pages": [
        "pages/apple/apple"
      ]
    }
  ]

引用原则

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

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

分包预下载

• 分包预下载是指在进入小程序的某个页面时，由框架自动预下载可能需要的分包，从而提升进入后续分包页面时的启动速度
• 提升进入后续分包页面时的启动速度

配置分包预下载

在 app.json 中，使用 preloadRule 节点定义分包的预下载规则

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

预下载的限制

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