之前上个公司做过一个二维码付款功能,涉及到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. ServiceFabric极简文档-1.3删除群集

    删除群集 若要删除群集,请运行包文件夹中的 RemoveServiceFabricCluster.ps1 Powershell 脚本,并传入 JSON 配置文件的路径. 可以选择性地指定删除日志的位置 ...

  2. NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load xxxx错误解决方法

    在开发项目的过程中,和后端对接,我们使用是一个成熟的集成很全面的架构JHipster.后端为java spring-boot 前端ts+react,需求是有一个需要在页面里嵌套iframe的需求.然后 ...

  3. Java编程思想:文件读写实用工具

    import java.io.*; import java.util.ArrayList; import java.util.Arrays; public class Test { public st ...

  4. centos7 linux下增加swap虚拟内存分区大小

    此方法不限于centos,linux均适用 最近在服务器上部署了一个java项目,java进程经常性莫名被自动Kill,首先java程序是没有报错的,那么我想可能是内存不足的原因,因为4G内存的服务上 ...

  5. Linux 系统的基本操作及工具的使用

    基本操作命令如:useradd.userdel.passwd.su 添加用户.删除用户.修改密码.切换用户 ls.ll.cd.cp.mv.chmod ps.kil.man mkdir.touch.ta ...

  6. youku_androidid

    youku_androidid = 1310; imei screenwidth screenhight

  7. Shrio多Realm认证及认证策略

    在大型的系统中,安全数据可能会存放在多个数据库中,而且每个数据的加密方式也是不一样的,那么单一的Realm就无法完成. 这时,就需要用到多Realm认证了,多Realm又涉及到认证策略,及在多个Rea ...

  8. 初识nginx!

    What--什么是nginx nginx是一款高性能的http服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器.官方测试nginx能够支撑5w并发连接.并且cup.内存等资源消耗却非常 ...

  9. JAVA-Spring框架之IOC(DI)(1)

    spring框架概述 spring是一个service层的框架,可以整合许多其 他框架,进行工作 spring的主要技术是IOC(DI)和AOP IOC(DI)-控制反转(依赖注入)AOP - 面向切 ...

  10. npm常用命令(原创)

    1.对于我们下载下来的node包,假设该包存在依赖情况执行: npm install(或者npm i) 下载依赖包: 下载依赖成功过后,文件夹内会产生package-lock.json文件: 2.下载 ...