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

本案例，Message 身为组件，使用不了任何钩子来重新获取 this.getMessageList() 消息列表

使用 props 父子传参，因为 Message 组件使用不了页面生命周期从而无法拿到传递过来的数据

使用 watch 监听不到 props

更不建议使用本地存储，那样和 props 结果差不多

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

从而实现了实时获取

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

父组件 Tabbar

	
		
			
			
			
			
			
		
		
			
			
			
				
					
						
					
					
						
							
								
									
									{{item.text}}
									
									
										{{presentReadState  {}
				_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.data
						let 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为组件，其他方法不太好用，使用事件总线发送全局事件 refreshMessageList
			uni.$emit('refreshMessageList');
			this.tabBar.list[2].hasUnreadMessage = uni.getStorageSync("inline-msg")
		},
		mounted() {
			this.tabBar.list[2].hasUnreadMessage = uni.getStorageSync("inline-msg")
		},
	}

其中一个子组件 Message

	
		
		
			
			
				消息
			
		
		
		
			
		
		
		
			
				
					
				
				
					
						{{item.groupName}}
						{{item.lastMessage}}
					
					
						{{item.changeTime.slice(5,16)}}
						{{item.unRead}}
					
				
			
		
		
		
		
	


	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 = true
					return false
				}
				uni.navigateTo({
					url: '/pages/tools/chat/sys-message?item=' + JSON.stringify(item)
				})
			}
		},
	}