Puock主题已经正式发售,一款颜值在线的多功能WordPress主题,赶快戳我来看看吧

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

2,640次阅读
15条评论

前言

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

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

正文

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

在这里我的思路是这样的:Socket连接对象放入到小程序App的全局Global数据中,当进入到页面的时候,引入封装好的mixins,然后进行通知的事件注册,然后引入相关通知的组件,就可以实现全局消息通知的这样一个需求,实际上是很简单的。

比如,我们先在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>
这里上面就是一些核心的基本功能,再进入一个小程序页面的时候,引入对应的组件并调用,然后在onShow的方法内进行事件监听注册,例如新消息的cmd为11,则为:
<wsNotify :ws.sync="wsData" @close.user="wsOnCloseNotify"/>
this.ws().listen('11',(res)=>{
    this.wsNotify('您有一条新的聊天信息,点我查看!',res.extras.username, 
    '/pages/cards/chat?id='+res.from)
})
到这一步,基本的功能就已经实现了,本文主要是讲解一个思路,其实现方法请根据项目的业务进行调整。

后记

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

13
憧憬Licoy
版权声明:本站原创文章,由憧憬Licoy于2018年12月25日发表,共计4514字。
转载提示:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(15条评论)
Loading...
头条 评论达人LV.1
2019-04-11 23:10:42 回复

文章不错支持一下,非常喜欢

今日新闻 评论达人LV.1
2019-04-07 23:00:51 回复

文章不错支持一下吧

wordpress建站 评论达人LV.1
2019-02-01 08:50:50 回复

小程序过于的谨慎和封闭了

基地小组 评论达人LV.1
2019-01-22 19:38:28 回复

这里借鉴了,谢谢不错

基地小组 评论达人LV.1
2019-01-21 13:01:30 回复

之前用即时聊天来实现,这里借鉴了,谢谢不错

青山 评论达人LV.1
2019-01-17 19:03:39 回复

药不能停,博客不能停!新年快乐

Karolina 评论达人LV.1
2019-01-12 12:43:00 回复

你好Licoy,我一直在等你回复我关于文章订单的电子邮件。你能回复我吗?谢谢

青山 评论达人LV.1
2019-01-11 19:02:17 回复

你快成了一个月一更了!新年快乐!

VPS234 评论达人LV.1
2019-01-07 12:29:15 回复

不错,之前用即时聊天来实现,这里借鉴了,谢谢不错 :smile:

轩陌 评论达人LV.1
2018-12-25 21:18:41 回复

:wink: 大佬666