vue+vant打包，vue+vant-ui小程序，微信支付
微信JS支付代码_前端调用微信支付接口
其实参照官方文档一步一步操作不是很难，但很多人在签名这个地方就总是出现问题，因为文档中签名时使用的字段大小写时错误的。。。。好坑啊！！然而PHP版本的代码官方有封装SDK包，不用操心那么多细节。
NODEJS版本的只能自己写了。
1.签名方法(简单不会错)
//签名;
//mchkey是你在支付平台设置的一个API密钥
function MSign(param, mchkey){
var string = raw(param);
string = string + '&key=' + mchkey; //key拼接在字符串最后面
var crypto = require('crypto');
return crypto.createHash('md5').update(string, 'utf8').digest('hex').toUpperCase();
}
//args是一个JSON，方法将json中的字段按照ASCII码从小到大排序，生成一个字符串key1=value1&key2=value2。
function raw(args) {
var keys = Object.keys(args);
keys = keys.sort();
var newArgs = {};
keys.forEach(function (key) {
newArgs[key] = args[key];
});
var string = '';
for (var k in newArgs) {
string += '&' + k + '=' + newArgs[k];
}
string = string.substr(1);
return string;
}
2.创建订单
//创建随机数;
getRandomNumberSection(begin, end) {
return Math.floor(Math.random() * (begin - end) + end);
}
//创建随机字符串;
getRandomStr(length) {
let value = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
let result = "";
for (let i = 0; i < length; i++) {
let v = value[getRandomNumberSection(0, value.length - 1)];
while (i === 0 && v === '0') {
v = value[getRandomNumberSection(0, value.length - 1)];
}
result += v;
}
return result;
}
//创建JSAPI订单;
//openid:微信用户的OPENID
//body: 订单信息;
//out_trade_no: 你自己生产的商户订单号;
//spbill_create_ip: 客户端IP地址
//total_fee: 支付金额(单位分)
async CreateJSAPIpay(openid, body, out_trade_no, spbill_create_ip, total_fee, callback) {
let that = this;
let notify_url = '你需要设置支付完成后的回调URL';
let WxAppid = '微信APPID';
let mch_id = '商户ID';
let trade_type = 'JSAPI';
let sign_type = 'MD5';
let noncestr = (new Date()).getTime() + '_';
noncestr += getRandomStr(31 - noncestr.length); //产生32位随机字符串;
//1.签名参数;
let sign = MSign({
appid: WxAppid,
mch_id: mch_id,
nonce_str: noncestr,
notify_url: notify_url,
trade_type: trade_type,
sign_type: sign_type,
openid: openid, //微信用户的OPENID
body: body, //订单信息;
out_trade_no: out_trade_no,//你自己生产的商户订单号;
spbill_create_ip: spbill_create_ip,//客户端IP地址
total_fee: total_fee //金额(单位分)
}, this.mchkey);
//2.生成XML格式;
let formData = "<xml>";
formData += "<appid>" + WxAppid + "</appid>";
formData += "<body><![CDATA[" + body + "]]></body>";
formData += "<mch_id>" + mch_id + "</mch_id>";
formData += "<nonce_str>" + noncestr + "</nonce_str>";
formData += "<notify_url>" + notify_url + "</notify_url>";
formData += "<out_trade_no>" + out_trade_no + "</out_trade_no>";
formData += "<spbill_create_ip>" + spbill_create_ip + "</spbill_create_ip>";
formData += "<total_fee>" + total_fee + "</total_fee>";
formData += "<trade_type>" + trade_type + "</trade_type>";
formData += "<openid>" + openid + "</openid>";
formData += "<sign_type>" + sign_type + "</sign_type>";
formData += "<sign>" + sign + "</sign>"; //sign是上一步签名产生的;
formData += "</xml>";
//3.请求微信
let url = 'https://api.mch.weixin.qq.com/pay/unifiedorder';
request({ url: url, method: 'POST', body: formData },
function (err, response, body) {
if (!err && response.statusCode == 200) {
xmlreader.read(body.toString("utf-8"), function (errors, response) {
if (null !== errors) {
callback(false, errors, null);
}
else {
if (response.xml.return_msg.text().toLocaleUpperCase() == 'OK') {
//此时返回的数据并不能直接用在客户端，需要再次签名;
let prepay_id = response.xml.prepay_id.text();
let timestamp = parseInt(new Date().getTime() / 1000) + '';
//4.签名
let finalsign = MSign({
appId: WxAppid,
timeStamp: timestamp,
nonceStr: noncestr,
package: 'prepay_id=' + prepay_id,
signType: sign_type
}, mchkey);
//这才是客户端最后使用的数据;
let clientParam = {
'appId': WxAppid,
'nonceStr': noncestr,
'timeStamp': timestamp,
'package': 'prepay_id=' + prepay_id,
'signType': that.sign_type,
'sign': finalsign
};
callback(true, clientParam);
}
else {
callback(false, null);
}
}
});
}
else {
callback(false, null);
}
});
}
3.公众号网页唤起支付页面
如果要在WEB端使用微信的功能，则需要在页面打开时使用JSAPI签名进行初始化，服务端JSAPI签名的方法如下，其中，jsapi参数是使用全局access_token获取的，url是网页的地址。
//获取JSAPI签名;
static GetJSAPISign(appid, jsapi, url) {
var ret = {
jsapi_ticket: jsapi,
noncestr: Math.random().toString(36).substr(2, 15),
timestamp: parseInt(new Date().getTime() / 1000) + '',
url: url
};
var string = raw(ret);
let jsSHA = require('jssha');
let shaObj = new jsSHA(string, 'TEXT');
let signature = shaObj.getHash('SHA-1', 'HEX');
return {
appid:appid,
nonceStr:ret.noncestr,
timestamp:ret.timestamp,
signature:signature,
url: url
};
}
网页端初始化微信JSAPI代码
需要引入
<script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>
//我使用的EJS，参数在请求页面时就生成好了;
var jsapiSign = JSON.parse('<%- JSON.stringify(jsapiSign)%>');
var paymentSign = JSON.parse('<%- JSON.stringify(paymentSign)%>');
//初始化JSAPI;
function init(){
wx.config({
debug: true,
appId: jsapiSign.appid,
timestamp: jsapiSign.timestamp,
nonceStr: jsapiSign.nonceStr,
signature: jsapiSign.signature,
jsApiList : [
'chooseWXPay' //请求微信支付权限
]
});
wx.ready(function () {
wx.hideOptionMenu(); //隐藏菜单;
onBridgeReady(); //初始化完成后立即调用微信支付;
});
wx.error(function(res){
console.log('初始化失败了，请稍后重试');
});
}
//唤起支付;
function onBridgeReady(){
var param = {
appid:paymentSign.appId,
timestamp: paymentSign.timeStamp,
nonceStr: paymentSign.nonceStr,
package: paymentSign.package,
signType: paymentSign.signType,
paySign: paymentSign.sign,
success: function (res) {
console.log("支付完成，请稍候");
},
cancel: function(res){
console.log("用户取消支付");
},
fail: function(msg){
console.log("支付调用失败");
}
};
//API唤起支付;
wx.chooseWXPay(param);
}
init();
</script>
目前学到了一种方法！
一：cd到文件夹对应的项目中 在cmd中输入 你npm run build
二：此时项目中会生成一个文件夹dist，在dist文件夹下的index文件里每个路径前加 ./ 如下图
三：在HBuilder X中 点击文件---新建--项目---选择5+App---定义名称--模板选空项目
四：删除刚刚新建项目里面的 除了manifest.json 这个文件的其他文件
五：打开原来项目并复制dist中的文件，不包括dist，粘贴到，在HBuilder X中创建的项目里
六：点击HBuilder X中的 发行---原生APP云打包 ----Android（apk包）----使用公共测试证书
七：点击打包
八：打包成功后会显示下载地址
vue+vant打包，vue+vant-ui小程序，微信支付的更多相关文章
- 微信小程序 微信支付
微信小程序前端自处理: //时间戳 timeStamp() { return parseInt(new Date().getTime() / 1000) + '' }, //随机数 randomStr ...
- 微信小程序------微信支付模块
最近项目涉及到小程序开发:需要进行微信支付模块,接下来通过叙述,记录一下微信小程序中微信支付模块的开发,以便日后翻阅和使用. 学习指南----------微信支付开发文档:https://pay.we ...
- TP5调用小程序微信支付，回调，在待支付中再次调用微信支付
1,必须要有 $mch_id $key $appid这三个值,是需要去申请的,我是直接用公司的2,购买商品订单号用户openid统一下单名称商品价格(必须以分为单位,调起微信支付)服务器的ip地址(没 ...
- 微信小程序——微信支付
这个讲起来也就比较麻烦一点,因为需要的不仅仅是咱们代码上的技术,嘿嘿! 先整理一下思路.如果想做微信支付: 1.现有一个公司账户(非个人账户),并且实名认证过的. 2.微信号 必须开通微信支付功能. ...
- 微信小程序微信支付流程
1.小程序调用wx.login获取登录凭证code wx.login(无请求参数)返回code(有效期5分钟) wx.login({ success:function(res){ //get res. ...
- 微信小程序微信支付的一些坑
使用的是Node.js作为后端 统一下单: appid:这里的appid是调起微信支付的appid mch_id:商户号,需要注意的是商户号要与appid对应 nonce_str:Math.rando ...
- Java实现小程序微信支付
小程序支付流程交互图: 进入小程序,下单,请求下单支付,调用小程序登录API来获取Openid,生成商户订单 // pages/pay/pay.js var app = getApp(); Page( ...
- .NET开发微信小程序-微信支付
前台MD5加密代码 /* * A JavaScript implementation of the RSA Data Security, Inc. MD5 Message * Digest Algor ...
- Taro/JS/H5/小程序：纯前端解决小程序微信支付统一下单和调起支付
这个文章不会说具体0到1的代码流程,我会着重讲几个问题的解决 准备以下依赖 "md5": "^2.2.1", "xml-js": " ...
- 小程序微信支付（UNIAPP+第三方SDK：binarywang）
小程序支付流程图说明(UNIAPP+第三方SDK:binarywang) 说明:小程序为UNI-APP开发,使用的第三方微信支付SDK为binarywang提供的,此SDK对微信公众号.小程序.微信各 ...
随机推荐
- mybatis学习日记3
1.mybatis的延迟加载 问题:在一对多中,当我们有一个用户,他有100个账户 在查询用户的时候,要不要把关联的账户查出来? 在查询账户的时候,要不要把关联的用户查出来? 解决:在查询用户的时候, ...
- SpringCloud Sleuth链路追踪
1.概要 一般的,一个分布式服务跟踪系统,主要有三部分: 数据收集 数据存储 数据展示 然而这三个部分其实不都是由SpringCloud Sleuth(下面我简称为Sleuth)完成的,Sleuth负 ...
- ChatGPT国内镜像模板，国内使用ChatGPT中文版本
@ 目录 一.什么是ChatGPT国内镜像 二.ChatGPT国内镜像使用教程 免费ChatGPT镜像的功能: 三.ChatGPT中文版作用 四.怎么使用ChatGPT国内镜像 五.中文ChatGPT ...
- vue axios请求中断的处理
https://blog.csdn.net/qiaoqiaohong/article/details/121014296
- libco 源码剖析(1): 协程上下文切换之 32 位
libco 源码剖析(1): 协程上下文切换之 32 位 相关背景资料 关于汇编语言及内存布局相关基础,参看 参考文献[0], 参考文献[1] 32 位协程上下文结构如下: // coctx.h st ...
- JZOJ 2114. 【GDKOI2011】反恐任务
\(\text{Problem}\) 给定一张无向图,\(q\) 次询问,删去一个点或一条相邻两点间的边,问两点是否连通 询问独立 \(\text{Solution}\) 明显的用圆方树把图变成树 然 ...
- 【NOIP2013提高组】华容道
分析 一个比较显然的方式是 设 \(f_{i,j,x,y}\) 表示达到空格所处位置为 \((i,j)\) 且特殊格位置为 \(x,y\) 的状态的最少步数 一次可以交换空格和相邻格,代价为 \(1\ ...
- What?JMeter做UI自动化!
JMeter做UI自动化 不推荐,好别扭,但可行 插件安装 搜插件selenium,安装 添加config 添加线程组 右键线程组->添加->配置元件->jp@gc - Chrome ...
- 基于Python的OpenGL 01 之Hello Triangle
1. 引言 本文基于Python语言,描述OpenGL的绘制流程,这里描述的是OpenGL的核心模式(Core-profile) 本文基于GLFW与PyOpenGL库进行开发,Python语言下的Op ...
- 2021-08-17：cocos creator 如何控制 spine 动画的进度
// 传入spine与进度比例(注意初始要把spine的TimeScale设置为0)updateSpine(spine: sp.Skeleton,rate: number) { const track ...