• 0
  • 0

Uniapp 组件- 全局顶部消息通知组件

2020-02-15 2370 0 admin 所属分类:Hbuilder

搜索了相关资料,发现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

下载地址

返回顶部