记录一下小程序自定义导航栏消息未读已读小红点，以及分组件的消息数量数据实时读取

本案例，Message 身为组件，使用不了任何钩子来重新获取 this.getMessageList() 消息列表
使用 props 父子传参，因为 Message 组件使用不了页面生命周期从而无法拿到传递过来的数据
使用 watch 监听不到 props
更不建议使用本地存储，那样和 props 结果差不多

案例中采用的是发送全局事件的形式，在父组件onShow后，因为子组件是父组件的一部分，所以在消息详情中返回子组件后，其实就是在父组件的onShow中调用了 refreshMessageList 方法重新获取子组件 Message 的消息列表
从而实现了实时获取

若不做自定义 tabbar 的话, 没有这么麻烦的去试探数据传输

父组件 Tabbar

<template><uni-transition mode-class="fade" :duration="200" :show="true"><view class="main_box"><index v-if="currentIndex === 0"></index><myDoctor v-if="currentIndex === 1"></myDoctor><message v-if="currentIndex === 2"></message><prescript v-if="currentIndex === 3"></prescript><my v-if="currentIndex === 4"></my></view><view class="foot_box"><!--  --><uni-transition mode-class="fade" :duration="200" :show="true"><view><view class="tab-content"><slot /></view><view class="tabbar"><view class="navigator"><view ref='warpper' class="warpper"><view ref="navItem" class="navigator-item" v-for="(item,index) in tabBar.list":key="item.pagePath" @click="switchTab(item,index)" :data-index='index'><img :src="item.iconPath" class="icon" v-if="selectedIndex !== index"><img :src="item.selectedIconPath" :class="[item.selectIconStyle ? 'icon-select' : 'icon']" v-else><text :class="['item-text',{'text-active':selectedIndex === index}]">{{item.text}}</text><view v-if="item.hasUnreadMessage && presentReadState" class="unread-dot">{{presentReadState < 99 ? presentReadState : ''}}</view></view></view></view></view></view></uni-transition></view></uni-transition></template><script>import {FILE_URL} from '../../api/base_api.js';import {GET_MESSAGE} from '../../api/user.js';var Hub = require('../../utils/signalR.js')import index from '@/pages/index/index.vue'import myDoctor from '@/pages/my-doctor/my-doctor.vue'import message from '@/pages/message/message.vue'import prescript from '@/pages/prescript/prescript.vue'import my from '@/pages/person/person.vue'export default {components: {index,my,message,prescript,myDoctor},data() {return {// 定义一个目前的 unRead 状态，若是集合起来大于 0，那么就作为标记 unRead 数量presentReadState: 0,messageList: [],pageIndex: 1,pageSize: 10,currentIndex: uni.getStorageSync('selectedIndex') || 0,selectedIndex: uni.getStorageSync('selectedIndex') || 0, // 标记tabBar: {list: [{pagePath: "pages/index/index",text: "首页",iconPath: "../../static/images/tabbar/home.png",selectedIconPath: "../../static/images/tabbar/home1.png"},{pagePath: "pages/my-doctor/my-doctor",text: "我的医生",iconPath: "../../static/images/tabbar/doctor.png",selectedIconPath: "../../static/images/tabbar/doctor1.png"},{pagePath: "pages/message/message",text: "消息",iconPath: "../../static/images/tabbar/message.png",selectedIconPath: "../../static/images/tabbar/message1.png",hasUnreadMessage: uni.getStorageSync("inline-msg") // 记录 未读 | 已读},{pagePath: "pages/prescript/prescript",text: "药膳商城",iconPath: "../../static/images/tabbar/mingyao2.png",selectedIconPath: "../../static/images/tabbar/mingyao3.png",selectIconStyle: true},{pagePath: "pages/person/person",text: "我的",iconPath: "../../static/images/tabbar/my2=.png",selectedIconPath: "../../static/images/tabbar/my1.png"}]},}},methods: {loadsocket() {var _this = this;if (_this.timeout)clearTimeout(_this.timeout);_this.hubConnect = new Hub.HubConnection();_this.hubConnect.token = uni.getStorageSync('WX_TOKEN')_this.hubConnect.start(FILE_URL + "/api/chathub");_this.hubConnect.onOpen = res => {}_this.hubConnect.on("Receive", function(res) {console.log("有数据了", res);uni.setStorageSync("inline-msg", true)})_this.hubConnect.on("UsingCode", res => {})_this.hubConnect.on("UsedCode", res => {})},switchTab(item, index) {this.currentIndex = index;this.tabBar.list.forEach((v, i) => {if (item.pagePath === v.pagePath) {uni.setStorageSync('selectedIndex', index);}})this.selectedIndex = uni.getStorageSync('selectedIndex')},// 因为 message 为组件onShow 不可使用，所以这里想使用父子传参的方式解决消息页的未读消息处理// 此处更改为记录未读数量getMessageList() {GET_MESSAGE({page: this.pageIndex,limit: this.pageSize}).then(res => {if (res.data) {this.messageList = res.datalet readNumberList = this.messageList.map(item => item.unRead)this.presentReadState = readNumberList.reduce((accumulator, currentValue) =>accumulator + currentValue, 0);if (this.presentReadState > 0) { // 若是消息数量大于0的话，初始化一下inline-msg状态uni.setStorageSync("inline-msg", true)}}})},},onShow() {this.loadsocket()this.getMessageList()// 父子传参方法也不好用，message组件中没有onShow方法，而且watch监听不到props// message为组件，其他方法不太好用，使用事件总线发送全局事件 refreshMessageListuni.$emit('refreshMessageList');this.tabBar.list[2].hasUnreadMessage = uni.getStorageSync("inline-msg")},mounted() {this.tabBar.list[2].hasUnreadMessage = uni.getStorageSync("inline-msg")},}</script>

其中一个子组件 Message

<template><view class="message"><view class="header"><image src="../../static/images/index/index-topbar-back.png" mode="" class="back-img"></image><view class="top-bar"><view class="name">消息</view></view></view><view class="none" style="padding-top: 200rpx;" v-if="!messageList.length"><u-empty mode='list' text='暂无消息'></u-empty></view><view class="list" v-else><view class="item" v-for="(item,index) in messageList" :key="index" @click="handleToChat(item)"><view class="avatar"><image :src="item.groupImage" mode=""></image></view><view class="msg-info"><view class="left"><view class="name">{{item.groupName}}</view><view class="msg">{{item.lastMessage}}</view></view><view class="right"><view class="date">{{item.changeTime.slice(5,16)}}</view><view class="no-read-count" v-if="item.unRead">{{item.unRead}}</view></view></view></view></view><!--  --><!--  --></view></template><script>import {APP_BASE_URL,FILE_URL} from '../../api/base_api.js';import {GET_MESSAGE} from '../../api/user.js';// import AuthLogin from '../common/auth-login.vue'var Hub = require('../../utils/signalR.js')export default {data() {return {messageList: [],pageIndex: 1,pageSize: 10,// isShowLogin: false, //登录弹窗}},watch: {presentReadState(newValue, oldValue) {}},components: {// AuthLogin},onHide() {console.log('断开')this.hubConnect.close();},mounted() {if (uni.getStorageSync('WX_TOKEN')) {this.messageList = []this.getMessageList()// 当回到 message 组件中(其实就是在父组件的onShow中)，调用全局事件refreshMessageList，来重置消息列表uni.$on('refreshMessageList', this.getMessageList);}if (this.hubConnect) {if (this.hubConnect.connection == null || !this.hubConnect.openStatus) {this.loadsocket();}} else {this.loadsocket();}},beforeDestroy() {// 销毁uni.$off('refreshMessageList', this.getMessageList);},methods: {// 获取弹窗传值// getLoginData(status) {// this.isShowLogin = status// },// 获取消息列表getMessageList() {GET_MESSAGE({page: this.pageIndex,limit: this.pageSize}).then(res => {if (res.data) {this.messageList = res.data}})},// 获取getcode() {if (this.hubConnect && this.hubConnect.connection != null && this.hubConnect.openStatus) {this.hubConnect.send("GetCode", 3);this.xunhuan();}},// 链接loadsocket() {var _this = this;if (_this.timeout)clearTimeout(_this.timeout);// connection_this.hubConnect = new Hub.HubConnection();_this.hubConnect.token = uni.getStorageSync('WX_TOKEN')_this.hubConnect.start(FILE_URL + "/api/chathub");_this.hubConnect.onOpen = res => {}_this.hubConnect.on("Receive", res => {uni.setStorageSync("inline-msg", true)_this.messageList = []_this.getMessageList()})_this.hubConnect.on("UsingCode", res => {_this.show = true;})_this.hubConnect.on("UsedCode", res => {})},// 跳转聊天handleToChat(item) {if (!uni.getStorageSync('WX_TOKEN')) {// this.isShowLogin = truereturn false}uni.navigateTo({url: '/pages/tools/chat/sys-message?item=' + JSON.stringify(item)})}},}</script>