之前上个公司做过一个二维码付款功能,涉及到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. 新手上路—Java的"瑞士军刀"

    “ Jodd 是一个开源的 Java 工具集, 包含一些实用的工具类和小型框架.简单,却很强大!这在我们的日常开发工作中,无疑是如虎添翼,事半功倍. Jodd = Tools + IoC + MVC ...

  2. MYSQL Got error 28 from storage engine

    网络查找该异常信息,发现 Got error 28 from storage engine 查了一下,数据库文件所在的盘应该没事,应该是数据库用的临时目录空间不够 引用 磁盘临时空间不够导致. 解决办 ...

  3. 一个超级简单的Jetty实例

    Maven: <!-- https://mvnrepository.com/artifact/org.mortbay.jetty/jetty --> <dependency> ...

  4. 【题解】危险的工作-C++

    Description 给出一个数字N,N<=11.代表有N个人分担N个危险的工作. 每个人对应每个工作,有个危险值 每个人担任其中一项,问每个人危险值相加,最小值是多少. Input 第一行给 ...

  5. 洛谷 P3367 并查集 【模板题】

    题目描述 如题,现在有一个并查集,你需要完成合并和查询操作. 输入输出格式 输入格式: 第一行包含两个整数N.M,表示共有N个元素和M个操作. 接下来M行,每行包含三个整数Zi.Xi.Yi 当Zi=1 ...

  6. [springboot] 搭建项目及单元测试

    本文纯属记录自己学习的过程以及相关使用操作,使用工具Idea2018. 1.创建项目: -- 目录结构 2.配置文件   3.pom文件 4.创建测试类并启动项目 package com.zr.dem ...

  7. Python连载25-函数tell&write&writeline$&持久化

    一. 1.连续打印举例 #打开文件,三个字符一组读出来内容,然后显示在屏幕上,每读一次,停一秒 import time with open(r"test01.txt",'r') a ...

  8. 基于 HTML5 WebGL 的民航客机飞行监控系统

    前言 前些日子出差,在飞机上看到头顶的监控面板,除了播放电视剧和广告之外,还会时不时的切换到一个飞机航行的监控系统,不过整个监控系统让人感到有一点点的简陋,所以我就突发奇想制作了一个采用 HT for ...

  9. 二、SQL Server 2008附加数据库时出错的解决方法

    错误中提示“数据库的版本为661,无法打开.此服务器支持655版及更低版本.不支持降级路径”. 这种情况是由于高版本的数据库文件在低版本的数据库上造成的,即我们要附加的数据库文件的版本高于当前SQL ...

  10. 《VR入门系列教程》之5---应用方向

    VR应用方向     面向消费者的虚拟现实才发展了几年,就出现了大量应用程序,虚拟现实抓住了人们对未来的渴望.开发者甚至想要把整个现实世界都做成虚拟现实,这些都是可以理解的.     但是,现在仍然没 ...