最近用uin-app的做項(xiàng)目，要弄推送通知的末贾，由于H5不能控制通知欄闸溃，便退而求其次要在頁(yè)面顯示通知，雖然覺得有點(diǎn)雞肋拱撵，但這是需求辉川，只能埋頭敲代碼，以為是要每個(gè)頁(yè)面都顯示拴测，所以自己畫了一個(gè)頁(yè)面乓旗，在全局掛載到body下，以下是效果圖集索，配合使用【前端】node+express模擬websocket通信更加

效果GIF.gif

在文件夾下創(chuàng)建了這兩個(gè)文件

image.png

notify-push-model.vue

<template>
    <!-- 通知欄 -->
    <view class="notify-push-model fadeIn" :class="[type, translate]" v-if="visible" @touchstart="start" @touchend="end">
        <view>{{ text }}</view>
        <view class="more-text" v-if="isShowMore">查看更多>></view>
        <view class="notify-push-model-close cross" @click.stop="onClose"></view>
    </view>
</template>

<script>
export default {
    props: {
        duration: {
            // 顯示時(shí)間
            type: Number,
            default: 3000
        },
        transition: {
            // 是否開啟動(dòng)畫
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            visible: false,
            type: '',
            text: '',
            translate: '',
            startData: {},
            closeDuration: 300,
            isShowMore: false
        };
    },
    computed: {
        isRing() {
            return this.$store.state.isRing; //是否鈴聲
        },
        isNotificationBar() {
            return this.$store.state.isNotificationBar; //是否通知
        },
        isShock() {
            return this.$store.state.isShock; //是否震動(dòng)
        }
    },
    methods: {
        // 通知音效
        playAudio() {
            const innerAudioContext = uni.createInnerAudioContext();
            innerAudioContext.autoplay = true;
            innerAudioContext.src = '/static/audio/notify-2.mp3';
            innerAudioContext.onPlay(() => {
                // console.log('通知音效 - 播放');
            });
            innerAudioContext.onError(res => {
                console.log('通知音效 - 報(bào)錯(cuò)',res.errCode);
            });
        },

        // 設(shè)備震動(dòng)
        onVibrate() {
            let vibrate = navigator.vibrate || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate;
            if (vibrate) {
                navigator.vibrate([500, 300, 400, 300]);
            } else {
                console.warn('不支持設(shè)備震動(dòng)屿愚！');
            }
        },

        open() {
            //開啟通知欄時(shí)
            if (this.isNotificationBar) {
                this.visible = true;
                if (this.isRing) {
                    setTimeout(() => {
                        this.playAudio();
                    }, 0);
                }
                if (this.isShock) {
                    this.onVibrate();
                }
            }
        },

        // 自動(dòng)隱藏
        autoHide() {
            setTimeout(() => {
                this.translate = 'top-leave';
                this.close('noMore');
            }, this.duration - this.closeDuration);
        },

        // 隱藏消息通知
        close(type) {
            setTimeout(() => {
                this.translate = '';
                this.visible = false;
                this.isShowMore = type === 'noMore' ? false : true; //如果是自己關(guān)閉的就隱藏更多,如果是消息太多關(guān)閉之前的就顯示更多
            }, this.closeDuration);
        },

        // 關(guān)閉按鈕
        onClose() {
            this.translate = 'top-leave';
            this.close('noMore');
        },

        // 開始滑動(dòng)
        start(e) {
            this.startData.clientX = e.changedTouches[0].clientX;
            this.startData.clientY = e.changedTouches[0].clientY;
        },

        // 滑動(dòng)結(jié)束
        end(e) {
            const subX = e.changedTouches[0].clientX - this.startData.clientX;
            const subY = e.changedTouches[0].clientY - this.startData.clientY;
            if (subY > 50 || subY < -50) {
                this.translate = '';
                console.log('上下滑');
            } else {
                if (subX > 100) {
                    //右滑
                    this.translate = 'right-leave';
                    this.close('noMore');
                } else if (subX < -100) {
                    //左滑
                    this.translate = 'left-leave';
                    this.close('noMore');
                } else {
                    this.translate = '';
                    console.log('滑動(dòng)無效');
                }
            }
        }
    }
};
</script>
<style lang="scss" scoped>
/*彈層動(dòng)畫（從上往下）*/
.fadeIn {
    -webkit-animation: fadeInDown 0.5s;
    animation: fadeInDown 0.5s;
}

@keyframes fadeInDown {
    0% {
        transform: translate3d(0, -100%, 0);
        opacity: 0;
    }
    100% {
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}

.top-leave {
    transform: translateY(-110%);
    transition-timing-function: cubic-bezier(0.36, 0.66, 0.04, 1);
}
.right-leave {
    transform: translateX(110%);
    transition-timing-function: cubic-bezier(0.36, 0.66, 0.04, 1);
}
.left-leave {
    transform: translateX(-110%);
    transition-timing-function: cubic-bezier(0.36, 0.66, 0.04, 1);
}

// 消息通知框
.notify-push-model {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2000;
    width: 100%;
    height: auto;
    min-height: 50rpx;
    font-size: 30rpx;
    font-family: PingFang-SC-Medium;
    color: #f1f1f1;
    background: rgba($color: #000000, $alpha: 0.8);
    border-radius: 10rpx;
    padding: 25rpx 70rpx 25rpx 30rpx;
    box-sizing: border-box;
    transition-property: width, height, transform, background, font-size;
    transition-duration: 0.3s, 0.3s, 0.3s, 0.3s, 0.3s;
    box-shadow: 0 2rpx 12rpx 0 rgba($color: #000000, $alpha: 0.1);
    // transform: translateY(-100%);
    opacity: 0.9;
}

// 關(guān)閉按鈕
.notify-push-model-close {
    position: absolute;
    top: 50%;
    right: 0;
    width: 30rpx;
    height: 30rpx;
    padding: 20rpx 20rpx;
    &::before,
    &::after {
        content: '';
        position: absolute;
        display: flex;
        justify-content: center;
        background: #f1f1f1;
        top: 0;
        left: 19rpx;
        width: 30rpx;
        height: 3rpx;
    }
    &::before {
        transform: rotate(45deg);
    }
    &::after {
        transform: rotate(-45deg);
    }
}

// 主要
.notify-push-model.primary {
    color: #f1f1f1;
    background: rgba($color: #0f88eb, $alpha: 1);
    .cross {
        &::before,
        &::after {
            background: #f1f1f1;
        }
    }
}

// 成功
.notify-push-model.success {
    color: #f1f1f1;
    background: rgba($color: #07c160, $alpha: 1);
    .cross {
        &::before,
        &::after {
            background: #f1f1f1;
        }
    }
}

// 警告
.notify-push-model.warning {
    color: #bb9f4c;
    background: rgba($color: #fff0d6, $alpha: 1);
    .cross {
        &::before,
        &::after {
            background: #bb9f4c;
        }
    }
}

// 危險(xiǎn)
.notify-push-model.danger {
    color: #f1f1f1;
    background: rgba($color: #f56c6c, $alpha: 1);
    .cross {
        &::before,
        &::after {
            background: #f1f1f1;
        }
    }
}

// 信息
.notify-push-model.info {
    color: #f1f1f1;
    background: rgba($color: #909399, $alpha: 1);
    .cross {
        &::before,
        &::after {
            background: #f1f1f1;
        }
    }
}

.more-text {
    font-size: 24rpx;
    text-align: right;
}
</style>

index.js

import notifyModel from '@/components/notify/notify-push-model'

const notify = {}
notify.install = (vue, options) => {
    const ToastCon = vue.extend(notifyModel)
    const ins = new ToastCon()
    ins.$mount(document.createElement('div'))
    document.body.appendChild(ins.$el)
    vue.prototype.$notify = {
        show(options) {
            if (ins.visible === true) { //如果已經(jīng)是顯示的
                ins.translate = 'top-leave';
                ins.close()
                setTimeout(() => {
                    if (typeof options === 'string') { // 對(duì)參數(shù)進(jìn)行判斷
                        ins.text = options
                    } else if (typeof options === 'object') {
                        Object.assign(ins, options) // 合并參數(shù)與實(shí)例
                    }
                    // ins.visible = true
                    ins.open()
                }, ins.closeDuration)

                if (typeof options === 'object' && options.auto) { //3s后自動(dòng)隱藏
                    ins.autoHide()
                }
            } else {
                if (typeof options === 'string') { // 對(duì)參數(shù)進(jìn)行判斷
                    ins.text = options
                } else if (typeof options === 'object') {
                    Object.assign(ins, options) // 合并參數(shù)與實(shí)例
                }
                // ins.visible = true
                ins.open()
            }

        },
        hide() {
            ins.visible = false
            ins.translate = 'top-leave';
            ins.close()
        }

    }
}

export default notify;

main.js

/*==================|-- * 消息推送 * start --|==================*/
// #ifdef H5
import notify from '@/components/notify/index'
Vue.use(notify)
// #endif
/*==================|-- * 消息推送 * end--|==================*/

使用方法

this.$notify.show({ type: 'success', text: '您有新的訂單汇跨，請(qǐng)注意查收！' });
//or
this.$notify.show('您有新的訂單妆距，請(qǐng)注意查收穷遂！' );

想模擬下在websocket通信下的狀態(tài)，請(qǐng)點(diǎn)擊這個(gè)頁(yè)面配合使用【前端】node+express模擬websocket通信