能够知道如何安装和配置 vant-weapp 组件库
能够知道如何使用 MobX 实现全局数据共享
能够知道如何对小程序的 API 进行 Promise 化
能够知道如何实现自定义 tabBar 的效果
使用npm包
Vant Weapp
官方文档地址 https://portrait.gitee.com/vant-contrib/vant-weapp
使用vantapp包
https://github.com/vant-ui/vant-demo
安装步骤：1.打开命令行，到小程序所在目录
2.npm init -y
初始化一个包管理配置文件
由此生成了一个包管理文件package.json
3.安装 npm i @vant/weapp@1.3.3 -S --production
1.3.3特别指定了该版本。
4.回车进行安装
发现版本是1.3.3
5.构建npm包
详情页勾选使用npm
修改app.json
安装完成后即可使用组件。
定制全局主题样式
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties
举例如下
css变量的作用域在它定义的范围之内。
定义在Html上表示是全局的。
https://github.com/youzan/vant-weapp/blob/dev/packages/common/style/var.less
该文件中@变为--即可。
在app.wxss中写入全局css变量
page {
--button-danger-background-color: #C00000;
--button-danger-border-color: #D60000;
--button-primary-background-color: #13A7A0;
--button-primary-border-color: #15B4AA;
}
使用 npm 包 - API Promise化
npm install --save miniprogram-api-promise@1.0.4
每次安装完npm包之后都要在工具栏进行npM构建，构建前最好先删除一下miniprogram_npm这个文件夹，防止构建失败。
--app.js中
import { promisifyAll } from 'miniprogram-api-promise'
const wxp = wx.p = {}
promisifyAll(wx, wxp)
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)
},
全局数据共享
npm install --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1
2.创建MobX的store实例
根目录下创建store文件夹，里面创建store.js
// 在这个 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
}),
updateActiveTabBarIndex: action(function(index) {
this.activeTabBarIndex = index
})
})
设置计算属性必须方法前加个get，表示是只读的。
只允许调用actions去修改数据。
举例如下
message.wxml
message.js
// pages/message/message.js
import { createStoreBindings } from 'mobx-miniprogram-bindings'
import { store } from '../../store/store'
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.storeBindings = createStoreBindings(this, {
store,
fields: ['numA', 'numB', 'sum'],
actions: ['updateNum1']
})
},
btnHandler1(e) {
// console.log(e)
this.updateNum1(e.target.dataset.step)
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
this.storeBindings.detroyStoreBindings()
}
})
如组件numbers,number.js
// components/numbers/numbers.js
import { storeBindingsBehavior } from 'mobx-miniprogram-bindings'
import { store } from '../../store/store'
Component({
behaviors: [storeBindingsBehavior],
storeBindings: {
// 数据源
store,
fields: {
numA: 'numA',
numB: 'numB',
sum: 'sum'
},
actions: {
updateNum2: 'updateNum2'
}
},
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
btnHandler2(e) {
this.updateNum2(e.target.dataset.step)
}
}
})
举例如下，number.wxml
<!--components/numbers/numbers.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>
分包的概念
举例如下——该节点在app.json下
"subpackages": [
{
"root": "pkgA",
"name": "p1",
"pages": [
"pages/cat/cat",
"pages/dog/dog"
]
},
{
"root": "pkgB",
"name": "p2",
"pages": [
"pages/apple/apple"
],
"independent": true
}
],
其中子包中的页面都是相对于子包所在的文件夹存放的，定义了该页面之后那么就自动生成了该页面。
点击基本信息可查看分包大小，每个分包要小于2M，总分包要小于16M.
"independent": true，分包加上该语句变成独立分包。
"preloadRule": {
"pages/contact/contact": {
"packages": [
"p1"
],
"network": "wifi"
}
},
该分包预下载指定了当进入contact页面时，将预下载p1子包。
导航到分包可使用如下——
<navigator url="/pkgA/pages/cat/cat" open-type="navigate">导航到分包pkgA</navigator>
自定义tabBar
https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html
tabBar节点配置了"custom": true,
建立自定义tabBar文件夹，名字是固定的custom-tab-bar。
在custom-tab-bar上右键，建立index组件。
在index.wxml中定义自定义的tabBar.
<van-tabbar active="{{active}}" bind:change="onChange" active-color="#13A7A0">
<van-tabbar-item wx:for="{{list}}" wx:key="index" info="{{item.info ? item.info : ''}}">
<image slot="icon" src="{{item.iconPath}}" mode="aspectFit" style="width: 25px; height: 25px;" />
<image slot="icon-active" src="{{item.selectedIconPath}}" mode="aspectFit" style="width: 25px; height: 25px;" />
{{item.text}}
</van-tabbar-item>
</van-tabbar>
在index.js中添加data
/**
* 组件的初始数据
*/
data: {
"list": [
{
"pagePath": "/pages/home/home",
"text": "首页",
"iconPath": "/images/tabs/home.png",
"selectedIconPath": "/images/tabs/home-active.png"
},
{
"pagePath": "/pages/message/message",
"text": "消息",
"iconPath": "/images/tabs/message.png",
"selectedIconPath": "/images/tabs/message-active.png",
info: 0
},
{
"pagePath": "/pages/contact/contact",
"text": "联系我们",
"iconPath": "/images/tabs/contact.png",
"selectedIconPath": "/images/tabs/contact-active.png"
}
]
},
index.js中添加onchange方法
onChange(event) {
// event.detail 的值为当前选中项的索引
// this.setData({ active: event.detail })
this.updateActive(event.detail)
wx.switchTab({
url: this.data.list[event.detail].pagePath,
})
},
这个代表小数字。
/* custom-tab-bar/index.wxss */
.van-tabbar-item {
--tabbar-item-margin-bottom: 0;
}
设置tabBar到底部的值，防止小数字溢出。
在index.js设置样式隔离。
options: {
styleIsolation: 'shared'
},
将store中的sum绑定为Info显示到右上角。
利用监听器，当sum发生变化，在监听器中设置info的值为sum
observers: {
'sum': function (val) {
this.setData({
'list[1].info': val
})
}
},
实现tabBar的切换
onChange(event) {
// event.detail 的值为当前选中项的索引
// this.setData({ active: event.detail })
this.updateActive(event.detail)
wx.switchTab({
url: this.data.list[event.detail].pagePath,
})
},
设置了tabBar的索引
// 在这个 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
}),
updateActiveTabBarIndex: action(function(index) {
this.activeTabBarIndex = index
})
})
------------------------
由此设置了active
引用store的activeTabBarIndex
修改tabBar字体颜色如下
