Taro/JS/H5/小程序：纯前端解决小程序微信支付统一下单和调起支付
这个文章不会说具体0到1的代码流程，我会着重讲几个问题的解决
准备以下依赖
"md5": "^2.2.1",
"xml-js": "^1.6.11",
"xmldom": "^0.1.27"
支付主要遇到的问题如下：
1.获取openid
2.统一下单，拿到预单号（我起的，全名叫预支付交易会话标识）
3.再次签名调起支付
4.支付后的处理
1.获取openid很简单，调用Taro.login()拿到code，传给后端获取openid，这个必须后端拿
2.统一下单的几个问题：
大概需要这么些必填参数：
{
appid: '', // appid
mch_id: '', // 商户id
nonce_str:'', // 随机字符串
body: '', // 商品简单描述
out_trade_no: '', // 商户系统内部订单号，唯一
total_fee: '', // 订单总金额，单位为分
spbill_create_ip: '', // 你的ip，要后端传给你
notify_url: '', // 通知地址，微信调的，告诉你支付的情况
trade_type: 'JSAPI',
openid: ''
}
①随机字符串
②签名
③XML的组装与解析
①
export function randomString(len = 32) {
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890';
const maxPos = chars.length;
let pwd = '';
for (let i = 0; i < len; i++) {
pwd += chars.charAt(Math.floor(Math.random() * maxPos));
}
return pwd;
}
②
准备一个参数如下
const params = {
appid: '',
mch_id: '',
nonce_str:randomString(32),
body: '',
out_trade_no: '',
total_fee: '',
spbill_create_ip: '',
notify_url: '',
trade_type: 'JSAPI',
openid: ''
}
签名：
const sign = signFunc(params)
params.sign = sign
签名函数
export function signFunc(data) {
// 1.对key字典排序
const sortArr = Object.keys(data).sort()
// 2.转URL键值对
// const qsString = stringify(sortObj)
let qsString = ''
sortArr.map((t, index) => {
if (index === 0) {
qsString = `${t}=${data[t]}`
} else {
qsString = `${qsString}&${t}=${data[t]}`
}
})
// 3.拼接string+key
const stringSignTemp = qsString + `&key=${key}`
// 4.MD5签名
const sign = md5(stringSignTemp).toUpperCase()
return sign
}
注意，我注释的那句，是一个叫做qs的npm库提供 ，不要用它对参数生成 URL键值对，因为它会把 再次签名时，会把=转成%3d
console.log(stringify({
package: 'prepay_id=wx2017033010242291fcfe0db70013231072'
}))
输出：
package=prepay_id%3Dwx2017033010242291fcfe0db70013231072
这样的值不符合要求，md5处理后是和官方对不上 ，一定要package=prepay_id=wx2017033010242291fcfe0db70013231072
③
统一下单的参数必须是xml
发送请求，header要设置如下
'Content-Type': 'text/plain',
const xml =
`<xml>
<appid>${params.appid}</appid>
<openid>${ConfirmStore.openId}</openid>
<body>${params.body}</body>
<mch_id>${params.mch_id}</mch_id>
<nonce_str>${params.nonce_str}</nonce_str>
<notify_url>${params.notify_url}</notify_url>
<out_trade_no>${params.out_trade_no}</out_trade_no>
<spbill_create_ip>${params.spbill_create_ip}</spbill_create_ip>
<total_fee>${params.total_fee}</total_fee>
<trade_type>${params.trade_type}</trade_type>
<sign>${params.sign}</sign>
</xml>`
Taro.request({
url: `${unifyOrderUrl}`,
header: {
'Content-Type': 'text/plain',
},
method: 'POST',
data: {
xml,
},
})
返回结果，xml的解析
由于小程序无dom，所以不可用 DOMParser() ，解决办法是使用xmldom这个库
示例写法：xml字符串转json
// 若结果data为以下
const data = `
<xml>
<appid></appid>
<timeStamp></timeStamp>
<nonce_str></nonce_str>
<package></package>
<signType></signType>
</xml>` const doc = new DOMParser().parseFromString(data);
const result = convert.xml2json(doc, { compact: true, spaces: 4 });
const { xml } = JSON.parse(result)
xml直接用即可
3可以参考2，主要问题也是签名
4.记得做好支付成功或者失败的处理
注意事项：
1.调用支付使用的noncestr这个参数必须和商家服务器调用统一下单接口返回的那个noncestr一致
https://developers.weixin.qq.com/community/develop/doc/000c209934c8d0bad528fc8bc56800
2.请在小程序后台，把微信支付统一下单URLhttps://api.mch.weixin.qq.com/pay/unifiedorder加到安全域名中
Taro/JS/H5/小程序：纯前端解决小程序微信支付统一下单和调起支付的更多相关文章
- 原创：微信小程序调用【统一下单】、【支付】、【支付回调】api并处理请求
1.服务器端使用TP3.2处理(随便写在一个Controller里面) /* 小程序报名,生成订单 */ public function make_order(){ if(IS_POST){ $dat ...
- 微信授权、获取用户openid-纯前端实现——jsonp跨域访问返回json数据会报错的纯前端解决办法
近来,倒霉的后台跟我说让我拿个openid做微信支付使用,寻思很简单,开始干活. 首先引导用户打开如下链接,只需要将appid修改为自己的就可以,redirect_url写你的重定向url https ...
- H5商城，纯前端静态页面
发布时间:2018-09-28 技术:jquery1.10.1+swipeSlide+jquery.mmenu+jquery.touchSwipe+cityinit 概述 纯手写H5商城,2年 ...
- 小程序clearinterval无效解决
小程序clearinterval无效解决 小程序clearinterval清除定时器无效,原因是定时器使用与清除方法不对导致的,我们应将定时器绑定变量,这样在关闭页面清空定时器clearinterva ...
- springboot+微信小程序实现微信支付【统一下单】
说明: 1)微信支付必须有营业执照才可以申请 2)微信支付官方api是全套的,我这是抽取其中的统一下单api,做了一个简单的封装 首先看看微信支付 商户系统和微信支付系统主要交互: 1.小程序内调用登 ...
- 纯前端H5小应用_localStorage存储
开发缘由[需求发现和分析] 想要送朋友一个礼物,但是想了想,街上买的东西,em~,我们这样的猿确实不会选礼物啊,由此就想利用自己手中的工具和知识做点有用的东西吧,抱枕是礼物,钢笔是礼物,电子产品也是礼 ...
- 微信小程序开发——前端如何区分小程序运行环境
前言: 之前用vue做h5项目,对于接口请求,都是根据前端访问域名来判断运行环境,然后自动适配对应的服务器地址的.这样的好处就是在开发.测试及发布上线全程都不需要手动去改接口请求地址,只要提前配置好就 ...
- 通过微信小程序看前端
前言 2016年9月22日凌晨,微信官方通过“微信公开课”公众号发布了关于微信小程序(微信应用号)的内测通知.整个朋友圈瞬间便像炸开了锅似的,各种揣测.介绍性文章在一夜里诞生.而真正收到内测邀请的公众 ...
- JS魔法堂之实战：纯前端的图片预览
一.前言 图片上传是一个普通不过的功能,而图片预览就是就是上传功能中必不可少的子功能了.在这之前,我曾经通过订阅input[type=file]元素的onchange事件,一旦更改路径则将图片上传至服 ...
随机推荐
- 深入理解Linux内核 学习笔记（8）
第八章 系统调用 API定义了一个给定的服务:系统调用是通过软中断向内核发出一个明确的请求. API可能不调用系统调用,也可能调用多个系统调用. Linux系统调用必须通过执行int 0x80,系统调 ...
- Oracle数据库的关键系统服务整理
在Windows 操作系统下安装Oracle 9i时会安装很多服务——并且其中一些配置为在Windows 启动时启动.在Oracle 运行在Windows 下时,有些服务可能我们并不总是需要但又害怕停 ...
- 解决node fs.writeFile 生成csv 文件乱码问题
解决node fs.writeFile 生成csv 文件乱码问题: fs.writeFile('xxx.csv', '\ufeff' + 要传入的数据, {encoding: 'utf8'}); \u ...
- Wireshark使用入门
目录 1. Wireshark介绍 1.1 客户端界面 1.2 Display Filter 的常用方法 1.3 界面上一些小TIPS 2. 使用Wireshark分析TCP三次握手过程 2.1 三次 ...
- Python连载41-yield from详解、委派生成器
一. 1.yield from (1)调用协程为了得到返回值,协程必须正常终止 (2)生成器正常终止会发出StopIteration异常,异常对象的value属性保存返回值. (3)yield fro ...
- MyBatis 构造动态 SQL 语句
以前看过一个本书叫<深入浅出 MFC >,台湾 C++ 大师写的一本书.在该书中写到这样一句话,“勿在浮沙筑高台”,这句话写的的确对啊.编程很多语言虽然相通,但是真正做还是需要认真的学习, ...
- AspNetCore.Identity详解1——入门使用
今年在面试的时候被问到单点登录的知识,当时支支吾吾不知该如何作答,于是面试失败.回到住所便开始上网查找资料,但苦于难于找到详尽的demo,总是无法入门.又由于我正在学习了解asp.net core,里 ...
- 纯 JS 设置文本框的默认提示
HTML5 中有个新特性叫 placeholder,一般用它来描述输入字段的预期值,适用于 text.search.password 等类型的 input 以及 textarea.示例如下: < ...
- cmd 运行bcp 提示：'bcp' 不是内部或外部命令，也不是可运行的程序 或批处理文件。
这个问题的原因是:bcp.exe文件的路径不在环境变量中, 我的环境:Windows10 ,SQL server2016(D:) 1.首先查找你的SQL Server2016的安装位置 找到快捷方式, ...
- Ajax异步后台加载Html绑定不上事件
因项目需要,需要实时从后台动态加载html,开发过程中,遇到事件绑定不上,后来百度一番,大概意思:ajax是异步加载的,页面一开始绑定事件的时候,后台数据还没有传过来,就绑定事件,这个时候找不到这个d ...