关于前端:从前端的角度来梳理微信支付小程序H5JSAPI的流程

因业务须要，开发微信领取性能，波及三种领取形式：

JSAPI 领取：微信内网页领取，须要开明微信服务号
小程序领取：在小程序中领取，须要开明小程序
H5 领取：在手机浏览器（出微信内网爷）中网页领取

应用微信领取的前提必开明微信商户号，要应用到那种的领取形式要前需在商户平台开明（要审核）。

领取的钱最终都会到商户号里（个别由公司财务开明）。

开发微信领取的过程中大大小小坑还是踩了不少，终于做完了，整顿下开发流程。

参考：

微信领取-接入指引
微信领取-开发文档

小程序领取

开发流程

小程序端申请创立订单接口，后端对立下单获取 orderId 并返回
小程序端获取通过wx.login()获取code
小程序端拿这code和orderId申请后端接口，获取领取所需数据
获取领取所需数据之后，小程序端调用wx.requestPayment()接口，间接调用起领取页面
判断是否领取胜利后的逻辑

伪代码

async function wxPay(goodId) {
  // 1. 创立订单 获取orderId
  let orderId = await ajax("POST", "/api/OrderProgram/CreateTheOrder", {
    goodId, // 商品id
  });
  // 2. 取得 code
  let code = await wxlogin(); // 基于pr封装的wx.login()办法
  // 3. 获取领取的数据
  let payData = await ajax("POST", "/api/OrderProgram/WxXcxPay", {
    orderId,
    code,
  });
  // 4. 发动领取
  let res = await payment(payData); // 基于pr封装的wx.requestPayment()办法
  // 5. 判断是否领取胜利
  let payResult = res.errMsg;
  if (payResult == "requestPayment:ok") {
    console.log("领取胜利");
  } else if (payResult == "requestPayment:fail cancel") {
    console.log("用户勾销领取");
  } else {
    console.log("领取失败");
  }
}

注意事项

申请微信小程序账号
申请胜利可拿到 AppID（小程序 id）和 AppSecret（小程序密钥）
申请类型为企业性质，否则无奈接入微信领取
微信小程序认证
通过认证的小程序能力接入微信领取和绑定商户平台
申请商户平台账号
须要第一步申请的 AppID
申请胜利可拿到 MchID（商户 id）和 MchKey（商户密钥）
信小程序关联商户号
微信和商户都认证胜利后，在微信后盾微信领取菜单中进行关联
接入微信领取
在微信后盾微信领取菜单中进行接入

参考

小程序领取文档
小程序开发文档

H5 领取

开发流程

前端端申请创立订单接口，后端对立下单获取 orderId 并返回
前端带着 orderId 申请领取接口，取得 mweb_url，
而后跳转 mweb_url 会跳转微信主动调用微信领取
领取后返回领取页，判断是否领取胜利（需发送申请后端查问）
4.1 刷新页面，获取最新的领取（订单）状态。
4.2 设置一个的按钮”我已领取”，让用户点击主动查问状态。

伪代码

async function wxH5Pay(goodId) {
  // 1. 创立订单 获取orderId
  let orderId = await ajax("POST", "/api/OrderProgram/CreateTheOrder", {
    goodId, // 商品id
  });
  // 2. 获取领取跳转的URL
  let mweb_url = await ajax("POST", "/api/OrderProgram/WxH5Pay", { orderId });
  // 3. 跳转URL去微信领取
  if (mweb_url) {
    location.href = mweb_url;
  } else {
    console.log("回调地址出错");
  }
  // 4. 领取后返回领取页，判断是否领取胜利
  // 4.1 刷新页面，获取最新的订单(商品)状态。
  // 4.2 设置一个"我已领取"的按钮，让用户点击之后查问状态。
}

注意事项

在商户平台设置正确的领取域名
调试须要在线上，如果嫌麻烦能够应用内网穿透（Ngrok 或花生壳）
需对redirect_url进行urlencode解决
H5 领取不能间接在微信客户端内调起，请在内部浏览器调起。

参考

微信领取-H5 领取-开发步骤

JSAPI 领取（微信内网页领取）

开发流程

商品页

前端商品页创立订单，在后端对立下单后获取 orderId
前端带着 orderId 跳转到领取页，

领取页

获取 code
1. 第一次进入页面，判断是否门路中有 code
2. 没有 code，申请数据跳转受权页面，code 会通过回调地址一起返回回来
3. 拿到 code，发送给后端，后端解析到 openid，保留好。
点击确定领取按钮，触发 wxPay() 办法
1. 发送 orderId 给后端，获取 wxData
2. wxData 中蕴含 wx.config 和 wx.chooseWXPay 两个接口的数据。
3. 先调用 wx.config()而后在调用 wx.chooseWXPay()，如果一切正常，领取页面就会弹出。
领取状态通过后端去查问

伪代码

商品页

// 1. 创立订单 获取orderId
let orderId = await ajax("POST", "/api/OrderProgram/CreateTheOrder", {
  goodId, // 商品id
});
// 2. 携带id 跳转到领取页
this.$router.push({ name: "wx_pay_page", params: { orderId: id } });

入口文件(main.js)

// main.js 引入 js-sdk
import wx from "weixin-js-sdk";

领取页 HTML

<template>
  <div>
    <button @click="wxPay">点击领取</button>
  </div>
</template>

领取页 JS

// Vue
data(){
    return {
        orderId: this.$route.params.orderId, // 订单id
        url: '',// 获取code的url
        wxData: null,// js-sdk接口所需的数据
    }
},
mounted(){
    // 判断是否有code
    this.getCode()
}
methods: {
    getCode() {
        var code = this.getUrlPram("code");
        if (code != null) {
            this.code = code;
            // 拿到 code 发给 后端
            this.sendCode(code);
        } else {
            // 去拿code
            this.getUrl();
        }
    },
    getUrl() {
        // 申请后端拿到url所需数据，而后跳转页面在通过回调地址返回，获取code.
        this.axios
            .post("/api/OrderProgram/GetOpenidAndAccessToken", {
                orderId: this.orderId,
            })
            .then((data) => {
                this.url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${data.appId}&redirect_uri=${data.redirect_uri}&response_type=${data.response_type}&scope=${data.scope}&state=${data.state}`;
                window.location.href = this.url;
            })
            .catch((err) => {
                console.log(err);
            });
    },
    sendCode(code) {
        // 发送code给后端 后端解析出openid
        this.axios
            .post("/api/OrderProgram/GetOpenidAndAccessTokenFromCode", {
                code: code,
            })
            .then((res) => {
                console.log(res);
            })
            .catch((err) => {
                console.log(err);
            });
    },
    wxPay: async function() {
        // 发送orderid，获取wx.chooseWXPay和wx.config所需的参数
        this.wxData = await this.axios.post(
            "/api/OrderProgram/WxJSAPIPay",
            { orderId: this.orderId }
        );
        let wxConfigData = this.wxData.wxConfigData // 获取wx.chooseWXPay()所需数据
        let wxPayData = this.wxData.wxPayData;// 获取wx.config()所需数据
        this.$wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert进去，若要查看传入的参数，能够在pc端关上，参数信息会通过log打出，仅在pc端时才会打印。
            appId: wxConfigData.appId, // 必填，公众号的惟一标识
            timestamp: wxConfigData.timeStamp, // 必填，生成签名的工夫戳
            nonceStr: wxConfigData.nonceStr, // 必填，生成签名的随机串
            signature: wxConfigData.paySign, // 必填，签名
            jsApiList: [
                "chooseWXPay",
            ],
        });
        // 执行领取
        this.$wx.chooseWXPay({
            timestamp: wxPayData.timeStamp, // 领取签名工夫戳，留神微信jssdk中的所有应用timestamp字段均为小写。但最新版的领取后盾生成签名应用的timeStamp字段名需大写其中的S字符
            nonceStr: wxPayData.nonceStr, // 领取签名随机串，不长于 32 位
            package: wxPayData.package, // 对立领取接口返回的prepay_id参数值，提交格局如：prepay_id=\*\*\*）
            signType: wxPayData.signType, // 签名形式，默认为'SHA1'，应用新版领取需传入'MD5'
            paySign: wxPayData.paySign, // 领取签名
            success: (res) => {
                this.$toast("领取胜利");
            },
            fail: (err) => {
                this.$toast("领取失败");
            },
        });
    },
}

同时反对 H5 领取和 JSAPI 领取

// 在创立订单之后，就判断环境应用哪种办法领取。
if (isWx()) {
  this.WXPay(orderId); // 带着orderId跳转到领取页逻辑
} else {
  this.H5Pay(orderId); // 执行下面H5领取中的创立订单之后的逻辑
}
// 判断是否是微信浏览器
function isWx() {
  let uAgent = navigator.userAgent.toLowerCase();
  reutrn(/micromessenger/.test(uAgent)) ? true : false;
}

注意事项

开明微信商户号 – 设置领取目录（如果是 Vue 这类 SPA 页面，到根目录即可，也就是#号之前的地址）
开明微信公众号（服务号） – 设置平安域名、设置受权域名
收集参数：appId 和 AppSecret
增加 Web 开发工具开发者（须要开发者同时开发者关注开发的微信公众号和微信公众账号平安助手）参考文档
[图片上传失败…(image-b07878-1605777597831)]
设置回调域名（例如：www.xx.com/pay，最初获取的 code 会拼在此回调地址后返回，返回后如www.xx.com/pay?code=xxxx）参考 1
获取 code
- 参考获取 code 文档
- 在微信客户端网页关上受权地址，跳转之后，在返回的回调地址之后拿到 code：

https://open.weixin.qq.com/connect/oauth2/authorize
?appid=你的appid
&redirect_uri=你的回调地址（拿到code后返回）
&response_type=code（返回类型，默认code）
&scope=snsapi_base（受权范畴，静默受权拿到openid）
&state=STATE(自定义状态，非必填)
#wechat_redirect（重定向应用必须携带）

redirect_uri参数要和你在微信公众号里设置的回调域名统一（例如：www.xx.com/pay）,须要留神的是这 url 须要urlEncode。

申请这个地址之后，code 会以你设置的redirect_uri地址里的参数带回来，拿到之后传给后端就行了。

前端引入 js-skd
- 应用script引入js-sdk
- 下载应用 npm 包weixin-js-sdk
获取 wx.config 的参数
获取 wx.chooseWXPay 所需的参数

参考

微信领取-JSAPI
微信公众号-网页受权
JS-SDK 开发文档

总结

整个流程走下来，给我的体验是：小程序领取最方面（因为配置少），其次是 H5，JSAPI 领取最麻烦（文章一多半都在写它）

在微信领取性能开发过程中，其实最麻烦的不是开发流程，而是他的各种配置和受权流程，为了拿到所需的参数而来回折腾。

开发过程中的一些参数是常常用到的，如 appid、openid、orderId

领取流程大径雷同，先获取到用户的 openid，晓得你是谁，而后对立下单拿到 orderId 再去解决不同平台的领取形式

开发时候用到的相干文档，肯定要认真浏览二遍以上为止！！

遇到问题不要死刚，多百度多 Google，说不准你遇到的问题曾经有有数的人遇到过并且曾经有成熟的解决方案了。

前端和后端要多沟通，有什么问题(难点)随时反馈，须要什么参数好好说，遇到观点不统一的时候千万要留神管制住情绪，切莫撕逼（.——.）。

因为自己程度无限，对后端流程懂得不多，只能以前端的角度来梳理整个领取流程。

以上，心愿对你有所帮忙。

关于前端:从前端的角度来梳理微信支付小程序H5JSAPI的流程

小程序领取

开发流程

伪代码

注意事项

参考

H5 领取

开发流程

伪代码

注意事项

参考

JSAPI 领取（微信内网页领取）

开发流程

伪代码

同时反对 H5 领取和 JSAPI 领取

注意事项

参考

总结

评论

发表回复取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

关于前端:从前端的角度来梳理微信支付小程序H5JSAPI的流程

小程序领取

开发流程

伪代码

注意事项

参考

H5 领取

开发流程

伪代码

注意事项

参考

JSAPI 领取（微信内网页领取）

开发流程

伪代码

同时反对 H5 领取和 JSAPI 领取

注意事项

参考

总结

评论

发表回复 取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

发表回复取消回复