之前上个公司做过一个二维码付款功能,涉及到websocket功能,直接上代码

小程序onShow方法下加载:

/**  页面的初始数据 **/
data: {
code: "",
onshowCode: "",
hiden: true,
show: false,
array: {},
has_password: "",
openid: "",
showPop: false,
pwd: "",
num: "",
cashierid: "",
socketOpen: false
},
onShow: function() {
var _this = this;
a.get("ipass.get_user_qr", {}, function(e) {
//获取到openID(传的参数)
console.log(e);
var openid = e.openid;
console.log(openid);
_this.setData({
array: e,
openid: openid
});
var token = _this.data.openid;
var socketOpen = false;
var data = { type: "ready", uid: token }; // 给websocket传值
var socketMsgQueue = JSON.stringify(data); // 将值转化为字符串
// 连接websocket
wx.connectSocket({
url: "wss://paytest.kuaiyunma.com", //websocket 地址
success(e) {
console.log(e);
}
});
// 监听WebSocket 连接打开事件
wx.onSocketOpen(function(res) {
console.log("123");
_this.data.socketOpen = true;
console.log("数据发送中" + socketMsgQueue);
_this.sendSocketMessage(socketMsgQueue); // 自定义方法
});
// 监听WebSocket 错误事件
wx.onSocketError(function(res) {
console.log("WebSocket连接打开失败,请检查!");
});
// 监听WebSocket 接受到服务器的消息事件
wx.onSocketMessage(function(res) {
console.log(JSON.parse(res.data));
//获取到websocket返回的值
var res = JSON.parse(res.data);
//将值转化为对象
var num = res.fee;
//定义传过来的数值
var cashierid = res.cashierid;
// 根据传的值进行判断
if (res.type == "password") {
_this.setData({
showPop: true,
num: num,
res: res,
cashierid: cashierid
});
} else if (res.type == "pay_result") {
if (res.result == "ok") {
a.post(
"ipass.pay",
{
cashierid: _this.data.cashierid,
money: _this.data.num
},
function(e) {
console.log(e);
if (e.result.success === true) {
wx.showToast({
title: "支付成功!",
icon: "success"
});
} else {
wx.showToast({
title: "支付失败",
icon: "none"
});
}
_this.clearNum();
}
);
} else {
wx.showToast({
title: "支付失败",
icon: "none"
});
}
}
});
});
},
//设置公共传值的方法~~
sendSocketMessage: function(msg) {
var socketOpen = this.data.socketOpen;
if (socketOpen) {
wx.sendSocketMessage({
data: msg,
success(e) {
console.log(e);
}
});
}
},
inputPwd(e) {
console.log(e);
var pwd = e.target.dataset.value;
let rule = /[0-9]/;
if (!rule.test(pwd)) {
return;
}
pwd = this.data.pwd + pwd;
console.log(pwd);
this.setData({
pwd: pwd
});
var _this = this;
if (pwd.toString().length == 6) {
wx.showLoading({
title: "支付中...",
mask: true
});
console.log("成功");
a.post(
"ipass.password.auth",
{
password: _this.data.pwd
},
function(e) {
console.log(e);
wx.hideLoading();
// var socketOpen = true;
// 定义传的data值
var data1 = {
type: "validate_password",
token: _this.data.res.token,
cashierid: _this.data.res.cashierid,
password: _this.data.pwd
};
// 将转换的对象转换为字符串
var socketMsgQueue1 = JSON.stringify(data1);
if (!e.auth) {
_this.setData({
showPop: false,
pwd: ""
});
wx.showToast({
title: "支付密码错误",
icon: "none"
});
} else {
// 发送socket信息
_this.sendSocketMessage(socketMsgQueue1); _this.setData({
showPop: false,
pwd: ""
});
}
}
);
setTimeout(() => {
wx.hideLoading({
success: function() {
_this.setData({
showPop: false,
hasPaid: true
});
}
});
}, 2000);
}
},

websocket初体验(小程序)的更多相关文章

  1. 微信小程序基础之在微信上显示和体验小程序?

    随着小程序正式上线,用户现在可以通过二维码.搜索等方式体验到开发者们开发的小程序了. 用户只要将微信更新至最新版本,体验过小程序后,便可在发现页面看到小程序TAB,但微信并不会通过这个地方向用户推荐小 ...

  2. WebSocket 初体验

    其实老早就觊觎 Socket 这碗美食了,在 WebSocket 发出后更是心潮澎湃... 奈何这需要后端同志的帮助,使得至今才得以品尝.(当然本文也只涉及前端部分) 以前想监听其他设备变化,大屏幕交 ...

  3. websocket初体验

    (function (window) { var wsUri = "ws://echo.websocket.org:9150"; var output; MyWebSocket = ...

  4. 微信小程序踩坑集合

    1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...

  5. 微信小程序开发初体验--教你开发小程序

    微信小程序 微信小程序面世以来受到的关注颇多,直到最近我才动手尝试进行了小程序的开发,总体上感觉还是不错的,有一点不适应的就是要摆脱Web APP开发对DOM的操作.在这里我就把我是如何利用API开发 ...

  6. TODO:小程序开发过程之体验者

    TODO:小程序开发过程之体验者 1. 小程序开发过程,先下载开发者并安装开发者工具,现在腾讯开放测试了,普通用户也可以登录开发者工具,如图普通用户登录为调试类型,但是只能建立无AppID的项目 如果 ...

  7. 不安分的android开发者(小程序初尝试,前后台都自己做)

    前言 作为一个稍微有点想法的程序员来说,拥有一个自己开发,自己运营,完全属于自己的应用,应该是很多人的梦想.刚毕业那会,自己的工作是做游戏,于是也和朋友业余时间开发一些小游戏玩玩,可是终究不成气候,而 ...

  8. 初尝微信小程序2-Swiper组件、导航栏标题配置

    swiper 滑块视图容器. 很多网页的首页都会有一个滚动的图片模块,比如天猫超市首页,滚动着很多优惠活动的图片,用来介绍优惠内容,以及供用户点击快速跳转到相应页面. Swiper不仅可以滚动图片,也 ...

  9. 微信小程序 实现websocket长连接 以及断开连接之后自动重连

    app.js let socketMsgQueue = [] let isLoading = false App({ globalData: { userInfo: null, localSocket ...

随机推荐

  1. WeUI Picker组件 源代码分析

    前言 由于最近做的一个移动端项目需要使用到类似 WeUI Picker组件 的选择效果,  所以在这里来分析下 WeUI Picker 的实现逻辑.(weui.js项目地址) 之前也做过类似的组件, ...

  2. Protocol Buffer使用转换工具将proto文件转换成Java文件流程及使用

    Client与Server的网络通信协议传输使用google protobuf,服务器端使用的是Java 一. Protocol Buffersprotobuf全称Google Protocol Bu ...

  3. Jenkins构建部署jar/war后,服务无法在后台持续运行的解决方案

    jenkins中自动构建helpcenter.jar文件,然后以在server上以shell脚本的形式启动jar服务.jenkins构建后,手动执行sh脚本,服务启动异常.但jenkins结合shel ...

  4. CDQZ集训DAY9 日记

    彻彻底底的爆炸了…… 考试上来第一题看完30分暴力后就不知道怎么打了,然后看第二题,一开始脑残以为是网络流,后来发现是树状结构后觉得是那个经典的n^2的树上背包DP,然而脑子又一次犯笨,竟然,竟然去枚 ...

  5. Socket网络编程系列教程序

    C语言的用途相当多,可以用在数据结构.数据库.网络.嵌入式等方面,历经40多年不衰,真是厉害!最近一直想从某一应用方面写一个系列教程,好好地把某一方面讲深讲透.         正好博主对网络方面的编 ...

  6. base16,base32,base64 编码方式的通俗讲解

    作者:林冠宏 / 指尖下的幽灵 博客:http://www.cnblogs.com/linguanh/ GitHub : https://github.com/af913337456/ 腾讯云专栏: ...

  7. spark 源码分析之十六 -- Spark内存存储剖析

    上篇spark 源码分析之十五 -- Spark内存管理剖析 讲解了Spark的内存管理机制,主要是MemoryManager的内容.跟Spark的内存管理机制最密切相关的就是内存存储,本篇文章主要介 ...

  8. 使用C#调试Windows服务模板项目

    Windows服务是非常强大的应用程序,可用于在backgorund中执行许多不同类型的任务.他们可以在不需要任何用户登录的情况下启动,并且可以使用除登录用户之外的其他用户帐户运行.但是,如果通过遵循 ...

  9. FC游戏修改教程(hack)小白文。

    FC(NES)红白机Family Computer(简称FAMICOM)(或Nintendo Entertainment System)是任天堂公司发行的第一代家用游戏机. 修改FC游戏需要的工具有 ...

  10. 洛谷P1640 [SCOI2010]连续攻击游戏 题解

    题目链接: https://www.luogu.org/problemnew/show/P1640 分析: 这道题用二分图来解决即可.应该可以作为网络流中的模板题来食用, 每一个武器有两个属性,但是只 ...