A: Сканирование кода на оплату, H5 оплачивает разницу и JSAPI оплачено?
1:Отсканируйте код для оплаты，适合用PC端。拿到后台接口返回的链接，前端利用qrcodejs2插件生成二维码扫码即可 код показывает, как показано ниже
<div class="pay_wrap">
<div ref="qrCodeUrl" class="qrcode"></div>
</div>
1：(1): 生成二维码遇到的坑？ Because I encountered switching conditions can generate different two-dimensional code, each time you switch pages all to show the latest two-dimensional code, the solution is to switch each time using native js put all hidden, and then displays the last code show as ниже
this.$refs.qrCodeUrl.childNodes.forEach(item => { item.style.display='none' }); this.$refs.qrCodeUrl.lastChild.style.display='block'
getCheckResult(orderNo) {
this.num = setInterval(async()=>{
let data = await this.checkResult({
orderNo
})
if ( data == 1) {
this._close()
// 直接跳到列表页
if (this.type !== 'index') {
this._success()
this.isShowPaySuccess = true
}else {
this.isShowPaySuccess = true
// this.$emit('success')
}
}else if(data == 2 ) {
showMessage({
type: 'error',
message: '支付失败'
})
clearInterval(this.num);
}
},5000)
// 同时设置一个定时任务，10分钟后，终止查询，认为付款失败
setTimeout(function () {
clearInterval(this.num);
showMessage({
type: 'error',
message: '支付失败'
})
}, 300000)
},
1: (3): Последнее, что нужно помнить, это то, что таймер должен быть очищен, когда страница закрыта.Вы можете использовать функцию уничтожения крючка vue.Код выглядит следующим образом
destroyed() {
if (this.num) {
clearInterval(this.num);
}
},
2: jsapi-платеж: Легко спутать оплату h5 и оплату jsapi.В то время я разработал два набора, один набор на стороне ПК использовал оплату скан-кода, а страница h5 от входа в официальный аккаунт WeChat. В то время я думал, что платеж в официальном аккаунте WeChat был платежом h5, а затем прочитал разработку документа, при вызове интерфейса я обнаружил, что пожалуйста, откройте соединение вне WeChat,Затем я внимательно прочитал документ и обнаружил, что он должен быть разработан с платежом jsapi, платеж JSAPI можно открыть только в браузере WeChat.
2: (1): для оплаты jsapi требуется авторизация WeChat для получения кода.В проекте, который я разработал, много страниц, требующих оплаты WeChat, поэтому я передаю адрес текущей страницы, и ссылка, возвращаемая фоновым интерфейсом, будет перенаправлять моя страница для авторизации и Код будет вклеен после подключения. чтобы получить код. 2:(2): Яма встретилась? Если я перейду на подключение на текущей странице, то не смогу получить код, и пользовательский опыт будет очень плохим, т.к. на текущей странице, когда я перехожу на текущую страницу для авторизации, длинная полоса прокрутки будет появляться. Так что авторизируйтесь на предыдущей странице, код такой
let url = await this.getCode({
uri: `${process.env.VUE_APP_THIRD_PARTY_HOST}/wechat/nurse-profile-pay?serviceType=2&type=index`
})
window.location.href = url
2:(3): const code = this.$route.query.code Получите код для запроса фонового интерфейса для получения параметров, необходимых для оплаты WeChat, а затем вызовите оплату WeChat, код выглядит следующим образом.
onBridgeReady() {
// 下面这些参数都是通过后端传回来的
const that = this
window.WeixinJSBridge.invoke(
'getBrandWCPayRequest',
{
appId:this.dataInvoke.appId, //公众号名称，由商户传入
timeStamp:this.dataInvoke.timeStamp, //时间戳，自1970年以来的秒数
nonceStr:this.dataInvoke.nonceStr, //随机串
package:`prepay_id=${this.dataInvoke.prepayId}`,
signType:'MD5', //微信签名方式：
paySign:this.dataInvoke.paySign
},
function(res) {
if (res.err_msg == 'get_brand_wcpay_request:ok') {
Toast('支付成功');
setTimeout(()=>{
console.log(that.$route.query.serviceType);
if (that.$route.query.serviceType == 3) {
that.$router.push({name: 'NurseMedicalServices'})
}else if (that.$route.query.serviceType == 2&&that.$route.query.type == 'index'){
that.$router.push({name: 'userMedicalServices'})
}else {
that.$router.push({name: 'serviceRegistration'})
}
},500)
} else {
Toast('取消支付');
setTimeout(()=>{
if (that.$route.query.serviceType == 3) {
that.$router.push({name: 'ProfileProlong'})
}else if (that.$route.query.serviceType == 2&&that.$route.query.type == 'index'){
that.$router.push({name: 'userMedicalServices'})
}else {
that.$router.push({name: 'serviceRegistration'})
}
},500)
}
}
);
},
3:оплата h5, наш сценарий использования - отправить текстовое сообщение на мобильный телефон, щелкнуть ссылку, чтобы перейти на страницу h5, и произвести оплату. Этот интерфейс оплаты проще. Просто настройте интерфейс и получите ссылку в фоновом режиме и перейти напрямую, чтобы вызвать платеж WeChat.Следует отметить, что он в основном используется в сценарии, когда версия мобильного браузера с сенсорным экраном запрашивает платеж WeChat. Удобно вызывать платеж WeChat из внешнего браузера.
4: Подводя итог, отладка платежей jsapi более проблематична, потому что его адрес обратного вызова должен быть доменным именем, и это доменное имя необходимо настроить в общедоступной учетной записи WeChat, локальная отладка не может быть отлажена, и его необходимо отправить на тестовый адрес компании для отладки. Вы также можете локально проникнуть во внутреннюю сеть, чтобы получить конфигурацию доменного имени, использовать это доменное имя для авторизации, получения кода, отладки и разработки.
напиши в конце
Если в статье есть ошибки, исправьте их в комментариях, если статья вам поможет, ставьте лайк и подписывайтесь 😊
Эта статья была впервые опубликована на Наггетс, перепечатка без разрешения запрещена 💌