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

27次阅读

共计 5724 个字符，预计需要花费 15 分钟才能阅读完成。

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

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

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

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

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

参考：

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

小程序领取

开发流程

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

伪代码

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("领取失败");
  }
}

注意事项

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

参考

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

H5 领取

开发流程

  1. 前端端申请创立订单接口，后端对立下单获取 orderId 并返回
  2. 前端带着 orderId 申请领取接口，取得 mweb_url，
  3. 而后跳转 mweb_url 会跳转微信主动调用微信领取
  4. 领取后返回领取页，判断是否领取胜利（需发送申请后端查问）
    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 领取（微信内网页领取）

开发流程

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

  1. 获取 code

    1. 第一次进入页面，判断是否门路中有 code
    2. 没有 code，申请数据跳转受权页面，code 会通过回调地址一起返回回来
    3. 拿到 code，发送给后端，后端解析到 openid，保留好。

  2. 点击确定领取按钮，触发 wxPay() 办法

    1. 发送 orderId 给后端，获取 wxData
    2. wxData 中蕴含 wx.config 和 wx.chooseWXPay 两个接口的数据。
    3. 先调用 wx.config()而后在调用 wx.chooseWXPay()，如果一切正常，领取页面就会弹出。
  3. 领取状态通过后端去查问

伪代码

  • 商品页
// 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，说不准你遇到的问题曾经有有数的人遇到过并且曾经有成熟的解决方案了。

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

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

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

正文完
前端
发表至： 前端
2020-11-19
 0
关于前端:盘点-ES12-中的一些新特性
快速读懂-JS-原型链
关于前端:React项目中如何实现一个简单的锚点目录定位
关于前端:vue安装vuecli和查看版本号时报错npm-ERR-code-EEXISTvue-无法加载文件