搜索了相关资料,发现uniapp支持全局引入组件和注册组件。但是还是需要在特定的Page页面写入组件标记。
全局组件使用
① 在main.js文件中引入组件
import jyNotice from '@/components/jy-notice/notice.vue';
② 在 main.js中注册组件
Vue.component('jyNotice',jyNotice)
③ 在需要引入全局组件的page页面中添加组件标记(没法代码注入,只能手工导入~~)
<jyNotice ref="jyNotice"></jyNotice>
注意:
每一个ref的名称保持一致,方便在代码里调用
由于各个tabbar的页面无法获取,即使调用页面通讯也无法在 getCurrentPages 中操作指定page(只能获取当前tabbar的pages),因此需要用全局变量保存数据,每一个组件中都维护该全局变量。
需要将global.js的配置变量导入全局共享 存储到 Vue实例的g对象中
import common from './global'
Vue.prototype.g = common;
④ 在global.js中定义全局变量 notice_data (名字不可更改,如需更改 得同时修改组件代码),规定字段名称如下
{
'kind': 'notice', //类型
'action': 'show', //行为
// 传入组件内部数据 data kind action 是为了规范代码 方便全局处理函数调用
'data': {
'id': 10, //消息ID 可随意 当该值发生更改时再次传入组件中将会覆盖原有消息
'text': '测试信息,可以不回复哟', //消息内容
'backgroundColor': '#fff000', //背景颜色
'color': '#333333', // 文字颜色
'time': '1379521451', // 消息消失的目标时间戳 可空
'callback': callback // 回调函数 点击之后的处理逻辑 可为空 只隐藏消息
}
}
⑤ 需要在main.js文件添加如下两个业务方法
//处理全局事件
handle_global(data) {
let pages = getCurrentPages();
let page = pages[pages.length - 1];
// 消息提示处理 规定show是显示 hide是隐藏
if (data.kind == 'notice') {
if (page.$vm.$refs.jyNotice == undefined) {
return false;
}
if (data.action == 'show') {
page.$vm.$refs.jyNotice.showUI();
} else if (data.action == 'hide') {
page.$vm.$refs.jyNotice.hide();
}
}
//其他类型 可依次添加处理..................
}
//页面重新显示时的检测操作 onShow声明周期函数触发
page_showed() {
//检测是否有消息通知
if (this.g.notice_data.data != undefined) {
this.handle_global(this.g.notice_data);
} else {
this.handle_global({
'kind': 'notice',
'action': 'hide'
});
}
//其他类型..................
}
由于无法跨tabbar通知 为了模拟全局消息在特定页面都能显示 需要 在每个page页面做如下处理
⑥ 在目标page页面onLoad周期函数添加页面通讯事件注册 方便产生消息时及时显示
uni.$on('global', (data) = > {
this.handle_global(data);
});
记得在onUnload中注销事件
uni.$off('global');
⑦ 在目标page页面onShow周期函数添加处理事件(无法主动处理每个页面 只能被动检测)
this.page_showed();
⑧ 模拟发送消息
setTimeout(() = > {
this.g.notice_data.data['time'] = api.timestamp(true) + 15; //显示15秒
this.g.notice_data.data['id'] = Math.floor(Math.random() * (1000 - 1)) + 1; //生成一个随机数充当消息ID
this.g.notice_data.data['text'] = '这是我的测试消息,15秒后将会消失,点击我还能跳转到订单详细页查看详细内容';
this.g.notice_data.data['backgroundColor'] = '#9bd0f7';
this.g.notice_data.data['color'] = '#ffffff';
//点击回调
this.g.notice_data.data['callback'] = function() {
fun.goto('/pages/orders/viewOrder?id=13013');
}
//模拟1.5s后产生一个新的消息
uni.$emit('global', this.g.notice_data);
}, 1500);
备注:
本组件依赖于CorlorUI 和Uniapp官方两个组件 uni-icons 和 uni-notice-bar