feature：添加tabbar的动态修改

app.js

@@ -1,5 +1,7 @@
 // app.ts
 import mqtt from './utils/mqtt';
+const eventBus = require('./utils/eventBus')
+
 //连接的服务器域名
 // const host = 'wxs://mqtt.test.radio1964.com';
 // const host = 'wxs://mqtt.test.radio1964.com:8884';
@@ -19,6 +21,7 @@ App({
     is_debug: 2, // 1 测试环境 // 2正式环境
     client: null,
     oneInitBluetooth: true,
+        systemInfo:null,
     //MQTT连接的配置
     options: {
       clientId: "wx_" + parseInt(Math.random() * 100 + 800, 10),
@@ -28,6 +31,7 @@ App({
       keepalive: 3,//每3秒发送一次心跳
     },
   },
+  eventBus: eventBus,
   /**
    * 连接设备
    * mqttCallback：mqtt回调统一方法
@@ -85,6 +89,13 @@ App({
     })
   },
 
+  changeUserRight() {
+    const i = wx.getStorageSync('rightId') || 0
+    const id = i === 0 ? 1 : 0
+    console.log("切换" + id);
+    wx.setStorageSync('rightId', id)
+    getApp().eventBus.emit('rightChange', id)
+  },
 
 
   // 订阅主题
@@ -183,7 +194,7 @@ App({
     wx.getSystemInfo({
       success: (res) => {
         let custom = wx.getMenuButtonBoundingClientRect();
-       
+       _this.globalData.systemInfo = res;
         _this.globalData.navBarHeight = res.statusBarHeight + custom.height + (custom.top - res.statusBarHeight) * 2;
         _this.globalData.MenuButtonheight = custom.height;
         _this.globalData.MenuButtonTop = custom.top;

app.json

@@ -18,26 +18,30 @@
     "pages/detail/detail"
   ],
   "tabBar": {
+    "custom": true,
+    "color": "#000",
+    "selectedColor": "#4d94f0",
+    "backgroundColor": "#fff",
     "borderStyle": "black",
     "list": [
       {
-        "pagePath": "pages/index/index",
-        "text": "首页",
-        "iconPath": "./img/index_unaction.png",
-        "selectedIconPath": "./img/index_action.png"
-      },
-      {
         "pagePath": "pages/home/home",
-        "text": "首页2",
-        "iconPath": "./img/index_unaction.png",
-        "selectedIconPath": "./img/index_action.png"
-      },
-      {
-        "pagePath": "pages/me/me",
-        "text": "我的",
-        "iconPath": "./img/me_unaction.png",
-        "selectedIconPath": "./img/me_action.png"
-      }
+        "text": "首页",
+        "iconPath": "/img/index_unaction.png",
+        "selectedIconPath": "/img/index_action.png"
+        },
+        {
+          "pagePath": "pages/index/index",
+          "text": "频道",
+          "iconPath": "/img/index_unaction.png",
+          "selectedIconPath": "/img/index_action.png"
+          },
+        {
+          "pagePath": "pages/me/me",
+          "text": "我的",
+          "iconPath": "/img/me_unaction.png",
+          "selectedIconPath": "/img/me_action.png"
+        }
     ]
   },
   "window": {

custom-tab-bar/index.js

@@ -0,0 +1,83 @@
+// custom-tab-bar/index.js
+Component({
+  data: {
+    rightId:wx.getStorageSync('rightId') || 0,
+    list: [],
+    list1: [
+      {
+        "pagePath": "../home/home",
+        "text": "首页",
+        "iconPath": "/img/index_unaction.png",
+        "selectedIconPath": "/img/index_action.png"
+        },
+        {
+          "pagePath": "../me/me",
+          "text": "我的",
+          "iconPath": "/img/me_unaction.png",
+          "selectedIconPath": "/img/me_action.png"
+        }
+    ],
+    list2: [
+      {
+        "pagePath": "../home/home",
+        "text": "首页",
+        "iconPath": "/img/index_unaction.png",
+        "selectedIconPath": "/img/index_action.png"
+        },
+        {
+          "pagePath": "../index/index",
+          "text": "频道",
+          "iconPath": "/img/index_unaction.png",
+          "selectedIconPath": "/img/index_action.png"
+          },
+        {
+          "pagePath": "../me/me",
+          "text": "我的",
+          "iconPath": "/img/me_unaction.png",
+          "selectedIconPath": "/img/me_action.png"
+        }
+    ]
+  },
+  attached() {
+    this.changeList()
+    getApp().eventBus.on('rightChange', data => {
+      if (data !== this.data.rightId) {
+        this.setData({
+          rightId: data
+        })
+        this.changeList()
+      }
+    })
+  },
+  detached() {
+    app.eventBus.off('rightChange')
+  },
+  methods: {
+    changeList() {
+      this.setData({
+        rightId: wx.getStorageSync('rightId') || 0
+      })
+      if (this.data.rightId === 1) {
+        this.setData({
+          list: this.data.list2
+        })
+      } else {
+        this.setData({
+          list: this.data.list1
+        })
+      }
+    },
+    switchTab(e) {
+      const data = e.currentTarget.dataset
+      const url = data.path
+      console.log("点击切换"+ url);
+      wx.switchTab({
+        url: url,
+        fail:function(e){
+          console.log("点击切换失败"+ e.errMsg);
+
+        }
+      })
+    }
+  }
+})

custom-tab-bar/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

custom-tab-bar/index.wxml

@@ -0,0 +1,8 @@
+<!--custom-tab-bar/index.wxml-->
+<cover-view class="tab-bar">
+  <cover-view class="tab-bar-border"></cover-view>
+  <cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
+    <cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
+    <cover-view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view>
+  </cover-view>
+</cover-view>

custom-tab-bar/index.wxss

@@ -0,0 +1,39 @@
+/* custom-tab-bar/index.wxss */
+.tab-bar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 48px;
+  background: white;
+  display: flex;
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+.tab-bar-border {
+  background-color: rgba(0, 0, 0, 0.33);
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 1px;
+  transform: scaleY(0.5);
+}
+
+.tab-bar-item {
+  flex: 1;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.tab-bar-item cover-image {
+  width: 27px;
+  height: 27px;
+}
+
+.tab-bar-item cover-view {
+  font-size: 10px;
+}

pages/home/home.js

@@ -22,11 +22,14 @@ Page({
       },
       isNotruter: false,
       deviceList: [],
-      bannerList:[],
+      bannerList: [],
       isLoginWx: false,
       selectIndex: -1,
     }
   },
+  changeRole() {
+    app.changeUserRight()
+  },
   // 删除设备
   deleteDeviceTap: function () {
 
@@ -36,17 +39,18 @@ Page({
 
   },
 
-  deviceItemTap: function() {
+  deviceItemTap: function () {
     this.setData({
       // selectIndex = index
-    }); 
+    });
+  },
+  changeDeviceTap: function () {
   },
 
   /**
    * 生命周期函数--监听页面加载
    */
   onLoad(options) {
-
   },
 
   /**
@@ -60,15 +64,29 @@ Page({
    * 生命周期函数--监听页面显示
    */
   onShow() {
+    if (typeof this.getTabBar === 'function' &&
+      this.getTabBar()) {
+      this.getTabBar().setData({
+        selected: 0
+      })
+    }
+    app.eventBus.on('rightChange', data => {
+      if (data !== this.data.rightId) {
+        this.setData({
+          rightId: data
+        })
+      }
+    })
+
     this.setData({
       deviceList: [
-        {"devName": "名称1","state": "online","pic": "url","power": 40,},
-        {"devName": "名称2","state": "online","pic": "url","power": 50,},
-        {"devName": "名称3","state": "online","pic": "url","power": 60,},
+        { "devName": "名称1", "state": "online", "pic": "url", "power": 40, },
+        { "devName": "名称2", "state": "online", "pic": "url", "power": 50, },
+        { "devName": "名称3", "state": "online", "pic": "url", "power": 60, },
       ],
       selectIndex: 0,
       isLoginWx: true,
-      bannerList:["https://img1.baidu.com/it/u=2003442481,2528062378&fm=253&fmt=auto&app=138&f=JPG?w=499&h=182","https://hbimg.huabanimg.com/0ff93215a6d8d1c5f80117fdbfa24936dbd9097026ad99-CNduY8_fw658","https://img.zcool.cn/community/0177ed5f365bdaa801215aa0a0c1c3.jpg@1280w_1l_2o_100sh.jpg"],
+      bannerList: ["https://img1.baidu.com/it/u=2003442481,2528062378&fm=253&fmt=auto&app=138&f=JPG?w=499&h=182", "https://hbimg.huabanimg.com/0ff93215a6d8d1c5f80117fdbfa24936dbd9097026ad99-CNduY8_fw658", "https://img.zcool.cn/community/0177ed5f365bdaa801215aa0a0c1c3.jpg@1280w_1l_2o_100sh.jpg"],
     });
   },
 

pages/home/home.wxml

@@ -25,9 +25,12 @@
 
           <image class="detailPageC" src="../../img/a6.png" mode="scaleToFill" bind:tap="devieDetailPageTap" />
         </view>
+        <view class="changeDeviceC" bind:tap="changeDeviceTap"> 切换设备</view>
       <!-- </view> -->
     <view class="deviceEmptyClass" wx:if="{{deviceList && deviceList.deviceList==0 || !isLoginWx}}">
       + 添加设备
     </view>
+    <button type="primary" bindtap="changeRole">example-改变权限</button>
+
   </scroll-view>
 </view>

pages/index/index.js

@@ -24,8 +24,23 @@ Page({
     thisDeviceMac: null,
     battery: 4, // 0≤电量<20，0格
     newVersion: false,
+    rightId:wx.getStorageSync('rightId') || 0
   },
   onShow() {
+    if (typeof this.getTabBar === 'function' &&
+      this.getTabBar()) {
+      this.getTabBar().setData({
+        selected: 1
+      })
+    }
+    app.eventBus.on('rightChange', data =>{
+      if(data !== this.data.rightId){
+        this.setData({
+          rightId: data
+        })
+      }
+    })
+
     if((!this.data.isOneLoading)) {
       wx.getStorage({
         key: 'userInfo',
@@ -50,6 +65,9 @@ Page({
       });
     };
   },
+  changeRole(){
+    app.changeUserRight()
+  },
   onLoad() {
     _this = this;
     // 版本自动更新代码

pages/me/me.js

@@ -15,6 +15,11 @@ Page({
       title: '', //导航栏 中间的标题
     },
     islogin: false,
+    rightId:wx.getStorageSync('rightId') || 0
+
+  },
+  changeRole(){
+    app.changeUserRight()
   },
 
   /**
@@ -85,6 +90,28 @@ Page({
    * 生命周期函数--监听页面显示
    */
   onShow() {
+    // 当前的index
+    let num = this.data.rightId === 1 ? 2 : 1
+    if (typeof this.getTabBar === 'function' &&
+      this.getTabBar()) {
+      this.getTabBar().setData({
+        selected: num
+      })
+    }
+    app.eventBus.on('rightChange', data =>{
+      if(data !== this.data.rightId){
+        this.setData({
+          rightId: data
+        })
+        num = this.data.rightId === 1 ? 2 : 1
+        if (typeof this.getTabBar === 'function' &&
+          this.getTabBar()) {
+          this.getTabBar().setData({
+            selected: num
+          })
+        }
+      }
+    })
     this.onLoad();
   },
 

utils/eventBus.js

@@ -0,0 +1,32 @@
+const eventBus = {
+  // 存储所有事件和对应的订阅者
+  eventList: new Map(),
+  // 订阅事件
+  on(event, callback) {
+    if (!this.eventList.has(event)) {
+      this.eventList.set(event, new Set())
+    }
+    this.eventList.get(event).add(callback)
+  },
+  // 取消订阅事件
+  off(event, callback) {
+    if (this.eventList.has(event)) {
+      const callbacks = this.eventList.get(event)
+      callbacks.delete(callback)
+      if (callbacks.size === 0) {
+        this.eventList.delete(event)
+      }
+    }
+  },
+  // 发布事件
+  emit(event, ...args) {
+    if (this.eventList.has(event)) {
+      const callbacks = this.eventList.get(event)
+      callbacks.forEach((callback) => {
+        callback.call(null, ...args)
+      })
+    }
+  }
+}
+
+module.exports = eventBus