此文章为记录学习应用。如有舛误，烦请各位大佬指教（鞠躬
介绍
h5页面，集成了
- 微信浏览器环境领取（
wx_pub） - 支付宝手机网站领取（
alipay_wap） - 微信小程序领取（
wx_lite） - app领取（与我司app交互，由app调起微信app
wx/支付宝appalipay领取）
领取流程
先附上文档PING++ H5 SDK 接入指南
大抵流程如下：
筹备后端接口参数=>调起后端接口获取ping++ charge对象 => 拿charge对象调用ping++ sdk => 获取ping++ 领取后果/解决领取后果
环境判断
因为是h5嵌在各种平台外面，所以须要判断以后是哪个平台。至于怎么判断的，自行解决哈哈哈哈
created() { const channels = [ { icon: 'ic_wechat', title: '微信领取', tips: '举荐装置微信5.0及以上版本的用户应用', name: 'wx_pub' }, { icon: 'ic_alipay', title: '支付宝领取', tips: '举荐有支付宝账户的用户应用', name: 'alipay_wap' }, ] if(this.$env.wechatApplet) { this.paySubChannel = 'wx_lite' // 默认理论领取渠道 this.paySubChannels = [] // 理论可选的领取渠道数组 } else if(this.$env.wechat) { this.paySubChannel = 'wx_pub' this.paySubChannels = channels.slice(0, 1) } else if(this.$env.alipay) { this.paySubChannel = 'alipay_wap' this.paySubChannels = channels.slice(1) } else { // app this.paySubChannel = '' this.paySubChannels = channels } },筹备后端接口参数以获取ping++ charge对象
在调用后盾接口获取ping++ charge对象前，一些不同渠道领取的所需参数要筹备好。
tips: params是申请后端接口须要的参数对象wx_pub领取
if(this.paySubChannel === 'wx_pub') { params.openId = getOpenId() // 对于openId如何获取本篇不探讨}alipay_wap领取
因为ping++会在successUrl前面增加参数?result=success/fail等等，导致咱们无奈在这里先配置参数：
params.successUrl = `${window.location.origin}/#/payResult?serialNo=${this.payInfo?.serialNo}`所以采纳动静路由的模式去传递领取后果页所需的参数：
if(this.paySubChannel === 'alipay_wap') { params.successUrl = `${window.location.origin}/#/payResult/${this.payInfo?.serialNo}/${this.otherProp}`}路由配置
{ path: '/payResult/:serialNo/:otherProp', name: 'payResult', component: () => import('views/common/payResult/index.vue'), meta: { title: '缴费后果' }},而后咱们在领取后果页就能够通过this.$route.params获取到serialNo otherProp这两个参数。所以你的业务如果须要带token能够间接加个/:token。查看文档# 动静路由获取更多对于动静路由的常识o(￣▽￣)ブ
wx_lite领取
背景：h5嵌在小程序webview里边
h5代码：
// 先引入wx sdkimport wx from 'weixin-js-sdk'if(this.paySubChannel === 'wx_lite') { // 间接重定向到小程序领取页 wx.miniProgram.redirectTo({ url: `/pages/webview/pay?params=${JSON.stringify(params)}` })}而后所有流程交给小程序本人解决，即：筹备后端接口参数=>调起后端接口获取ping++ charge对象 => 拿charge对象调用ping++ sdk => 获取ping++ 领取后果/解决领取后果。
留神：小程序领取params也须要openId，这个能够在小程序里边获取。
与app交互，让app调起领取
这个很简略，就是把参数给到app，让app调起对应微信/支付宝领取即可。
咱们页面是有让用户抉择微信还是支付宝领取的，所以选定后，把ping ++ charge对象给app：
async handleAppPay(params) { try { let channel switch (this.paySubChannel) { case 'wx_pub': channel = 'wx' break; case 'alipay_wap': channel = 'alipay' break; default: break; } params.paySubChannel = channel if(!this.pingPayParams) { const { data } = await api.req(JSON.stringify(params), 'payRequest') this.pingPayParams = data } // appPay是与app交互的一个协定 appPay({ PingParam: JSON.stringify(this.pingPayParams), }) // 注册让app回调的js函数 methodCalledByNative('handlePayResult', (result) => this.handlePayResult(result)) this.$on("hook:beforeDestroy", () => (window.handlePayResult = null)); } catch (error) { console.log(error) }},获取Ping++领取后果/解决领取后果
支付宝网页领取实现会间接走successUrl，下面曾经解决了
// app/微信js api/微信小程序领取完会走这里async handlePayResult(result) { console.log('ping++领取后果：', result); switch (result) { case 'success': this.$router.push({ name: 'payResult', params: { otherProp: this.otherProp, serialNo: this.payInfo.serialNo } }) break case 'fail': this.$router.push({ name: 'payResult', params: { result: 'fail' } }) break case 'cancel': console.log('勾销领取') break case 'invalid': this.$toast.fail(this.paySubChannel === 'wx_pub' ? '用户没有装置微信' : '用户没有装置支付宝') break default: break }},领取后果页
async created() { const { serialNo, otherProp, result } = this.$route.params if(result === 'fail') { // 能够间接展现领取失败 return } this.otherProp = otherProp this.serialNo = serialNo this.queryPayResult() },此文章为记录学习应用。如有舛误，烦请各位大佬指教（鞠躬