一、移动端支付宝支付
1.支付宝中的H5支付和PC端的一样，主要是后端的工作量，后端完成订单的生成之后返给前端的是form表单，前端只需要负责做页面的跳转即可：
//立即支付按钮onSubmit() {if (this.payWay == 1) {//支付宝支付this.$router.push({path: '/aliPay', query: {orderId: this.orderId}});} else if (this.payWay == 2) {//微信支付，这里跳转到本文的微信支付模块的3.步骤handelPay方法}},
2.选择支付宝方式之后进入支付宝承载页面：
<template><div v-html="html"></div></template><script>export default {data(){return{html:''}},methods:{fetchVideoPay(){let param={orderId: this.$route.query.orderId};this.$api.orderpage.videoAliPay(param).then( res => {this.html = res.data;this.$nextTick(() => {document.forms[0].submit() //渲染支付宝支付页面})})}},mounted(){this.fetchVideoPay()}}</script>
当然不想写承载页的还有其他方法调起支付，具体逻辑具体分析，根据不同的业务类型去变通比如：
const div = document.createElement('div');div.innerHTML = (res.data); //res.data是返回的表单document.body.appendChild(div);document.forms.alipaysubmit.submit();
二、移动端微信支付
在移动端微信支付分为微信内支付和微信外支付。
1.在订单组件中选择支付方式之后在支付页面先去判断是否是在微信内：
//判断是否微信is_weixn(){var ua = window.navigator.userAgent.toLowerCase();if (ua.match(/MicroMessenger/i) == 'micromessenger'){return true;} else {return false;}},
2.触发立即支付方法，根据微信内外的不同请求后端不同的接口，如果是微信外支付非常简单了~
3.【微信外支付】下面先看微信外支付，官方文档也写的很清楚，后端返回一个url地址，前端的工作就是拿到这个url地址进行跳转就可以了，看一下2-3步代码：
handelPay() {if(this.wechatpayType == 'wxpay'){// console.log("微信内支付")let data={amount:this.number,}this.$http.insideWeChatPay(data).then( res => {if(res.data.code === 200){this.weChatParameter=res.data.data// console.log(this.weChatParameter,"微信内支付需要参数")this.weixinPay()}else{Toast({message: res.data.msg,position: 'middle',duration: 1000});}});} else if(this.wechatpayType == 'wxpay_php'){// console.log("微信外支付")let data={amount:this.number,}this.$http.outsideWeChatPay(data).then( res => {if(res.data.code === 200){let url=res.data.datawindow.location.replace(url) //这里是后端返回的URL直接进行跳转即可完成微信外支付}else{Toast({message: res.data.msg,position: 'middle',duration: 1000});}});}},
4.在调起支付的页面监听从其他页面返回的事件，进行一些刷新业务逻辑的实现即可，至此微信外支付已经完成。
document.addEventListener("visibilitychange", function() {//需要的操作});
5.【微信内支付】微信内支付比起微信外支付稍微复杂一点，但是也不难，（3步骤代码里面已经请求支付方式接口拿到了微信内支付所需要的参数）根据官方API
微信内置js对象 WeixinJSBridge，进行开发，至此微信浏览器内支付已经完成
//解决微信内置对象报错weixinPay(data){var vm= this;if (typeof WeixinJSBridge == "undefined"){if( document.addEventListener ){document.addEventListener('WeixinJSBridgeReady', vm.onBridgeReady(data), false);}else if (document.attachEvent){document.attachEvent('WeixinJSBridgeReady', vm.onBridgeReady(data));document.attachEvent('onWeixinJSBridgeReady',vm.onBridgeReady(data));}}else{vm.onBridgeReady();}},//微信内置浏览器类，weChatParameter对象中的参数是3.步骤代码中从后端获取的数据onBridgeReady(){var vm = this;var timestamp=Math.round(vm.weChatParameter.timeStamp).toString();WeixinJSBridge.invoke('getBrandWCPayRequest',{debug:true,"appId":vm.weChatParameter.appId,//公众号名称，由商户传入"timeStamp":timestamp, //时间戳，自1970年以来的秒数"nonceStr":vm.weChatParameter.nonceStr, //随机串"package":vm.weChatParameter.package,"signType":vm.weChatParameter.signType, //微信签名方式："paySign":vm.weChatParameter.paySign, //微信签名jsApiList: ['chooseWXPay']},function(res){// 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。if(res.err_msg == "get_brand_wcpay_request:ok" ){Toast({message: '支付成功',position: 'middle',duration: 3000});vm.number=nullvm.$router.go(-1)//window.location.href = vm.BASE_URL + 'index.html#/depositResult'}else{Toast({message: '支付失败',position: 'middle',duration: 3000});}});},
三、常见问题
1、回调页面
正常流程用户支付完成后会返回至发起支付的页面，如需返回至指定页面，则可以在MWEB_URL后拼接上redirect_url参数，来指定回调页面。
如，您希望用户支付完成后跳转至，则可以做如下处理：
//假设您通过统一下单接口获到的MWEB_URL= /cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx1110163838f231619da20804912345&package=1037687096//则拼接后的地址为MWEB_URL= /cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx1110163838f231619da20804912345&package=1037687096&redirect_url=https%3A%2F%
2、注意
1）.需对redirect_url进行urlencode处理
2）.由于设置redirect_url后,回跳指定页面的操作可能发生在：1,微信支付中间页调起微信收银台后超过5秒 2,用户点击“取消支付“或支付完成后点“完成”按钮。因此无法保证页面回跳时，支付流程已结束，所以商户设置的redirect_url地址不能自动执行查单操作，应让用户去点击按钮触发查单操作。回跳页面展示效果可参考下图
四、其它常见错误
如果觉得《vue 移动端H5微信支付和支付宝支付》对你有帮助，请点赞、收藏，并留下你的观点哦！
