微信H5支付实战记录:附前后端实现逻辑

     1.背景描述
     2.实现过程
          1.微信官方 js-sdk安装
          2.公众号设置JS接口安全域名
          3.前端页面代码
          4.服务端相关代码
          5.说一下遇到的问题

1.背景描述

     简单描述一下本文中的支付场景:

1.商品详情页点击提交订单按钮调用创建订单接口,调用服务端下单接口调起微信支付.
2.输入密码之后跳转微信自带的支付成功页面,点击完成跳转支付成功页面.微信自带支付完成页面如下:

2.实现过程

    微信H5中支付需要使用JSSDK,这里直接使用npm封装好的weixin-js-sdk.
官方地址:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#1,下面讲下具体操作步骤.

1.微信官方 js-sdk安装

npm install weixin-js-sdk

安装完成之后项目中的node_moduels会显示weixin-js-sdk文件夹.

2.公众号设置JS接口安全域名

    登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。可以直接填入项目的访问路径,例如我这访问地址是:https://www.abc.top/h5,配置的安全域名就是:www.abc.top/h5.

3.前端页面代码

    简单讲下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, "支付失败!")