微信小程序开发（内含自定义tarBar案例）

写在前面

这一部分是学习黑马的自定义tarBar部分的记录，记录自己在这些操作遇到的一些问题。因为自己参加了相关的创新创业大赛，并且小程序作为承载体开始了自己的学习，并且不断完善成为毕设，为之后省下很多时间，自己做过项目也有很大的提升。为此写博客记一下关键技术和问题感觉很有必要。

使用vent主题样式

Vant Weapp官网地址：link

安装

这里直接看官网的快速上手就好

在这之前需要在小程序的外部终端打开，如

并且输入为小程序构建package.json等相关文件 需要注意的是官网提供的npm下载需要自己去Node.js官网下载，并且记得要重启电脑。

npm init -y

下面的代码应该加上版本号，如：

npm i @vant/weapp@1.10.3 -S --production

接下来的操作完全就可以看官方给的操作文档了，需要注意的是，官网给的如下图代码是不能完全直接copy的

根据官网给的提示我们也可以看到应该自己修改一下，如下。

  "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./miniprogram_npm"
      }
    ]

小程序API的Promise化

关于为什么要Promise化

黑马是这样说的

在小程序中，实现API Promise化主要依赖与miniprogram-api-promise这个第三方的npm包。代码如下，带上版本号

npm install --save miniprogram-api-promise@1.0.4

然后再去构建一次npm（千万别和黑马那样删掉，小程序已经更新了版本），如图

在app.js中加入

import { promisifyAll } from 'miniprogram-api-promise'
 
const wxp = wx.p = {}
promisifyAll(wx, wxp)

调用 Promise 化之后的异步API

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

全局数据共享

安装Mobx相关的包

在小程序中，可使用mobx-miniprogram配合mobx-miniprogram-bindings 实现全局数据共享。其中
1.mobx-miniprogram用来创建Store 实例对象
2.mobx-miniprogram-bindings 用来把Store中的共享数据或方法，绑定到组件或页面中使用

使用如下代码安装

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

安装后再次构建npm

创建 Mobx 实例

创建一个名为store的文件夹，在下面创建一个store.js文件。在observable中的即为共享数据
注意：在import一定要啥方法加啥，比如如下的action，不然会报一些你看不懂的错

//在这个JS文件中，专门来创建store的实例对象
import {observable,action} from 'mobx-miniprogram'

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

将 Store 中的成员绑定到页面中

在页面的.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']
    })
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    this.storeBindings.destroyStoreBindings()
  }
})

在页面上使用 Store 中的成员

在.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的配置，加入匹配事件

 btnHandler1(e){
    //console.log(e)
    this.updateNum1(e.target.dataset.step)
  },

将 Store 中的成员绑定到组件中

先在components创建一个自定义组件。修改相关配置app.json加入

"usingComponents": {
    "my-numbers":"./components/numbers/numbers"
  },

自定义组件的.js文件修改

// components/numbers/numbers.js
import {storeBindingsBehavior} from 'mobx-miniprogram-bindings'
import {store} from '../../store/store'
Component({
  behaviors:[storeBindingsBehavior], //通过storeBindingsBehavior来实现自动绑定
  storeBindings:{
    //数据源
    store, //指定要绑定的 Store
    fields:{//指定要绑定的字段数据
      numA:() =>store.numA,  //绑定字段的三种方式
      numB:(store)=>store.numB,
      sum:'sum'
    },
    actions:{//指定要绑定的方法
    updateNum2:'updateNum2'
    }
  },
  /**
   * 组件的属性列表
   */
  properties: {

  },
  /**
   * 组件的初始数据
   */
  data: {

  },
  /**
   * 组件的方法列表
   */
  methods: {//自定义组件的方法应当都放在这里
    btnHandler2(e){
      this.updateNum2(e.target.dataset.step)
    }
  }
})

因为在自定义组件.js文件中依旧绑定数据，所以所以.wxml界面可以直接copy修改

<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>

然后在页面的.wxml直接使用自定义组件就可以了。

报错的话可能是某些关键字敲错了，比如actions写成了action

分包

包的引用原则

①主包无法引用分包内的私有资源
②分包之间不能相互引用私有资源
③分包可以引用主包内的公共资源

独立分包

加入independent关键字就好

独立分包和普通分包以及主包之间，是相互隔绝的，不能相互引用彼此的资源!例如;
① 主包无法引用独立分包内的私有资源
② 独立分包之间，不能相互引用私有资源
③ 独立分包和普通分包之间，不能相互引用私有资源特别注意:独立分包中不能引用主包内的公共资源
④ 独立分包中也不能引用主包内的公共资源
【简单来说就是井水不犯河水】

配置分包的预下载

预下载分包的行为，会在进入指定的页面时触发。在app.json中，使用preloadRule 节点定义分包的预下载规则，示例代码如下:

{
"preloadRule": {//分包预下载的规则
	"pages/contact/contact":{ // 触发分包预下载的页面路径
// network表示在指定的网络模式下进行预下载，
//可选值为: all（不限网络）和 wifi（仅 wifi模式下进行预下载>//默认值为: wifi
	"network":"all",
//packages表示进入页面后，预下载哪些分包
//可以通过 root 或 name指定预下载哪些分包
	"packages": ["pkgA"]
		}
	}
}

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

综合案例-自定义 tabBar

设置自定义 tabBar 组件

微信小程序官方文档步骤
注意：为了保证低版本兼容以及区分哪些页面是 tab 页，tabBar 的相关配置项需完整声明，但这些字段不会作用于自定义 tabBar 的渲染。
如果进行了官网的操作后tabBar没有显示如图可能有两种情况

1.重新编译一下，保存不会直接渲染
2.需要在本地设置——>调试基础库——>2.1.30版本并且重启一下

使用 Vant 组件

参考官方文档进行调用设置：Vant-tarBar
官方文档还是得在使用的时候多加阅读，功能很多不可能都记下
app.json中加上关键字

"custom": true,
...
"usingComponents": {
      "van-tabbar": "@vant/weapp/tabbar/index",
  "van-tabbar-item": "@vant/weapp/tabbar-item/index"
  },

在custom-tab-barindex.wxml的配置如下，当然一个一个对应渲染也不是不可以，只是会代码比较冗余

<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: 20px;"
    />
    <image
      slot="icon-active"
      src="{{item.selectedIconPath}}" 
      mode="aspectFit"
      style="width: 25px; height: 20px;"
    />
      {{item.text}}
  </van-tabbar-item>
</van-tabbar>

在前面的store.js的基础上添加active数据，实现动态变化

//在这个JS文件中，专门来创建store的实例对象
import {observable,action} from 'mobx-miniprogram'

export const store = observable({
  numA:1,
  numB:2,
  activeTabBarIndex:0,
  // actions 方法，用来修改store中的数据
...
  updateActiveTabBarIndex:action(function(index){
    this.activeTabBarIndex=index
  })
})

在index.js的配置如下

import {storeBindingsBehavior} from 'mobx-miniprogram-bindings'
import {store} from '../store/store.js'
Component({
  behaviors:[storeBindingsBehavior], 
  storeBindings:{
    //数据源
    store, //指定要绑定的 Store
    fields:{//指定要绑定的字段数据
      sum:'sum',
      active:'activeTabBarIndex'
    },
    actions:{
      updateActive:'updateActiveTabBarIndex'
    },
  },
observers:{
  'sum':function(val){
    if(val<0) return;
   this.setData({
     'list[2].info':val  
   })
  }
},
  options:{
    styleIsolation:'shared'
  },
  /**
   * 组件的初始数据
   */
  data: {
    "list": [{
      "pagePath": "/pages/index/index",
      "text": "首页",
      "iconPath": "/icons/shouye1.png",
      "selectedIconPath": "/icons/shouye.png"
    },
  {
    "pagePath": "/pages/category/category",
      "text": "分类",
      "iconPath": "/icons/fenlei1.png",
      "selectedIconPath": "/icons/fenlei.png"
  },
  {
    "pagePath": "/pages/cart/cart",
    "text": "购物车",
    "iconPath": "/icons/gouwuche1.png",
    "selectedIconPath": "/icons/gouwuche.png"
  },
  {
    "pagePath": "/pages/user/user",
    "text": "我的",
    "iconPath": "/icons/gerzx1.png",
    "selectedIconPath": "/icons/gerzx.png"
  }]
  },
  /**
   * 组件的方法列表
   */
  methods: {
    onChange(event) {
      // event.detail 的值为当前选中项的索引
      // this.setData({ active: event.detail })
      this.updateActive(event.detail)
      wx.switchTab({
        url:this.data.list[event.detail].pagePath,
      })
    },
  }
})

这里会比较多，有必要指出的是：
1.pagePath的路径直接复制前面的可能会检索不到，得加个/
2.iconPath如果使用的是自己的icons，图片名字千万不能是中文，否则在真机上是无法显示的
3.styleIsolation:'shared'的加入是因为tarBar界面上图片和文字存在一定的间距，要进行重写覆盖

在index.wxss中重写一下 --tabbar-item-margin-bottom归为0，这样就不会让消息弹框超出tarBar界面了

.van-tabbar-item{
  --tabbar-item-margin-bottom:0;
}

最终的效果如图所示：