说明: 这个demo中采用
van-tabbar组件,搭建过程中,加入了Mobx进行全局的数据共享,实现了tabbar角标的全局显示,tabbar的选中项不对修复;本文是新手入门微信小程序,写的很碎,主要是记录下整个流程.
1. 搭建工程,安装 Vant Weapp组件
1.1 搭建一个有三个tabbar的界面
"tabBar": {
"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"
},
{
"pagePath": "pages/contact/contact",
"text": "联系我们",
"iconPath": "/images/tabs/contact.png",
"selectedIconPath": "/images/tabs/contact-active.png"
}
]
}
1.2 导入vant组件
1.2.1 CD到工程目录, npm init
1.2.2 npm install
1.2.3 修改工程,将 app.json 中的 "style": "v2" 去除
1.2.4 修改 project.config.json
开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。
需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。
{
...
"setting": {
...
"packNpmManually": true,
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./"
}
]
}
}
1.2.5 终端 npm i @vant/weapp -S --production
1.2.6 打开微信开发者工具，点击 工具 -> 构建 npm ,完成后如下:
1.2.7 界面调用测试
在page界面中,json文件下:
json调用
"usingComponents": {
"van-button": "@vant/weapp/button/index"
}
wxml调用:
<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
运行时报错,找不到组件,直接关闭工程重新启动即可.
2. 安装Mobx全局数据共享组件
( 大工程才需要使用这个,一般的小项目不需要使用,采用系统的就可以了 )
2.1 终端cd到工程目录,npm install --save mobx-miniprogram mobx-miniprogram-bindings
2.2 删除原工程中的 miniprogram_npm文件
2.3 构建npm
2.4 创建store仓库,如下,创建一个文件,文件内创建一个store.js文件
2.5 给store添加全局属性和 修改属性的方法
// 创建全局数据共享 Mobx
import {observable,action} from 'mobx-miniprogram'
// store里面的属性,只能通过store提供的方法进行修改,不能直接进行操作修改;
/*
数据我们可以直接定义
计算属性使用get标记
方法使用action标记
*/
export const store = observable({
numA:1,
numB:2,
//计算属性,get代表是只读,只能获取,不能修改;
get sum(){
return this.numA+this.numB
},
// 修改NumA的方法,这个方法必须在action的包裹下;
updateNumA:action(
function(step){
this.numA += step;
}
),
updateNumB:action(
function(step){
this.numB += step;
}
),
})
如上,创建了两个属性numA和numB,并提供了一个计算属性(get修饰),和修改numA和numB的 方法;
2.6 mobx的属性的使用,这里分两种情况,一是page界面直接使用全局的属性;二是组件中使用全局的属性,下面分开讲.
3. 在界面中使用Mobx的全局数据和方法
3.1 从’mobx-miniprogram-bindings'中引入createStoreBindings 和 sotre仓库
import {
createStoreBindings
} from 'mobx-miniprogram-bindings'
import {
store
} from '../../store/store'
3.2 在onLoad钩子中使用createStoreBindings方法接收两个参数
this.storeBindings = createStoreBindings(this, {
store,
fields: ['numA', 'numB', 'sum'], //这个是全局的属性,当前界面需要使用哪些就在这里提供哪些
actions: ['updateNumA','updateNumB'] // 这个是全局的方法;
})
其中的 fields是当前界面需要使用到的全局的属性; actions是需要使用到的方法.在当前的page界面中就可以访问'numA', 'numB', 'sum' 三个属性和两个方法'updateNumA','updateNumB'
下面是page界面的完整代码(多余的代码不用看)
<text>pages/home/home.wxml</text>a
<view> ==== 当前界面直接使用mobx全局数据 ==== </view>
<view>{{numA}} + {{numB}} = {{sum}}</view>
<van-button type="primary" data-step="{{1}}" bind:tap="numAchange"> numA +1 </van-button>
<van-button type="danger" data-step="{{-1}}" bind:tap="numAchange"> numA -1 </van-button>
<view> ==== 组件中使用mobx全局数据 ====</view>
<myTestCom></myTestCom>
<van-button type="primary" bind:tap="goFenbao"> 进入到fenbao界面</van-button>
<van-button type="danger" bind:tap="goDog"> 进入到分包的dog界面</van-button>
js中🔥🔥:
import {
createStoreBindings
} from 'mobx-miniprogram-bindings'
import {
store
} from '../../store/store'
Page({
data: {
},
onLoad() {
this.storeBindings = createStoreBindings(this, {
store,
fields: ['numA', 'numB', 'sum'], //这个是全局的属性,当前界面需要使用哪些就在这里提供哪些
actions: ['updateNumA','updateNumB'] // 这个是全局的方法;
})
},
numAchange(e){
let step = e.target.dataset.step;
this.updateNumA(step) // 更改全局的数据,只能采用暴露的方法进行
},
goFenbao(){
wx.navigateTo({
url: '../../pkgA/pages/fenbao/fenbao',
})
},
goDog(){
wx.navigateTo({
url: '../../pkgA/pages/dog/dog',
})
}
})
4. 在组件中使用Mobx的全局数据和方法
4.1 创建一个组件,并在组件中调用mobx,如下
在组件中,我们可以给属性和方法重新命名
具体的代码如下:
import {storeBindingsBehavior} from "mobx-miniprogram-bindings"
import {store} from "../store/store"
Component({
behaviors:[storeBindingsBehavior],
storeBindings:{
store, //数据源
fields:{
numA:'numA',
numB:'numB',
sum:'sum'
},
actions:{
updateNumB:'updateNumB'
}
},
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
numBchange(e){
this.updateNumB(e.target.dataset.step)
}
}
})
使用🔥:
<view> 组件中使用mobx的全局数据Start </view>
<view>{{numA}} + {{numB}} = {{sum}}</view>
<van-button type="primary" data-step="{{1}}" bind:tap="numBchange"> numB +1 </van-button>
<van-button type="danger" data-step="{{-1}}" bind:tap="numBchange"> numB -1 </van-button>
<view> 组件中使用mobx的全局数据End </view>
页面和组件的引入和使用区别:
都是从mobx-miniprogram-bindings中引入，并引入store仓库
但页面引入的是createStoreBindings，组件引入的是storeBindingsBehavior
页面是在onLoad钩子中通过createStoreBindings使用注册,并挂在vx实例上的storeBindings上
组件是在behaviors中注册，然后在storeBindings中使用
使用mobx进行全局数据共享和在app.js的globalData定义全局数据有以下区别:
原理不同：mobx是一种状态管理库，它使用观察者模式来实现数据的自动更新和响应式，而globalData是微信小程序提供的全局变量，可以在不同页面中直接访问和修改。
灵活性不同：mobx提供了更灵活的状态管理方式，可以将数据和业务逻辑进行解耦，实现更细粒度的数据更新和控制；而globalData只是简单的全局变量，不具备mobx的高级特性。
适用场景不同：mobx适用于中大型复杂应用，可以帮助管理和更新大量的状态；而globalData适用于简单的小程序应用，不需要复杂的状态管理。
使用复杂度不同：mobx需要引入相关的库和进行一定的配置，使用起来相对复杂一些；而globalData是微信小程序内置的功能，无需额外的配置和引入，使用起来更加简单。
综上所述，如果小程序的数据共享需求较为简单，可以直接使用globalData；如果需要更复杂的状态管理和数据共享，可以考虑使用mobx或其他类似的状态管理库。
5. 搭建自定义的tabbar
这里使用的是vant组件定义,包括添加角标显示数量;
5.1 给原有的tabbar添加custom 字段
"tabBar": {
"custom": true,
"list": [
......
]
},
5.2 添加 tabBar 代码文件
这里必须要完全按照官方的名称来,创建一个custom-tab-bar文件,并在文件下常见一个index的组件;因为必须是要一模一样,所以我们之前的代码中的index文件,需要改成其他的名称,不然会有冲突.
5.3 导入组件到index
"usingComponents": {
"van-tabbar": "@vant/weapp/tabbar/index",
"van-tabbar-item": "@vant/weapp/tabbar-item/index"
}
5.4 配置默认选中项和 tabbar的数据源
data: {
active: 0,
"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"
},
{
"pagePath": "pages/contact/contact",
"text": "联系我们",
"iconPath": "/images/tabs/contact.png",
"selectedIconPath": "/images/tabs/contact-active.png"
}
]
},
5.5 wxml中的tabbar搭建代码
<van-tabbar active="{{ active }}" bind:change="onChange" active-color="#07c160"
inactive-color="#333">
<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>
active为选中项; onChange是点击的事件;active-color是选中颜色;info是角标显示
运行后界面如下
5.6 角标溢出处理
角标有部分显示在了tabbar的外面
通过图片可以看出,有个margin导致的;这里有一个css的变量,给了一个margin,导致角标的上移了;
处理方法是在这个元素的父节点,设置这个属性为0; 在index.wxss中
.van-tabbar-item {
--tabbar-item-margin-bottom:0
}
以上的设置是无效的,因为vant的组件需要样式的覆盖,需要配置信息,具体说明如下:
https://youzan.github.io/vant-weapp/#/custom-style
Vant的组件在page的界面中,是不需要其他配置的;但是如果是在组件中引用了vant的组件,需要开启 styleIsolation: 'shared'
解决办法:
5.7 点击后的界面跳转问题处理
然后再点击事件中调用方法:
methods: {
onChange(event) {
// event.detail 的值为当前选中项的索引
this.setData({ active: event.detail });
wx.switchTab({
url: this.data.list[event.detail].pagePath,
})
},
}
设置后发现界面是可以正常跳转的,但是tabbar的显示选中项是错误的.
5.8 解决tabbar的选中项索引不对的问题
其实问题是出现在这个action的值的不对导致的的,当点击其他的tabbar后,界面的切换,导致tabbar的界面对应的,具体的逻辑不清楚;
解决方法:把action改成全局的;
5.8.1 在mobx的全局数据仓库中添加 action的数据;
5.8.2 在 index组件中,添加全局的属性 和 方法
5.8.3 屏蔽掉data中定义的属性active,在onChange方法中,更新全局的active
到此,这个bug就可以解决了.
6. 角标数据采用全局化(这里采用sum当成全局的参数显示)
6.1 在index组件中引入 mobx
import {storeBindingsBehavior} from "mobx-miniprogram-bindings"
import {store} from "../store/store"
6.2 在index的tabbar组件中,配置全局的属性sum,同时监听属性的变化,同步改变tabbar的数据源
behaviors:[storeBindingsBehavior],
storeBindings:{
store, //数据源
fields:{
sum:'sum'
},
actions:{
}
},
// 监听sum的改变
observers:{
"sum":function(value){
console.log(value);
this.setData({
"list[1].info":value
})
}
},
以下是tabbar组件index的所有完整代码:
js🔥:
import {storeBindingsBehavior} from "mobx-miniprogram-bindings"
import {store} from "../store/store"
Component({
options:{
// vant的组件,如果是组件中引用,想修改样式需要开启 styleIsolation
styleIsolation: 'shared',
},
behaviors:[storeBindingsBehavior],
storeBindings:{
store, //数据源
fields:{
sum:'sum',
active:'activeTabbarIndex'
},
actions:{
updateAction:'updateActiveTabbarIndex'
}
},
// 监听sum的改变
observers:{
"sum":function(value){
console.log(value);
this.setData({
"list[1].info":value
})
}
},
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
// active: 0, 采用全局的了
"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":3 //这个是消息的数量
},
{
"pagePath": "/pages/contact/contact",
"text": "联系我们",
"iconPath": "/images/tabs/contact.png",
"selectedIconPath": "/images/tabs/contact-active.png"
}
]
},
/**
* 组件的方法列表
*/
methods: {
onChange(event) {
// event.detail 的值为当前选中项的索引
// this.setData({ active: event.detail });
this.updateAction(event.detail)
wx.switchTab({
url: this.data.list[event.detail].pagePath,
})
},
}
})
wxml🔥:
<!--custom-tab-bar/index.wxml-->
<van-tabbar active="{{ active }}" bind:change="onChange" active-color="#07c160"
inactive-color="#333">
<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>
wxss🔥:
/* custom-tab-bar/index.wxss */
.van-tabbar-item {
--tabbar-item-margin-bottom:0
}
json🔥:
{
"component": true,
"usingComponents": {
"van-tabbar": "@vant/weapp/tabbar/index",
"van-tabbar-item": "@vant/weapp/tabbar-item/index"
}
}
到此就结束了.
