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
//}
//第二个参数是成功回调 第三个参数是失败回调
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！