前端微信支付与支付宝支付

最新推荐文章于 2025-07-04 09:35:19 发布

老王可喜欢你了

最新推荐文章于 2025-07-04 09:35:19 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签： java vue.js javascript

本文链接：https://blog.youkuaiyun.com/weixin_48333948/article/details/110835503

本文介绍了移动端的微信支付和支付宝支付流程。对于微信支付，区分了微信内与微信外支付，详细阐述了各自的操作步骤，包括后端返回的URL跳转和使用WeixinJSBridge进行微信内支付。对于支付宝支付，主要讨论了H5支付，描述了后端生成订单后前端如何处理form表单进行支付页面跳转。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

移动端微信支付

在移动端微信支付分为微信内支付和微信外支付。
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.<