H5网站或uni-app打包的H5如何接入微信公众号支付

H5网站或uni-app打包的H5如何接入微信公众号支付

http://www.linfengya.cn/?post=39

我这边以一个uniapp打包的H5网站为例（普通H5网站依然通用，比葫芦划瓢就ok了）

uniapp官网的文档里面没有封装好的支付接口 所以纵使是用uniapp写的H5 依旧要按照普通H5接入公众号支付的流程，

前提准备：

①确保微信公众号已申请了微信支付

②微信公众号的appid

③微信公众号的secret（一般前端不需要用这个，后台需要用这个）

④公众号配置安全域名

流程: ①通过授权拿到code

​ ②通过code拿到支付所需要的用到参数openid

​ ③通过wx.config接口注入权限验证配置

​ ④如果预下单签名校验通过 则执行第五步 (这一步会出现很多错误 比如 缺少什么参数,签名错误,非法调用等)

​ ⑤使用WeixinJSBridge.invoke微信内H5调起支付 就ok了

下面开始贴代码：

首先使用npm安装一下微信的jsApi (这个应该都会吧 就跟vue使用npm安装依赖一样)

初始化：
npm init -y
安装微信模块：
npm install jweixin-module --save



H5的话 要引入js
 <script src="http://res2.wx.qq.com/open/js/jweixin-1.4.0.js" type="text/javascript" charset="utf-8"></script>

然后走微信授权，(因为我这边是帐号登录注册，无需获取用户的微信信息，所以走的是静默授权)，顺便科普一下微信的两种授权(我谷歌的) :公众号授权有两种方式，一种是静默授权，用户无感知，但无法获取用户的基础信息，如果要想拉取到用户信息，则需要使用另一种授权方式，由于这种方式涉及到隐私，所以需要用户同意才行。

获取的方式则是

https://open.weixin.qq.com/connect/oauth2/authorize?appid=KaTeX parse error: Expected 'EOF', got '&' at position 8: {appid}&̲redirect_uri={uri}&response_type=code&scope=${scope}&state=123#wechat_redirect

  //登录成功后跳转的首页域名  有些文章中写的这个地址需要进行encodeURIComponent()加密   我这里没有进行加密
var uri = 'http://www.linfeng******.com/index.html';  
//公众号的appid
var appid = 'wx2aec******62811f';

window.location.replace('https://open.weixin.qq.com/connect/oauth2/authorize?appid='+appid +'&redirect_uri='+uri+'&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect');

通过走链接可以解析跳转到首页之后的url拿到code

首页调用此方法 会返回一个字符串 如果有值 则此值为code

function urlGetCode(){
    var indexUrl = location.search.substr(1);//截取到当前的地址
    var items = indexUrl.split('&');
    var item;
    var code;
    for (let a = 0; a < items.length; a++) {
        item = items[a].split("=");
        if (item[0] == 'code') {
            code = item[1];
            return code;
        }
    }
}

我们拿到code之后 需要调用接口 使用code 换取一个openid

获取code后，请求以下链接获取access_token： https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

参数说明

参数	是否必须	说明
appid	是	公众号的唯一标识
secret	是	公众号的appsecret
code	是	填写第一步获取的code参数
grant_type	是	填写为authorization_code

前端可以调用这个接口，但是会跨域，所以这个接口一般是由后台进行封装的 你只需要把code传给后台，让后台给你返回一个openid就行了，然后把openid用缓存存起来，因为预下单支付前要用到这个openid

详见微信开发文档： https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html#1

然后我们来到订单支付页面 调用支付接口之后后台会给你返回一些预下单的参数 例如

{
	"appId": "wx2*********62811f",
	"nonceStr": "b0c2e4491a8a5f06a1f4c0d81cd3c40c",
	"orderNo": 122816*********7682,
	"package": "prepay_id=wx14120839*********6f960fd1318413600",
	"sign": "F581AD6144487*********4B1CBC0AB3",
	"signType": "MD5",
	"timeStamp": 1581653318,
	"totalFee": 190
}

然后我们拿到这些参数之后 通过需要通过config接口注入权限验证配置

wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: [] // 必填，需要使用的JS接口列表
});

详见微信开发文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#4

如果debug为true 会alert一个弹窗 弹窗内容如果是｛“errMsg”:“config:ok”｝ 则表明验证通过

接下来就可以在微信内H5调起支付啦

WeixinJSBridge.invoke(
    'getBrandWCPayRequest', {
    appId: appId, //公众号名称，由商户传入
    timeStamp: timestamp, //时间戳，自1970年以来的秒数
    nonceStr: nonceStr, //随机串
    package: data.package,
    signType: 'MD5', //微信签名方式：
    paySign: sign //微信签名
},
    function (res) {
        if (res.err_msg == 'get_brand_wcpay_request:ok') {
            // 使用以上方式判断前端返回,微信团队郑重提示：
            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
            callback(res)
        } else if (res.err_msg == 'get_brand_wcpay_request:cancel') {
            errorCallback(res)
        }
    }
)

详见微信支付文档：https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7

到这一步如果参数和签名验证通过，就完成了 如果签名错误 可以使用签名校验工具

https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=20_1

完整代码

最后上一份完整的代码 因为业务需求 不止一个地方需要用到支付，比如订单的待支付时也要用到支付 ， 订单详情里也需要用到，所以推荐大家把支付封装一下 ，可以减少很多代码量

1.首先使用npm安装一下微信的jsApi (这个应该都会吧 就跟vue使用npm安装依赖一样)

初始化：
npm init -y
安装微信模块：
npm install jweixin-module --save



H5的话 要引入js
 <script src="http://res2.wx.qq.com/open/js/jweixin-1.4.0.js" type="text/javascript" charset="utf-8"></script>

2.在uniapp的common下新建一个wxApi.js文件

wxApi.js

/*
    微信(公众号)支付方法
*/
const wx = require('jweixin-module');
const wexinPay = (data, callback, errorCallback) => {
	let [appId, timestamp, nonceStr, signature, packages, sign] = [data.appId, data.timeStamp, data.nonceStr, data.sign,
		data.package, data.sign
	];
	
	wx.config({
		debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
		appId, // 必填，公众号的唯一标识
		timestamp, // 必填，生成签名的时间戳
		nonceStr, // 必填，生成签名的随机串
		signature, // 必填，签名，见附录1
		jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
	});
	WeixinJSBridge.invoke(
		'getBrandWCPayRequest', {
			appId: appId, //公众号名称，由商户传入
			timeStamp: timestamp, //时间戳，自1970年以来的秒数
			nonceStr: nonceStr, //随机串
			package: data.package,
			signType: 'MD5', //微信签名方式：
			paySign: sign //微信签名
		},
		function(res) {
			if (res.err_msg == 'get_brand_wcpay_request:ok') {
				// 使用以上方式判断前端返回,微信团队郑重提示：
				//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
				//支付成功回调
				callback(res)
			} else if (res.err_msg == 'get_brand_wcpay_request:cancel') {
				//支付失败回调
				errorCallback(res)
			}
		}
	)
}

export default {
	wexinPay
}

3.在main.js里导入挂载一下（一定要用条件编译，否则在打包APP或在手机基座运行时会报 ‘jweixin’ of undefined,造成手机白屏）

// #ifdef H5
//导入 //（一定要用条件编译，否则在打包APP或在手机基座运行时会报 ‘jweixin’ of undefined,造成手机白屏）
import wxApi from './common/wxApi.js'
//挂载
Vue.prototype.$wxPay = wxApi.wexinPay
// #endif

4.在页面上调用支付 pay.vue

this.$wxPay(payInfo, function (res) {
    /*成功的回调*/
    console.log("支付成功")
}, function (e) {
    /**失败的回调*/
     console.log("支付失败或取消支付")
})


//该方法的第一个参数payInfo为调用后台支付返回的预下单参数
//打印payInfo
//{
//	"appId": "wx2*********62811f",
//	"nonceStr": "b0c2e4491a8a5f06a1f4c0d81cd3c40c",
//	"orderNo": 122816*********7682,
//	"package": "prepay_id=wx14120839*********6f960fd1318413600",
//	"sign": "F581AD6144487*********4B1CBC0AB3",
//	"signType": "MD5",
//	"timeStamp": 1581653318,
//	"totalFee": 190
//}
//第二个参数是成功回调  第三个参数是失败回调

转载自：小枫枫不疯喔

原文地址： 《H5网站或uni-app打包的H5如何接入微信公众号支付》 发布于2020-2-14