websocket初体验(小程序)
之前上个公司做过一个二维码付款功能,涉及到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初体验(小程序)的更多相关文章
- 微信小程序基础之在微信上显示和体验小程序?
		
随着小程序正式上线,用户现在可以通过二维码.搜索等方式体验到开发者们开发的小程序了. 用户只要将微信更新至最新版本,体验过小程序后,便可在发现页面看到小程序TAB,但微信并不会通过这个地方向用户推荐小 ...
 - WebSocket 初体验
		
其实老早就觊觎 Socket 这碗美食了,在 WebSocket 发出后更是心潮澎湃... 奈何这需要后端同志的帮助,使得至今才得以品尝.(当然本文也只涉及前端部分) 以前想监听其他设备变化,大屏幕交 ...
 - websocket初体验
		
(function (window) { var wsUri = "ws://echo.websocket.org:9150"; var output; MyWebSocket = ...
 - 微信小程序踩坑集合
		
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...
 - 微信小程序开发初体验--教你开发小程序
		
微信小程序 微信小程序面世以来受到的关注颇多,直到最近我才动手尝试进行了小程序的开发,总体上感觉还是不错的,有一点不适应的就是要摆脱Web APP开发对DOM的操作.在这里我就把我是如何利用API开发 ...
 - TODO:小程序开发过程之体验者
		
TODO:小程序开发过程之体验者 1. 小程序开发过程,先下载开发者并安装开发者工具,现在腾讯开放测试了,普通用户也可以登录开发者工具,如图普通用户登录为调试类型,但是只能建立无AppID的项目 如果 ...
 - 不安分的android开发者(小程序初尝试,前后台都自己做)
		
前言 作为一个稍微有点想法的程序员来说,拥有一个自己开发,自己运营,完全属于自己的应用,应该是很多人的梦想.刚毕业那会,自己的工作是做游戏,于是也和朋友业余时间开发一些小游戏玩玩,可是终究不成气候,而 ...
 - 初尝微信小程序2-Swiper组件、导航栏标题配置
		
swiper 滑块视图容器. 很多网页的首页都会有一个滚动的图片模块,比如天猫超市首页,滚动着很多优惠活动的图片,用来介绍优惠内容,以及供用户点击快速跳转到相应页面. Swiper不仅可以滚动图片,也 ...
 - 微信小程序 实现websocket长连接 以及断开连接之后自动重连
		
app.js let socketMsgQueue = [] let isLoading = false App({ globalData: { userInfo: null, localSocket ...
 
随机推荐
- Unix及Linux编辑器vi/vim基本使用方法
 - [笨方法学python]习题51自动化测试笔记
			
习题51 本节自动化测试部分看不大懂,自己每步都打印出来,帮助理解.(代码标红部分为自己加入调试为打印变量值所用) tests/tools.py from nose.tools import * im ...
 - re模块:模式匹配与正则表达式
			
一.用正则表达式查找文本模式 正则表达式,简称regex,是文本模式的描述方法.比如\d是一个正则表达式,用于表示一位0~9的数字.在一个模式后面加上花括号包围的数字n(如{n}),表示匹配这个模式n ...
 - golang http json http://www.alexedwards.net/blog/golang-response-snippets
			
http://www.alexedwards.net/blog/golang-response-snippets https://gist.github.com/andreagrandi/97263a ...
 - vs查看派生类
			
把类名拷贝到类视图中,点“派生类型”可看到此类的所有派生类.
 - TensorFlow笔记-组件
			
张量 TensorFlow用张量这种数据结构来表示所有的数据.你可以把一个张量想象成一个n维的数组或列表.一个张量有一个静态类型和动态类型的维数.张量可以在图中的节点之间流通.其实张量更代表的就是一种 ...
 - C#3.0新增功能10 表达式树 01 简介
			
连载目录 [已更新最新开发文章,点击查看详细] 如果你使用过 LINQ,则会有丰富库(其中 Func 类型是 API 集的一部分)的经验. (如果尚不熟悉 LINQ,建议阅读 LINQ 教程,以 ...
 - [leetcode] 234. Palindrome Linked List (easy)
			
原题 回文 水题 function ListNode(val) { this.val = val; this.next = null; } /** * @param {ListNode} head * ...
 - 使用c++开发跨平台的程序
			
使用c++开发跨平台的程序 背景 在开发过程中,使用c++作为开发语言,通常被认为是痛苦的,啰嗦的,超长开发时间的.最近几年有各种各样的语言被广泛使用,相对比来说c++不是那么出彩.c++虽然年龄大, ...
 - 小白开学Asp.Net Core 《十》
			
小白开学Asp.Net Core <十> — — Session.Cookie.Cache(老生常谈) 一.背景 在常谈Session和Cookie之前我们先来简单的了解下Http(可以说 ...