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

参数是否必须说明appid是公众号的唯一标识

secret是公众号的appsecret

code是填写第一步获取的code参数

grant_type是填写为authorization_code

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

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

"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接口列表

});

如果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)

}

}

)

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

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

在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

}

在main.js里导入挂载一下//导入

import wxApi from '@/common/wxApi.js'

//挂载

Vue.prototype.$wxPay = wxApi.wexinPay

在页面上调用支付   pay.vuethis.$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

//}

//第二个参数是成功回调 第三个参数是失败回调