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

6,735次阅读
15 条评论

共计 2763 个字符,预计需要花费 7 分钟才能阅读完成。

前言

时光荏苒,今天上到博客看着断更了的 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 年还剩下最后一周不到的时间,在这里提前恭祝大家新年快乐!

正文完
使用官方微信小程序体验更多功能
post-qrcode
 13
憧憬Licoy
版权声明:本站原创文章,由 憧憬Licoy 于2018-12-25发表,共计2763字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(15 条评论)
头条 评论达人 LV.1
2019-04-11 23:10:42 回复

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

 Windows  Chrome  中国广西贺州市联通
今日新闻 评论达人 LV.1
2019-04-07 23:00:51 回复

文章不错支持一下吧

 Windows  Chrome  中国广西贺州市联通
wordpress建站 评论达人 LV.1
2019-02-01 08:50:50 回复

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

 Windows  Chrome  中国四川省成都市电信
基地小组 评论达人 LV.1
2019-01-22 19:38:28 回复

这里借鉴了,谢谢不错

 Windows  Chrome  中国辽宁省大连市联通
基地小组 评论达人 LV.1
2019-01-21 13:01:30 回复

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

 Windows  Chrome  中国辽宁省大连市联通
青山 评论达人 LV.1
2019-01-17 19:03:39 回复

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

 Windows  Chrome  中国江西省萍乡市电信
Karolina 评论达人 LV.1
2019-01-12 12:43:00 回复

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

 Windows  Chrome  印度尼西亚西爪哇万隆Telin
青山 评论达人 LV.1
2019-01-11 19:02:17 回复

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

 Windows  Chrome  中国江西省萍乡市电信
VPS234 评论达人 LV.1
2019-01-07 12:29:15 回复

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

 Windows  Chrome  中国四川省成都市电信
轩陌 评论达人 LV.1
2018-12-25 21:18:41 回复

:wink: 大佬666

 Macintosh  Chrome  中国上海上海市电信