vue項目h5微信瀏覽器支付

jssdk文檔

網頁授權文檔：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html

支付文檔：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#58

 

 

 

場景：通過微信分享的鏈接，在微信瀏覽器中打開支付。

實現方法，因為只需要openid就可以，所以這里只進行到jssdk的第二步

/api/user.js

export function getopenid(params) { // 獲取微信的openid
  return request({
    url: '/xxx/xxx/getopenid',
    method: 'get',
    params
  })
}

 

方法直接放在pay.vue頁面中：

import { getopenid } from "@/api/user"

  methods: {
    getCodeApi(state){//獲取code
        let urlNow = encodeURIComponent(location.href)  
        // let urlNow = encodeURIComponent(location.href.split('#')[0])
        let scope='snsapi_base';    //應用授權作用域，snsapi_base （不彈出授權頁面，直接跳轉，只能獲取用戶openid），snsapi_userinfo （彈出授權頁面，可通過openid拿到昵稱、性別、所在地。並且， 即使在未關注的情況下，只要用戶授權，也能獲取其信息 ）
        let appid='************';
        let url=`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${urlNow}&response_type=code&scope=${scope}&state=${state}#wechat_redirect`;
        window.location.replace(url);
    },
    getUrlKey(name){//獲取url 參數
         return decodeURIComponent((new RegExp('[?|&]'+name+'='+'([^&;]+?)(&|#|;|$)').exec(location.href)||[,""])[1].replace(/\+/g,'%20'))||null;
    }
}

  created() {
    // this.id = this.$route.query.id
    // console.log(this.id)
    this.price = this.$route.query.price
    this.gid = this.$route.query.id
    this.uid = this.login_info.id
    var ua = window.navigator.userAgent.toLowerCase();
    if(ua.match(/MicroMessenger/i) == 'micromessenger'){
    　　/* 這是微信瀏覽器 */
      this.showAlipay = false
      this.inlineDescList.splice(1,1)
      if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
　　　　　// 移動端
        let code=this.getUrlKey("code")
        if(code){
          getopenid({code:code}).then(res => {
            this.oid = res
          })
         }else{
            this.getCodeApi("123")
         }
      } else {
          // pc
      }
    }else{
    　　/* 不是微信瀏覽器,H5支付 */
      this.showAlipay = true
    }
  },

 

html結構：

<!--非微信瀏覽器打開-->
    <div v-if="showAlipay">
        <form v-if="inlineDescListValue2" action="" method="post">
          <input style="display:none;" type="text" v-model="uid" name="user_id">
          <input style="display:none;" type="text" v-model="gid" name="goods_id">
　　　　　　<!--微信支付-->
          <x-button class="buy" >立即支付</x-button>
        </form>
        <form v-if="!inlineDescListValue2" action="http://www.xxxx.com/xxx/xxx/pay" method="post">
          <input style="display:none;" type="text" v-model="uid" name="user_id">
          <input style="display:none;" type="text" v-model="gid" name="goods_id">
　　　　　　<!--支付寶支付-->
          <x-button class="buy" >立即支付</x-button>
        </form>
    </div>
<!--微信瀏覽器打開-->
    <form v-else action="http://www.xxxx.com/xxx/xxx/pay/" method="post">
      <input style="display:none;" type="text" v-model="uid" name="user_id">
      <input style="display:none;" type="text" v-model="gid" name="goods_id">
      <input style="display:none;" type="text" v-model="oid" name="openid">
　　　　<!--微信支付-->
      <x-button class="buy" >立即支付</x-button>
    </form>

 

總結，看網頁授權文檔，

 

 這里，在進行到第二步到時候，這里需要后台配合，寫一個接口，接受code參數，在請求微信給出到接口

https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

並把獲取到結果返回給前端，不然前端沒辦法直接請求他們的接口，