目录
一、如何在小程序中使用npm包
首先得讲讲小程序使用npm包有哪些限制，虽然小程序已经越来越完善，但是毕竟它有着很多的限制，并不是所有的npm包都可以使用的
-
不支持依赖于Node.js内置库的包
-
不支持依赖于浏览器内置对象的包
-
不支持依赖于C++插件的包
现在来看看如何在小程序中使用npm包
1.创建包管理器
需要使用npm包，首先项目目录得有包管理器：package.json文件，所以第一步就是先创建一个包管理器
可以在项目目录空白处右键打开终端，然后使用npm初始化命令就创建好了一个包管理工具了
npm init -y
之后就可以下载包了
我这里下载了一个vant-weapp组件包
npm i @vant/weapp -S --production2.构建npm包
打开微信开发者工具，点击 工具 -> 构建 npm，构建完成后，就可以引入组件了。
3.使用vant包中的组件
使用vant中的组件，其实就跟我们自定义组件是一个道理，先引入在使用
我们可以全局引入也可以局部引入
全局引入只需要在app.json文件中引入这样的配置即可
"usingComponents": {
"van-button": "@vant/weapp/button/index"
}在页面中就可以使用了，像这样
<van-button type="primary">按钮</van-button>一个按钮就出现了
二、自定义vant组件的主题
这里放了一个danger按钮，它的默认颜色是红色，我们要想改变它的颜色，可以在app.wxss全局配置也可以在页面wxss中配置
page{
--button-danger-background-color:black;
--button-danger-border-color: black;
}这样配置过后，按钮的颜色已经改变
详情所有的配置可以参考官方文档：vant-weapp/packages/common/style/var.less at dev · youzan/vant-weapp · GitHub
所有的配置项都是以字母排序的，所以找起来也很方便
三、小程序的API的Promise化
1.为什么需要Promise化
默认情况下，小程序官方提供的异步API都是基于回调函数实现的，例如，网络请求的API需要按照如下的方式调用:
如果数据较大，就会大量使用这种这种回调函数，就会陷入回调地狱的问题，所以需要Promise来解决这个问题
2.使用第三方包实现Promise化
用到的第三方包：
npm i --save [email protected]下载好包后需要重新构建npm才可以使用该包
在项目中使用该包实现Promise化
在App.js引用如下代码
import {promisifyAll} from 'miniprogram-api-promise'
const wxp = wx.p = {}
promisifyAll(wx,wxp)
这样之后我们在使用微信的API时就可以实现Promise化了
测试案例：
getList(){
const res = wx.p.request({
url: 'https://applet-base-api-t.itheima.net/api/get',
method:'GET',
data:{
name:'zs',
age:20
},
})
console.log(res);
},打印结果：可以看到此时已经Promise化了
进一步使用async和await之后
打印结果就已经非常标准的Promise了
三、全局数据共享（数据管理）
全局数据共享，也就是将所有的数据存放到一个地方，供所有的组件和页面使用
在Vue中我们使用的最多的是Vuex,而小程序中我们使用 mobx
1.安装对应的包
npm install --save [email protected] [email protected]
安装好后重新构建npm
2.创建mobx的store实例对象
首先在项目目录中创建一个store文件夹，然后创建一个store.js文件，在里面写一些数据的共享
代码示例：
import { action } from 'mobx-miniprogram'
import {observable} from 'mobx-miniprogram '
export const store = observable({
//数据字段
numA : 1,
numB : 2,
//计算属性，这里不能修改数据
get sum(){
return this.numA + this.numB
},
//actions 方法 ，用来修改数据
updateNumA:action(function(step){
this.numA += step
}),
updateNumB:action(function(step){
this.numB += step
})
})3.在页面中使用mobx的数据
在页面的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','updateNumB'] //要传递过来的方法
})
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
this.storeBindings.detroyStoreBindings()
},
})这样在页面中就获取到了store中的数据，就可以直接使用了
<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>
该函数用来调用了从store中传递过来的updateNumA方法
btnHandler1(e){
this.updateNumA(e.target.dataset.step)
},3.在组件中使用mobx的数据
首先是在组件的js中引入store
import {storeBindingsBehavior} from 'mobx-miniprogram-bindings'
import {store} from '../../store/store'
Component({
behaviors: [storeBindingsBehavior], //绑定store
storeBindings:{
store,
fields: {
numA: 'numA', //绑定store中的数据和计算属性
numB: 'numB',
sum: 'sum'
},
actions: {
updateNumA: 'updateNumA' //绑定actions方法
}
},
})然后就可以跟在页面中一样去使用了
四、分包
分包指的是把一个完整的小程序项目，按照需求划分为不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载。
进行分包的优点：
- 可以优化小程序首次启动的下载时间
- 在多团队共同开发时能够更好的协同合作
分包后的项目构成：
分包体积限制：（会导致小程序无法发布成功）
整个小程序所有分包大小不超过16M（主包＋所有分包)
单个分包/主包大小不能超过2M
分包配置：在app.json中加入红色框中的代码，然后保存之后就会自动生成对应的分包和页面
查看分包体积：在详情页的基本信息中查看即可
分包后的引用规则：
①主包无法引用分包内的私有资源
②分包之间不能相互引用私有资源
③分包可以引用主包内的公共资源
详情可见上面的分后的项目结构图
独立分包：
独立分包本质上也算是分包，但是它的优点就是可以独立于主包运行，一般的情况下，用户在访问一个小程序时都是先打开主包也就是主页面，然后访问其他的分包页面，独立分包之后就可以不依赖于主包直接访问
区分普通包和独立包只需要在分包是加上这么一句即可
独立分包的引用原则：
①主包无法引用独立分包内的私有资源独立分包之间
②不能相互引用私有资源心
③独立分包和普通分包之间，不能相互引用私有资源特别注意:独立分包中不能引用主包内的公共资源
分包预下载：
分包预下载就是当我们进入某个页面时，让其自动下载稍后可能需要用到的包，这样在我们用户u需要使用的时候就可以更快的渲染出来，增加用户的体验
配置分包预下载只需要在app.json中配置下面示例代码即可
五、自定义tabBar案例
1.配置app.json文件
加上下面的代码就开启了自定义tabBar，但是下面原本的配置不能删除，它为了保证低版本兼容以及区分哪些页面是 tab 页，tabBar 的相关配置项需完整声明，但这些字段不会作用于自定义tabBar 的渲染。
2.添加对应的tabBar文件（注意这里添加的是组件）
3.使用Vant Weapp组件库的tabBar
①：在app.json文件中添加对应的组件
②：添加对应的wxml
<!--custom-tab-bar/index.wxml-->
<van-tabbar active="{
{ active }}" bind:change="onChange">
<van-tabbar-item info="3">
<image slot="icon" src="{
{ icon1.normal }}" mode="aspectFit" style="width: 30px; height: 18px;" />
<image slot="icon-active" src="{
{ icon1.active }}" mode="aspectFit" style="width: 30px; height: 18px;" />
首页
</van-tabbar-item>
<van-tabbar-item info="3">
<image slot="icon" src="{
{ icon2.normal }}" mode="aspectFit" style="width: 30px; height: 18px;" />
<image slot="icon-active" src="{
{ icon2.active }}" mode="aspectFit" style="width: 30px; height: 18px;" />
消息
</van-tabbar-item>
<van-tabbar-item info="3">
<image slot="icon" src="{
{ icon3.normal }}" mode="aspectFit" style="width: 30px; height: 18px;" />
<image slot="icon-active" src="{
{ icon3.active }}" mode="aspectFit" style="width: 30px; height: 18px;" />
联系我们
</van-tabbar-item>
</van-tabbar>③：添加对应的js代码
Page({
data: {
active:0,
icon1: {
active: '/images/tabs/home-active.png', //未选中的图标
normal: '/images/tabs/home.png',//选中的图标
},
icon2:{
active: '/images/tabs/message-active.png', //未选中的图标
normal: '/images/tabs/message.png',//选中的图标
},
icon3:{
normal: '/images/tabs/contact.png', //未选中的图标
active: '/images/tabs/contact-active.png',//选中的图标
}
},
onChange(event) {
// event.detail 的值为当前选中项的索引
this.setData({ active: event.detail });
},
});
tabBar效果就出现了
