端内APP分享到微信,微信打开卡片拉起微信授权vue

官网:网页授权链接(公众号)

通过拉起授权获取code值，把code值给后端，通过接口再拿到openId

代码写在main.js中，先render避免拉起的时候闪一下

第一种：适用于一进页面就拉起授权 在vue的main.js

let ua = window.navigator.userAgent.toLowerCase()
const urlInstance = new URL(window.location.href)
import { baseApi } from '@/config'
if (
  ua.match(/MicroMessenger/i) == 'micromessenger' &&
  !ua.includes('miniprogram') &&
  !localStorage.getItem('wxopenid')
) {
  const code = urlInstance.searchParams.get('code')
  if (code) { //有code值就用code值去获取openId，然后存储起来，在页面中直接获取
    axios
      .get(`${baseApi}/user/openid?code=${code}`)
      .then(function (response) {
        if (response && +response.data.code == 0) {
          localStorage.setItem('wxopenid', response.data.data.openid || '')
          localStorage.setItem('accessToken', response.data.data.access_token || '')
        } else {
          console.log('授权失败')
          Toast('微信授权失败')
        }
        render()
      })
      .catch(function (error) {
        console.log(error)
        render()
      })
  } else {
    //没有code就进行授权，授权后在跳转页面获取code值
    const appId = 'wx40e68758e2aada27'
    const redirect_uri = encodeURIComponent(window.location.href)
    window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${redirect_uri}&response_type=code&connect_redirect=1&scope=snsapi_base#wechat_redirect`
  }
} else {
  render()
}

function render () {
  new Vue({
    el: '#app',
    router,
    store,
    render: h => h(App)
  })
}

---

第二种：在点击跳转到其他页面的时候拉起授权

1、在jobDetails.vue

  <div class="footer" @click.stop="getWxWarrant"></div>

let ua = window.navigator.userAgent.toLowerCase()

// 判断是否为公众号模拟器环境
const isWechat = () => {
  return ua.match(/MicroMessenger/i) == 'micromessenger' &&
    !ua.includes('miniprogram') &&
    !localStorage.getItem('wxopenid')
}

// 判断公众号截取code
const getUrlParam = (name) => {
  let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
  let r = window.location.search.substr(1).match(reg);
  if (r != null) {
    return unescape(r[2]);
  }
  return null;
}

 //点击获取微信授权
    getWxWarrant () {
      if (isWechat()) {
        let appid = this.appid; //注册公众号的时候生成，找后端或运营要
        let code = getUrlParam("code"); //是否存在code
        // let local = `${location.origin}/#/perfectDetails/${this.jobId}` //测试路径
        let local = `https://wx.jwshq.com/#/perfectDetails/${this.jobId}?r=${Date.now()}` //授权后跳转的链接
        if (code == null || code === "") {
          // 不存在就打开上面的地址进行授权
          window.location.href =
            `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${encodeURIComponent(local)}&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect`;
        } else {
          this.$router.push(`/perfectDetails/${this.jobId}?code=${code}`)
        }
      }
    },

2、在跳转页面perfectDetails.vue获取code

<script>
// 判断公众号截取code
const getUrlParam = (name) => {
  let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
  let r = window.location.search.substr(1).match(reg);
  if (r != null) {
    return unescape(r[2]);
  }
  return null;
}

const getUrlCode = (name) => {
  return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ''])[1].replace(/\+/g, '%20')) || null
}

export default {
  name: "PerfectDetails",
  components: {
  },
  data () {
    return {
      code: getUrlCode('code') ? getUrlCode('code') : 0,
    };
  },
 mounted () {
    this.getWxCode()
  },
 methods: {
//获取openId
     getWxCode () {
      let that = this
      let wxCode = getUrlParam("code") ? getUrlParam("code") : this.code; //是否存在code
      if (wxCode) {
        this.$http.get(`/api/zhipin/outSite/getWxOpenId?code=${wxCode}`)
          .then(res => {
            if (res.data && res.data.result && res.data.result.data && res.data.result.data.code == 0) {
              that.onlineForm.openId = res.data.result.data.openId
              if (res.data.result.data.openId) {
               //console.log(res.data.result.data.openId)
              }
            } else {
              res.data.message && Toast(res.data.message)
            }
          })
          .catch(err => { })
      }
    },
}

<script>