使用npm包

小程序以及支持使用npm安装第三方包，在小程序中使用npm包有三个限制

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

Vant Weapp

有赞前段团队开源的一套小程序UI组件库，使用MIT开源许可协议。

安装Vant组件库

安装步骤

  1. 通过npm安装（建议指定版本为@1.3.3）
  • 在自己的工作目录打开外部终端
  • 若工作目录中还未创建包管理文件package.json，则执行：
1
npm init -y
  • 安装Vant包
1
npm i @vant/weapp@1.3.3 -S --production
  1. 构建npm包
  • 在工具栏中构建
  1. 修改app.json
  • 在app.js文件中删除"style":"v2"，以避免样式冲突

使用Vant3组件

参考文档

定制全局主题样式

补充：CSS自定义属性，即CSS变量

1
2
3
4
5
6
/*Defination & Effect Area*/
html{
--var-name:value
}
/*Usage*/
property:var(--var-name)

Api Promise化

Promise学习

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

在默认情况下，小程序官方提供的异步API都是基于回调函数实现的，如：网络请求api

1
2
3
4
5
6
7
8
wx.request({
    method:'',
    url:'',
    data:{},
    success:()->{},//请求成功的回调函数
    fail:()->{},//请求失败的回调函数
    complete:()->{}//请求完成的回调函数
})

如果在小程序开发中大量使用这类api，会容易造成回调地狱问题，代码的可读性、维护性差。

为了解决这类问题，就需要将Api promise化

安装Api Promise包

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

由于小程序的特殊性，在安装完毕后不能直接使用，而需要在工具中重新构建。

在默认情况下，安装的包会在node_modules目录中，而小程序无法直接读取里面的包，所以需要先构建，将node_modules中的包迁移到miniprogram_npm中。为了避免出现不必要的错误，建议每次重新构建前，删除miniprogram_npm目录。

实现Api Promise化

在app.js入口文件中，调用promisifyAll()方法

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

const型，引用类型的变量。定义一个空白对象赋值给wxp，同时还赋值给微信的一个自定义属性wx.p，让wxp和wx.p都指向空对象。之后可以在每个页面中通过wx.p调用promise化后的api。

1
const wxp = wx.p = {}

promise化所有wx顶级对象的api

1
promisifyAll(wx,wxp)

Promise化后api的使用

发起网络请求 wx.request()

async/await学习

1
2
3
4
5
6
7
async func(){
	const {data:res} = await wx.p.request({ // {data : res} 从对象身上解构出一个data对象并重命名为res，之后再打印res时，打印的是data属性。{data:res}改之前是res。
    	method:'GET'
        ...
    })
    console.log(res)
}

全局数据共享

又称状态管理，是为了解决组件之间数据共享的问题。

开发中常用的全局数据共享方案：Vuex、Redux、Mobx等。

image-20221119092027521

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

mobx-miniprogram配合mobx-miniprogram-bindings。

  • mobx-miniprogram
    • 用于创建STORE实例
  • mobx-miniprogram-bindings
    • 用于STORE和组件或界面建立联系

安装Mobx相关包

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

删除miniprogram_nom文件夹，重新构建npm

创建STORE实例

在根目录创建store文件夹，新建store.js文件

我们通过在js文件内部导出对象实现共享。

1
2
3
4
5
6
7
//按需导入方法
import { observable } from 'mobx-miniprogram'
//导出store对象
export const store = obervable({ 
	numA:1, 
    numB:2
})

计算属性

定义计算属性的方法时，需要在之前加上get表示只读

1
2
3
get sum(){
	return this.numA + this.numB
},

action方法

如果让外部可以直接修改STORE的数据，这是很危险的。我们通过action方法，调用函数来实现对STORE数据的习惯。

首先，需要导入action包

1
import { observable,action } from 'mobx-miniprogram'

使用action实现数据变化

1
2
3
updateNumA:action(function(step){ 
	this.numA+=step
}),

将STORE中的成员绑定到页面

在页面js文件中，导入对应的包

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { createStorageBindings } from 'mobx-miniprogram-bindings'
import { store } from '../../store/store'

Page({
	onLoad: function(){
    	this.storeBindings = createStorageBindings(this,{
        	store, //绑定的对象
            fields:['numA','numB','sum'], //绑定的字段(数据和计算属性)
            actions:['updateNumA'] //绑定的方法
        })
    }
    onUnload:function(){
		this.storeBindings.destoryStoreBindings() //生命周期结束后销毁绑定的对象
	}
})

将STORE中的成员绑定到组件

在组件js中，导入对应的包，并在Component中的behaviors数组中新增导入的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { storeBindingsBehavior } from 'mobx-miniprogram-bindings'
import { store } from '../../store/store'

Component({
	behaviors:[storeBindingsBehavior],//通过storeBindingsBehavior来实现自动绑定
    storeBindings:{
    	store, //指定要绑定的STORE
        fields:{ //绑定字段的3种方式
        	numA:() =>store.numA,
            numB:(store) =>store.numB,
            sum:'sum' //最简单的方法
        },
        action:{ //指定要绑定的方法
        	updateNumA:'updateNumA'
        }
    }
})

分包

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

分包的好处

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

分包前项目的构成

image-20221119101427769

在分包前，所有的页面和公共资源都会被打包到一起，导致整体体积过大，影响下载时间。

分包后项目的构成

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

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

image-20221119101834625

分包的加载规则

小程序启动时，会默认下载主包并启动主包中的页面

  • tabBar页面需要放到主包中

当用户进入分包内的某个页面时，客户端会把对应的分包下载下来，下载完毕后再进行展示

  • 非tabBar页面可以按照功能的不同，划分为不同的分包之后，进行按需下载

分包的体积限制

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

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

使用分包

配置方法

image-20221119102522353

image-20221119102336445

image-20221119102432410

添加别名

在分包中与root平级添加name属性，可以为分包添加别名

打包原则

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

引用原则

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

独立分包

本质也是分包，但可以独立于主包和其它分包单独运行

image-20221119103626497

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

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

独立分包和普通分包以及主包之间，是相互隔绝的，不能相互引用资源（包括主包中的公共资源）

应用场景

按需将某些具有一定功能独立性的页面配置到独立分包中

  • 当小程序从普通的分包页面启动时，需要首先下载主包
  • 独立分包不依赖主包即可运行，可以很大程度上提升分包页面的启动速度

一个小程序可以有多个独立分包

配置方法

在分包中与root平级添加independent属性，设置值为true。

分包预下载

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

配置预下载

在app.json中，使用preloadRule节点对规则进行配置

1
2
3
4
5
6
7
8
{
	"preloadRule":{
    	"pages/index/index":{ //触发预下载的页面
        	"network":"all", //network表示在指定网络模式下进行预下载(默认值为wifi、可选值是all等)
            "packages":["pkgA"] //packages数组中表示要预下载的分包，可以通过root或者name来指定
        }
    }   
}

预下载的限制

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

image-20221119105217679

image-20221119105254889

自定义tabBar