1.背景描述
2.实现过程
1.微信官方 js-sdk安装
2.公众号设置JS接口安全域名
3.前端页面代码
4.服务端相关代码
5.说一下遇到的问题
简单描述一下本文中的支付场景:
1.商品详情页点击提交订单按钮调用创建订单接口,调用服务端下单接口调起微信支付.
2.输入密码之后跳转微信自带的支付成功页面,点击完成跳转支付成功页面.微信自带支付完成页面如下:
微信H5中支付需要使用JSSDK,这里直接使用npm封装好的weixin-js-sdk
.
官方地址:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#1,下面讲下具体操作步骤.
npm install weixin-js-sdk
安装完成之后项目中的node_moduels会显示weixin-js-sdk文件夹.
登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。可以直接填入项目的访问路径,例如我这访问地址是:https://www.abc.top/h5,配置的安全域名就是:www.abc.top/h5.
简单讲下weixin-js-sdk中比较重要的逻辑,其中需要服务端配合提供数据.
wx.config:通过config接口注入权限验证配置.需要服务端提供签名信息,实现为服务端接口:getJsApiSignature
wx.chooseWXPay:调起微信支付方法,需要服务端提供下单信息,实现为服务端接口:placeOrder
只有商品详情页和支付完成跳转的支付成功页面,对应页面内容如下:
商品详情页:
<template>
<view>
<view>商品详情页</view>
<button @click="submitOrder()">提交订单</button>
</view>
</template>
<script>
import {
placeOrder,getJsApiSignature} from '../../common/httpApi.js';
import wx from "weixin-js-sdk";
export default {
data() {
return {
timeStamp: "", //wx.chooseWXPay时间戳,自1970年以来的秒数
nonceStr: "", //wx.chooseWXPay随机串
package: "", // wx.chooseWXPayJSAPI下单接口返回的prepay_id参数值
paySign: "", //wx.chooseWXPay微信签名
signType: "" ,//wx.chooseWXPay签名方式
wxConfigTimeStamp: "", //wx.config时间戳,自1970年以来的秒数
wxConfigNonceStr: "", //wx.config随机串
wxConfigSignature: "" //wx.config签名
};
},
mounted(){
// 隐藏导航栏的返回箭头,页面会显示导航栏背景色
document.querySelector('.uni-page-head-hd').style.display = 'none'
// 隐藏导航栏
document.querySelector('.uni-page-head').style.display = 'none'
},
methods:{
async submitOrder(){
// 获取wx.config中需要的配置信息,主要是签名信息
await this.serverGetJsApiSignature()
// 获取wx.chooseWXPay中需要的配置信息,就是后端的下单接口
await this.serverPlaceOrder()
// 调用weixin-js-sdk中封装好的方法
setTimeout( async()=> {
this.wxPay()
}, 1000);
},
wxPay() {
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: "123456", // 必填,公众号的唯一标识
timestamp: this.wxConfigTimeStamp, // 必填,生成签名的时间戳
nonceStr: this.wxConfigNonceStr, // 必填,生成签名的随机串
signature: this.wxConfigSignature, // 必填,签名
jsApiList: [
"chooseWXPay"
], // 必填,需要使用的JS接口列表
});
// wx.config成功后会走wx.ready,失败会走wx.error
wx.ready(() => {
wx.chooseWXPay({
timestamp:this.timeStamp, // 支付签名时间戳,注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
nonceStr: this.nonceStr, // 支付签名随机串,不长于 32 位
package: this.package, // 统一支付接口返回的prepay_id参数值,提交格式如:prepay_id=\*\*\*)
signType: this.signType, // 签名方式,默认为'SHA1',使用新版支付需传入'MD5'
paySign: this.paySign, // 支付签名
success: function (res) {
// 支付成功后的回调函数,点击完成跳转支付成功页面
this.$commonMethod.goTo("/pages/pay/payResult")
},
fail:function(error){
console.log(error, "支付失败!");
}