微信授权

授权页面

<template>
  <div>
    正在拉取微信授权...
    <p>
      <a href="javascript:" @click="gotoWechat()">登陆微信</a>
    </p>
  </div>
</template>
<style scoped>

</style>

<script type="text/ecmascript-6">
  import {WECAHT} from '../../../config/lib'
  export default{
    data () {
      return {
        msg: 'hello vue',
        appId: WECAHT.appId,
        uri: WECAHT.uri//微信授权后回调地址

      }
    },
    components: {},
    created () {

    },
    mounted () {
      this.gotoWechat()
    },
    methods: {
      gotoWechat () {
        let timestamp = new Date().getTime()
        let url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${ this.appId }&redirect_uri=${encodeURIComponent(this.uri)}&response_type=code&scope=snsapi_userinfo&state=${ timestamp }&connect_redirect=1#wechat_redirect`
        window.location.href = url;
      }
    }

  }
</script>

判断是否授权

 let code = ''
//        https://open.weixin.qq.com/connect/oauth2/authorize?appid=???&redirect_uri=http%3A%2F%2Fwww.haikeuu.com%2FHaikeMobileApp%2F%23%2Fappointment&response_type=code&scope=snsapi_userinfo&state=1502173850125&connect_redirect=1#wechat_redirect
        if (GetUrlQuery('code')){
          sessionStorage.wechatCode = GetUrlQuery('code') || ''
          this.$store.commit('SET_WECHAT',{code:GetUrlQuery('code')})
          log(this.$store.state.wechat.code)
        }
        if (!sessionStorage.wechatCode){
          //this.$router.push('wechatAuthorize')
　　　　　　跳转授权页面
          return
        }

截取code参数

/* 获取 URL 参数
* params 要获取的参数名
* */
export const GetUrlQuery = params => {
  let reg = new RegExp("(^|&)" + params + "=([^&]*)(&|$)", "i");
  let r = window.location.search.substr(1).match(reg);  //获取url中"?"符后的字符串并正则匹配
  let context = "";
  if (r != null)
    context = r[2];
  reg = null;
  r = null;
  return context == null || context == "" || context == "undefined" ? "" : context;
}

发取支付

//保存订单发起
this.$getData.saveOrder(p, (res)=> {

    if (res.status == 'S') {
      let p2 = {
        mealId: res.data.mealId,
        code: sessionStorage.wechatCode
      }

      var _this = this
      // 微信支付　生成微信订单号 这个接口都是后台提供
      this.$getData.wxPayment(p2, r => {

        WeixinJSBridge.invoke(
          'getBrandWCPayRequest', r.data,
          function (res) {
            if (res.err_msg == "get_brand_wcpay_request:ok") {
              _this.$vux.toast.show({
                text: '支付成功,3秒后返回',
                type: 'success'
              })
              setTimeout(()=> {
                window.location.href = '#/appointment'
              }, 3000)
              // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。
            } else {
              _this.$vux.toast.show({
                text: '支付失败',
                type: 'cancel'
              })
            }
          }
        );


      })

    } else {
      this.$vux.toast.show({
        text: res.msg,
        type: 'cancel'
      })
    }
  })