vue h5 公众号支付

Posted 2022-02-20 奥特曼　

由于微信浏览器的限制无法从微信浏览器调起微信支付，需要对接公众号的支付

后端的小伙伴需要做一些微信公众号的配置（商户目录 、域名） 以及 微信商户平台的配置

前端主要的是通过openid 获取 code 来调起后端的接口拿到支付的参数 来对接微信的sdk的方法

首先通过链接  微信官方平台的链接来获取 code 微信开放文档

https://open.weixin.qq.com/connect/oauth2/authorize?appid=xxx&redirect_uri=$encodeURIComponent(window.location.href)&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect

redirect_uri 是要跳转拿到code地址的链接  由于本项目没有特别适合的地方来获取code  所以在首页进行获取

一、获取code

created()
 var ua = navigator.userAgent.toLowerCase();
     if (ua.match(/MicroMessenger/i) == 'micromessenger') 
     if(this.$store.state.user.smallOpenid) 

       else if(!this.$route.query.code)
       this.toWxPay()
     else  
       this.$store.dispatch('user/getOpenId',window.location.href.split('?')[1].split('&')[0].split('=')[1])
     

       else 
        // this.isweChat = '浏览器'
      console.log('浏览器打开的');

      
methods: 
    toWxPay()
          window.location.href=`https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxa9f996fcd50636d4&redirect_uri=$encodeURIComponent(window.location.href)&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect`
    ,

首先判断是否在微信浏览器环境下，如果是 再去判断 是否存在了vuex里  若路由没有code 进行获取code  如果路由有code 调取vuex 把数据保存起来 做一个持久化存储起来

import  getOpenId  from '@/api/home'
export default (
  namespaced: true,
  state: 
    smallOpenid: ''
  ,
  mutations: 
    // 获取用户信息
    editOpenId (state, newOpen) 
      state.smallOpenid = newOpen
    
  ,
  actions: 
    async getOpenId (context, code) 
      try 
        const res = await getOpenId(code)
        console.log('getOpenId', res)
        context.commit('editOpenId', res.data.openid)
        // 保存数据
       catch (err) 
        console.log('getOpenId', err)
      
    
  ,
  modules: 
)

二、支付

安装微信的sdk  概述 | 微信开放文档

npm install jweixin-module --save

var wx = require('jweixin-module')

最严谨的话还是在当前要支付页面判断一下是什么环境 

   var ua = navigator.userAgent.toLowerCase()
    // eslint-disable-next-line eqeqeq
    if (ua.match(/MicroMessenger/i) == 'micromessenger') 
      this.isweChat = '微信'
      console.log('微信打开的')
     else 
      this.isweChat = '浏览器'
      console.log('浏览器打开的')
    

 如果是微信的话需要先通过config进行注册 在进行支付

if (this.isweChat === '微信') 
            console.log('走到支付了')
            wx.config(
              debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
              appId: res.data.pay.appId, // 必填，公众号的唯一标识
              timestamp: res.data.pay.timeStamp, // 必填，生成签名的时间戳
              nonceStr: res.data.pay.nonceStr, // 必填，生成签名的随机串
              signature: res.data.pay.paySign, // 必填，签名
              jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表
            )
            wx.ready(function () 
              wx.chooseWXPay(
                timestamp: res.data.pay.timeStamp, // 时间戳
                nonceStr: res.data.pay.nonceStr, // 随机数
                package: res.data.pay.package, //
                signType: res.data.pay.signType,
                paySign: res.data.pay.paySign, // 签名
                success: function () 
                  console.log('支付成功')
                  // alert('支付成功')
                  window.location.href = window.location.href + '&orderId=' + res.data.order_id
                ,
                cancel: function () 
                  alert('支付取消')
                ,
                fail: function () 
                  alert('支付失败')
                
              )
            )