微信小程序：监听二维码是否被使用，开启全局websocket，在其它页面接收消息

业务场景

适用于：在其它页面悬浮二维码，用户点击后在当前页面展示二维码，监听是否被扫，接收消息消费了多少钱，五秒后重新展示乘车码，用户可关闭二维码展示栏，继续浏览页面。

1.在app.js中开启websocket，并暴露接收消息的方法

onLaunch: function(options) {const that = thisthat.websocket()},
//开启建链websocket() {const that = this;that.globalData.SocketTask = wx.connectSocket({url: 'wss://industry2.rengu.cc/szt-traffic/ws',success: res => {console.log('连接', res);},fail: err => {console.log('出现错误啦！！' + err);wx.showToast({title: '网络异常！',})}})that.globalData.SocketTask.onOpen((e) => {console.log('连接成功！');that.globalData.SocketTask.send({ data: JSON.stringify({ 'Websocket-Userid': 'traffic-consumeNotice-' + userId }) });count = 0; // 清零重连统计数据that.heartbeat(that.globalData.SocketTask); // 发送心跳包});that.globalData.SocketTask.onClose((e) => {console.log(e);console.log('连接已关闭！');that.reconnect()});that.globalData.SocketTask.onError((e) => {console.log(e);console.log('连接出错！');that.reconnect()});},heartbeat(ws) {timer && clearInterval(timer);timer = setInterval(() => {if (ws.readyState === 3) {ws.close();}ws.send({ data: JSON.stringify({ 'Websocket-Userid': 'traffic-consumeNotice-' + userId }) });}, 30000)},reconnect(ws) {count++;if (count > 2) {wx.showToast({ title: '语音播报服务连接失败，请刷新后重试！', icon: "none" });return}console.log('开始重连');setTimeout(function () {global.ws = connect();}, 1000)},

2.封装接收消息的工具类socket_code.js

var e = require("./trade.js"),t = require("./token.js"),r = require("./request.js"),a = getApp();
var TimeCode;const SocketTask = a.globalData.SocketTask;module.exports = {//申、生码changeCode: function (qrcode) {r.request(url, {}, "GET").then((e) => {console.log(e)if (e.statusCode == 200 && e.data.returncode === "00") {getCurrentPages()[getCurrentPages().length - 1].setData({ code: e.data.qrcode, money: Number(e.data.money / 100).toFixed(2)});qrcode.makeCode(e.data.qrcode);wx.setStorageSync("qrCode", e.data.qrcode)refresh(qrcode)} else if (e.statusCode == 200 && e.data.returncode === "02") {getCurrentPages()[getCurrentPages().length - 1].setData({ code: '余额不足，请充值', money: Number(e.data.money / 100).toFixed(2) });     } else if (e.statusCode == 200 && e.data.returncode === "01") {getCurrentPages()[getCurrentPages().length - 1].setData({ code: e.data.error });} else { getCurrentPages()[getCurrentPages().length - 1].setData({ code: '请求失败' });}})},//每隔五分钟刷新一次二维码refresh: function (qrcode){TimeCode = setInterval(function () {changeCode(qrcode);}, 300000)},
//清除定时器clearCode: function (qrcode){clearInterval(TimeCode)},//接收websocket信息getMessage:function(){SocketTask.onMessage((e) => {console.log('接收消息')console.log(e)var obj = JSON.parse(e.data)if (obj.returncode == "00") {console.log('收到消息')if (wx.getStorageSync('qrcode') == obj.qrcode) {console.log("重复发送")} else {wx.setStorageSync('qrcode', obj.qrcode)getCurrentPages()[getCurrentPages().length - 1].setData({ show: false, basefare: Number(obj.basefare / 100).toFixed(2), transamt: Number(obj.transamt / 100).toFixed(2), discountprice: Number(obj.discountprice / 100).toFixed(2) })setTimeout(function () {getCurrentPages()[getCurrentPages().length - 1].setData({ show: true })getCurrentPages()[getCurrentPages().length - 1].changeCode(qrcode)}, 8000)}}});},
};

3.在其它js页面生码并监听、接收消息

在js页面引入生码js，接收websocket的js

var QRCode = require('../../utils/qrcode.js');
var notice = require("../../utils/socket_code.js");
var qrcode = new QRCode('canvas', {//注意id唯一width: 250,height: 250,colorDark: "#000000",colorLight: "#ffffff",correctLevel: QRCode.CorrectLevel.H,
});Page({data: {show: true,codeShow: false,},onShow: function () {notice.getMessage()},modalClose: function() {var ts = thists.setData({codeShow: false})},changeCode: function() {var ts = thists.setData({codeShow: true})notice.changeCode(qrcode)},})

wxml页面

<!-- 展示乘车码 -->
<view class="code_mode" bindtap="changeCode"><image src="../../img/code.png" class="code"></image><view class="code_text">去乘车</view>
</view>
<!-- 弹窗 -->
<view wx:if="{{codeShow}}" class="modal"><view class="mask"></view><image src="../../img/close.png" class="modal_close" bindtap="modalClose"></image><canvas wx:if='{{show}}' class='canvas' canvas-id='canvasRecharge'></canvas><view wx:if='{{!show}}' class='suc'><view style='padding: 60rpx 0;'>扫码成功</view><view style='margin-top: 20rpx;'>￥{{transamt}}</view><view style='margin-top: 30rpx;font-size:30rpx;'>正常消费：￥{{basefare}}</view><view style='margin-top: 20rpx;font-size:30rpx;color:#FF9800'>优惠金额：￥{{discountprice}}</view></view>
</view>

wxss样式

.code_mode{width: 110rpx;height: 130rpx;text-align: center;position: fixed;bottom: 100rpx;right: 20rpx;background-color: #eee;
}
.code{width: 80rpx;height: 80rpx; margin-top: 6rpx;
}
.code_text{font-size: 22rpx;color: rgb(0, 153, 255);text-align: center;text-decoration:underline;
}.modal{position: fixed;top: 0;left: 0;z-index: 100;width: 100vw;height: 100vh;
}
.modal_close{width: 50rpx;height: 50rpx;display: flex;float: right;
}
.mask {position: absolute;top: 0;left: 0;width: 100vw;height: 100vh;background: rgba(0, 0, 0, 0.5);z-index: -1;
}
.canvas{width: 250px;height: 250px; margin: 320rpx auto; line-height: 250rpx;
}
.suc {width: 230px;height: 230px;background-color: #fff;margin: 320rpx auto;font-size: 36rpx;text-align: center;
}

微信小程序：监听二维码是否被使用，开启全局websocket，在其它页面接收消息相关推荐

微信小程序获取扫描二维码后携带的参数
微信小程序获取扫描二维码后携带的参数 1.decodeURIComponent解析生成二维码的链接. /*** 生命周期函数--监听页面加载*/onLoad: function(options) {i ...
微信小程序条码、二维码生成模块
代码地址如下: http://www.demodashi.com/demo/13994.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
基于JavaSSM和微信小程序的智能二维码门禁管理系统
目录 1 引言 2 2 系统需求分析 2 2.1开发环境 2 2.2关键技术 2 2.2.1 Spring 框架 2 2.2.2 Spring MVC 框架 3 2.2.3 Mybatis 3 2.2 ...
微信小程序实现生成二维码功能并下载到本地
微信小程序实现生成二维码功能并下载到本地背景实现备注背景有这样一个需求,后台返回了url地址,微信小程序将url地址转成二维码图片,展示在页面上,并且该二维码图片可下载到用户手机相册中实现 ...
转载：在微信小程序中生成二维码
目录转载: weapp-qrcode-canvas-2d 仓库地址测试环境使用安装方法1:直接引入 js 文件安装方法2:npm安装安装完成后调用例子1:没有使用叠加图片例子2:使用叠 ...
微信小程序扫普通二维码跳转
最近一需求,是要做小程序扫普通二维码跳转.看了看微信文档一头雾水,写的不是很清楚. 官方文档传送门:https://developers.weixin.qq.com/miniprogram/intro ...
微信小程序之生成二维码
首先先扯一些题外话,本人是java行业的小白,因为是改行做的java,之前的工作就不提了. 之前写过几篇随便,刚看了下,觉得比较low,就都删了,所以也算是进入java行业的第一篇随笔,如果有表述上或 ...
【微信小程序】生成二维码方式
前言基础库 2.12.0 开发者工具 1.03.2008270 生成二维码方式微信小程序的二维码可分为: 微信生成的二维码普通链接二维码微信生成的二维码,是指调用微信小程序服务端接口 wxac ...
uni-app微信小程序扫普通二维码分享小程序
这里需要扫普通二维码分享的话就需要先产生二维码了文档:https://github.com/yingye/weapp-qrcode 1.绘制二维码我这里使用的是资源是weapp.qrcode.es ...
微信小程序扫描普通二维码跳转到小程序指定页面
这个功能的逻辑是什么呢? 二维码就相当于是一个链接相当于我们点击一个链接跳转到另一个页面只不过这里是扫码的形式如何操作 1.首先我们需要在微信公众平台的开发管理-->开发设置,找到(扫普通 ...

微信小程序：监听二维码是否被使用，开启全局websocket，在其它页面接收消息

业务场景

1.在app.js中开启websocket，并暴露接收消息的方法

2.封装接收消息的工具类socket_code.js

3.在其它js页面生码并监听、接收消息

微信小程序：监听二维码是否被使用，开启全局websocket，在其它页面接收消息相关推荐

最新文章

热门文章