使用npm包

目前小程序已经支持使用npm安装第三方程序，从而提高开发效率，使用npm包由如下三个限制

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

Vant Weapp

安装vant组件库

三步

  1. 通过npm安装
  2. 构建npm包
  3. 修改app.json

详细步骤参考vant官方文档

https://youzan.github.io/vant-weapp/#/quickstart#an-zhuang

定制全局主题样式

Vant Weapp使用CSS变量来实现定制主题，关于CSS变量的基本用法，参考mdn文档

https://develop.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties

API Promise优化

基于回调函数的异步API的缺点

默认情况下，小程序官方提供的异步API都是基于回调函数实现的，容易造成回调地狱问题，代码可读性，维护性差。

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

实现API Promise化

实现API Promise化主要依赖于miniprogram-api-promise这个第三方的npm包，安装使用步骤如下

1
npm install --save miniprogram-api-promise@1.0.4
1
2
3
4
5
6
// 在小程序入口文件app.js 只需调用一次promisifyAll()方法
// 即可实现异步API的promise化
import { promisifyAll } from 'miniprogram-api-promise'

const wxp = wx.p = {}
promisifyAll(wx, wxp)

调用

1
2
3
4
5
6
7
8
9
10
11
12
13
<van-button type="primary" bindtap="getInfo">按钮</van-button>

async getInfo() {
    const {data: res} = await wx.p.request({
      method: 'GET',
      url: 'https://www.escook.cn/api/get',
      data: {
        name: 'zs',
        age: 20
      }
    })
    console.log(res)
  }

全局数据共享

全局数据共享（状态管理）是为了解决组件之间数据共享的问题

开发中常用的全局数据共享方案有：Vuex``Redux``MobX

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

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

MobX

安装MOBX相关包

1
npm install --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1

注意MoBX相关的包安装完毕后，要删除miniprogram_npm目录，然后重新构建npm

创建MoBX的Store实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 在这个 JS 文件中，专门来创建 Store 的实例对象
import { observable, action } from 'mobx-miniprogram'

export const store = observable({
  // 数据字段
  numA: 1,
  numB: 2,
  activeTabBarIndex: 0,
  // 计算属性
  get sum() {
    return this.numA + this.numB
  },
  // actions 函数，专门来修改 store 中数据的值
  updateNum1: action(function (step) {
    this.numA += step
  }),
  updateNum2: action(function (step) {
    this.numB += step
  })
})

将Store中成员绑定到页面中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 页面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: ['updateNum1']
    })
  },
    //生命周期函数--监听页面卸载
 onUnload: function () {
    this.storeBindings.detroyStoreBindings()
  }
})

在页面上使用Store中成员

1
2
3
4
5
6
7
8
9
10
11
// wxml页面
<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>
// js 文件
Page({
	btnHandler1(e) {
    // console.log(e)
    this.updateNum1(e.target.dataset.step)
  }
})

将Store成员绑定到组件中

在组件中使用Store中成员

分包

基础概念

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

好处

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

分包前项目构成

分包前，小程序项目中所有的页面和资源都被打包到一起，导致整个项目体积过大

分包后项目构成

分包后，小程序项目由一个主包和多个分包组成

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

分包加载规则

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

分包的体积限制

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

使用分包

打包原则

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

使用原则

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

独立分包

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

开发者可以按需将具有一定功能的独立性的页面配置到独立分包中，一个小层序可以有多个独立分包

引用原则

独立分包和普通分包以及主包之间，三者时相互隔绝，不能互相引用

特别注意，独立分包不能引用主包内公共资源

分包预下载

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

配置

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

1
2
3
4
5
6
7
8
"preloadRule": {
   "pages/contact/contact": {
     "packages": [
       "p1"
     ],
     "network": "wifi"
   }
 }

自定义tabBar

三大步

  1. 配置信息
  2. 添加tabBar代码文件
  3. 缩写tabBar代码

详细步骤查看小程序官方文档

https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html