微信小程序基于Wepy开发全局消息通知

前言

时光荏苒，今天上到博客看着断更了的 11 月的博客，总感觉少了点什么，这么久没有写文章，无疑有一种断枝残柳的感觉；

博主最近一直在搞 IM 方面的业务，当然客户端主要是微信小程序，相信这个时候你一定有这个想法一闪而过：“微信本身都是一个即时沟通软件了，这么做不是多此一举吗？”，其原因在于如果两个用户不加好友那么就无法进行微信对话的，而小程序不同，只要用户访问进来我就可以与他发起对话，这样做主要是为了促进更进一步的沟通。

正文

首先我们需要进行 WebSocket 的会话连接，相关开发文档可以查阅微信官方（点我查看），这里我就不做基本的连接重连等相关 Socket 机制讲解，我们主要说说在小程序进行全局的消息监听与通知的一个思路与实现。

比如，我们先在 mixins 内封装一些基本方法：

// 获取 websocket 连接
ws(){return wepy.$instance.global.ws;}

/**
 * 系统通知
 * @param {String} content 通知消息内容
 * @param {String} from 触发者名称
 * @param {String} go 点击跳转至
 * @param {String} type 通知类型
 * @param {Integer} showtime 显示时长
 */
wsNotify(content,from,go,type='chat',showtime=5){if(this.wsData.wsTipsTimeoutEvent!=null){clearTimeout(this.wsData.wsTipsTimeoutEvent)
    }
    let times = showtime * 1000;
    let timeoutCall = setTimeout(()=>{
        this.wsData.tipShow = false;
        this.wsData.wsTipsTimeoutEvent = null;
        this.$apply();},times);
    this.wsData = {tipShow:true,tipData:content,type:type,from:from,wsTipsTimeoutEvent:timeoutCall,go:go}
    wx.vibrateLong({}) // 振动
    this.$apply()}

<template>
    <view class="ws-notify {{ws.tipShow ?'ws-notify-show':''}}">
        <view class='ws-notify-body'>
            <van-row>
                <van-col @tap="goDetail" span='3'><i class='iconfont ico'>&#xe759;</i></van-col>
                <van-col @tap="goDetail" span='20'>
                    <view>{{ws.from}}</view>
                    <view>{{ws.tipData}}</view>
                </van-col>
                <van-col span='1' @tap="close"><i class='iconfont ico-close'>&#xe624;</i></van-col>
            </van-row>
        </view>
    </view>
</template>
<script>
import wepy from 'wepy';
export default class WsNotify extends wepy.component {
    props = {
        ws:{
            type:Object,
            twoWay: true
        }
    }
    methods = {close(){
            this.ws.tipShow = false;
            clearTimeout(this.ws.wsTipsTimeoutEvent);
            this.ws.wsTipsTimeoutEvent = null;
        },
        goDetail(){
            wx.navigateTo({url:this.ws.go})
        }
    }
}
</script>
<style lang="less">
.ws-notify{
    position:fixed;
    top:20rpx;
    z-index:99999;
    width:100%;
    opacity: 0;
	-webkit-transform: translateZ(0) translateY(-100%);
    transition: all .4s ease-in-out;
    align-items: baseline;
    .ws-notify-body{
        min-height: 70rpx;
        width:90%;
        border-radius: 15rpx;
        background-color: #fff;
        color:#495060;
        border:1rpx solid #495060;
        font-size: 26rpx;
        margin:0 auto;
        padding:20rpx;
        line-height: 40rpx;
        i.ico,i.ico-close{
            color:#495060;
            font-size: 60rpx;
            line-height: 80rpx;
        }
        i.ico-close{font-size: 30rpx;}
    }
    &.ws-notify-show{-webkit-transform:translateZ(0) translateY(0);
        opacity:1;
    }
}
</style>

<wsNotify :ws.sync="wsData" @close.user="wsOnCloseNotify"/>

this.ws().listen('11',(res)=>{
    this.wsNotify('您有一条新的聊天信息，点我查看！',res.extras.username, 
    '/pages/cards/chat?id='+res.from)
})

后记

2018 年还剩下最后一周不到的时间，在这里提前恭祝大家新年快乐！