这个文章不会说具体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/小程序：纯前端解决小程序微信支付统一下单和调起支付的更多相关文章

  1. 原创：微信小程序调用【统一下单】、【支付】、【支付回调】api并处理请求

    1.服务器端使用TP3.2处理(随便写在一个Controller里面) /* 小程序报名,生成订单 */ public function make_order(){ if(IS_POST){ $dat ...

  2. 微信授权、获取用户openid-纯前端实现——jsonp跨域访问返回json数据会报错的纯前端解决办法

    近来,倒霉的后台跟我说让我拿个openid做微信支付使用,寻思很简单,开始干活. 首先引导用户打开如下链接,只需要将appid修改为自己的就可以,redirect_url写你的重定向url https ...

  3. H5商城，纯前端静态页面

    发布时间:2018-09-28   技术:jquery1.10.1+swipeSlide+jquery.mmenu+jquery.touchSwipe+cityinit   概述 纯手写H5商城,2年 ...

  4. 小程序clearinterval无效解决

    小程序clearinterval无效解决 小程序clearinterval清除定时器无效,原因是定时器使用与清除方法不对导致的,我们应将定时器绑定变量,这样在关闭页面清空定时器clearinterva ...

  5. springboot+微信小程序实现微信支付【统一下单】

    说明: 1)微信支付必须有营业执照才可以申请 2)微信支付官方api是全套的,我这是抽取其中的统一下单api,做了一个简单的封装 首先看看微信支付 商户系统和微信支付系统主要交互: 1.小程序内调用登 ...

  6. 纯前端H5小应用_localStorage存储

    开发缘由[需求发现和分析] 想要送朋友一个礼物,但是想了想,街上买的东西,em~,我们这样的猿确实不会选礼物啊,由此就想利用自己手中的工具和知识做点有用的东西吧,抱枕是礼物,钢笔是礼物,电子产品也是礼 ...

  7. 微信小程序开发——前端如何区分小程序运行环境

    前言: 之前用vue做h5项目,对于接口请求,都是根据前端访问域名来判断运行环境,然后自动适配对应的服务器地址的.这样的好处就是在开发.测试及发布上线全程都不需要手动去改接口请求地址,只要提前配置好就 ...

  8. 通过微信小程序看前端

    前言 2016年9月22日凌晨,微信官方通过“微信公开课”公众号发布了关于微信小程序(微信应用号)的内测通知.整个朋友圈瞬间便像炸开了锅似的,各种揣测.介绍性文章在一夜里诞生.而真正收到内测邀请的公众 ...

  9. JS魔法堂之实战：纯前端的图片预览

    一.前言 图片上传是一个普通不过的功能,而图片预览就是就是上传功能中必不可少的子功能了.在这之前,我曾经通过订阅input[type=file]元素的onchange事件,一旦更改路径则将图片上传至服 ...

随机推荐

  1. [LOJ 2721][UOJ 396][BZOJ 5418][NOI 2018]屠龙勇士

    [LOJ 2721][UOJ 396][BZOJ 5418][NOI 2018]屠龙勇士 题意 题面好啰嗦啊直接粘LOJ题面好了 小 D 最近在网上发现了一款小游戏.游戏的规则如下: 游戏的目标是按照 ...

  2. （二十七）golang-排序和查找

    排序:将一组数据,依据指定的顺序进行排列 (1)内部排序:将数据加载在内存中进行排序: 交换排序(冒泡排序,快速排序)冒泡排序实现: 快速排序实现 (2)外部排序:数据量过大,无法全部加载到内存中,需 ...

  3. 小米笔记本pro 黑苹果系统无法进入系统，频繁重启故障解决记录

    问题1:频繁重启,然后clover丢失 表现情况:开机没有选择macos 或windos的界面 解决办法:进入windows使用工具easyefi,直接添加一个clover start boot,选择 ...

  4. 运维相关指标数据采集并ES入仓 - 运维笔记

    为了进行数字化IT治理,需要对一些应用进程相关指标进行采集并入库.收集到的应用指标数据最好要进行ES入仓,入到Kafka里面,并通过Kibana可视化展示. 需要进行采集的应用进程相关指标如下: ES ...

  5. 【Linux命令】ulimit设置最大文件打开数

    一.简介 在Linux下有时会遇到Socket/File : Can't open so many files的问题.其实Linux是有文件句柄限制的,而且Linux默认一般都是1024(阿里云主机默 ...

  6. Tensorflow faster rcnn系列一

    注意:本文主要是学习用,发现了一个在faster rcnn训练流程写的比较详细的博客. 大部分内容来自以下博客连接:https://blog.csdn.net/weixin_37203756/arti ...

  7. redis之通信协议

    Redis 协议将传输的结构数据分为 5 种最小单元类型,单元结束时统一加上回车换行符号\r\n. 1.单行字符串 以 + 符号开头. 2.多行字符串 以 $ 符号开头,后跟字符串长度. 3.整数值 ...

  8. DVWA-文件上传学习笔记

    DVWA-文件上传学习笔记 一.文件上传漏洞 文件上传漏洞,通常是由于对上传文件的类型.内容没有进行严格的过滤.检查,导致攻击者恶意上传木马以便获得服务器的webshell权限. 二.DVWA学习 将 ...

  9. 时间复杂度o(1), o(n), o(logn), o(nlogn)

    1.时间复杂度o(1), o(n), o(logn), o(nlogn).算法时间复杂度的时候有说o(1), o(n), o(logn), o(nlogn),这是算法的时空复杂度的表示.不仅仅用于表示 ...

  10. Ubuntu Err:1 http://us.archive.ubuntu.com/ubuntu bionic InRelease Could not resolve 'us.archive.ubuntu.com' 错误

    Ubuntu 更新 apt-get update 的时候 出现 Err: http://us.archive.ubuntu.com/ubuntu bionic InRelease Could not ...