UniApp微信小程序动态设置TabBer

接上期文章（查看演示效果）

本方案适用于登录不同角色显示（使用）不同tabber页，tabber页面超过5个但是底部tabber数量固定。
如本人当前项目TabBer显示：

1. 角色一：A + B + C + 我的
2. 角色二：D + E + C + 我的
3. 角色三：F + G + C + 我的

“C” 页面 和 “我的”页面，三个角色都有，“A”,“B”,“D”,“E”,“F”,“G”页面均为不同页面（一共8个tabber页），项目tabber页面数量不限但是各角色展示的tabber数量需一致

APP端直接正常配置

pages.json

"tabBar": {
	......
	"list": [
		{
			"pagePath": "pages/A/A",
			"iconPath": "/static/images/table/a1.png",
			"selectedIconPath": "./static/images/table/a2.png", 
			"text": "A页面"
		},{
			"pagePath": "pages/B/B",
			"iconPath": "/static/images/table/b1.png",
			"selectedIconPath": "./static/images/table/b2.png", 
			"text": "B页面"
		},
		{
			"pagePath": "pages/C/C",
			"iconPath": "/static/images/table/c1.png",
			"selectedIconPath": "./static/images/table/c2.png",
			"text": "C页面"
		},
		{
			"pagePath": "pages/my/my",
			"iconPath": "/static/images/table/e1.png",
			"selectedIconPath": "./static/images/table/e2.png", 
			"text": "我的"
		}
	]
}
	//直接使用UniAPP提供的api更改图标和跳转页面路径
	uni.setTabBarItem({
	  index: 0,//设置第几个tabber
	  text: 'D页面',
	  pagePath: 'pages/D/D',
	  iconPath: '/static/images/table/d1',
	  selectedIconPath: '/static/images/table/d2'
	})

正文：微信小程序

pages.json
//新建两个页面(home1,home2)设置为tabber页面
"tabBar": {
	......
	"list": [
		// #ifdef MP-WEIXIN			仅微信编译
		{
			"pagePath": "pages/home1/home1",
			"iconPath": "/static/images/table/a1.png",
			"selectedIconPath": "./static/images/table/a2.png", 
			"text": "主页1"
		},{
			"pagePath": "pages/home2/home2",
			"iconPath": "/static/images/table/b1.png",
			"selectedIconPath": "./static/images/table/b2.png", 
			"text": "主页2"
		},
		// #edif
		// #ifndef MP-WEIXIN		除了微信都编译
		{
			"pagePath": "pages/A/A",
			"iconPath": "/static/images/table/a1.png",
			"selectedIconPath": "./static/images/table/a2.png", 
			"text": "A页面"
		},{
			"pagePath": "pages/B/B",
			"iconPath": "/static/images/table/b1.png",
			"selectedIconPath": "./static/images/table/b2.png", 
			"text": "B页面"
		},
		// #endif
		{
			"pagePath": "pages/C/C",
			"iconPath": "/static/images/table/c1.png",
			"selectedIconPath": "./static/images/table/c2.png",
			"text": "C页面"
		},
		{
			"pagePath": "pages/my/my",
			"iconPath": "/static/images/table/e1.png",
			"selectedIconPath": "./static/images/table/e2.png", 
			"text": "我的"
		}
	]
}

home1页面

<template>
	<view>
		<!-- #ifdef MP-WEIXIN -->
		<view class="wx-page-box" v-if="isShow&&page_type==1"><!-- A页面 -->
			<pageA ></pageA >
		</view>
		<view class="wx-page-box" v-if="isShow&&page_type==2"><!-- D页面 -->
			<pageD ></pageD >
		</view>
		<view class="wx-page-box" v-if="isShow&&page_type==3"><!-- F页面 -->
			<pageF ></pageF >
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	import pageA from "../A/A"
	import pageD from "../D/D"
	import pageF from "../F/F"
	export default {
		data() {
			return {
				isShow:true,
				page_type:0
			};
		},
		onShow() {
			this.isShow=true
		},
		onHide() {
			this.isShow=false
		},
		components:{pageA ,pageD ,pageF },
	}
</script>

注意：
home2页面同home1页把本应为tabber页面的B,E,G页面当做组件引入添加逻辑判断展示，因这些页面已当做组件渲染所以他们的onLoad,onShow,onHide等生命周期不会执行只会执行created，mounted等生命周期。（具体看uniApp官方文档：框架→框架接口→生命周期），解决办法：ABDEFG页面虽然不会执行页面生命周期，但是会执行home1，home2的页面生命周期，可以通过包含但不限于组件传值等监听事件去执行ABDEFG页面原本放在onShow里面的逻辑。

然后其他的也没什么了，修改tabber图标，文字，那个api → setTabBarItem 也支持，直接改就行了，其他的当APP(小程序)进入时该跳哪个页面这个就比较简单了，自行辨别！