The jump address in wechat can obtain the information of visitors, including OpenID, nickname and other information. This section mainly describes the method of obtaining the OpenID of wechat users without login silently. Non-silent similar so-called silent access means that the user is not asked to manually open permissions, but in this way, only the openID of the visitor is accessed as the unique key to distinguish the visitor. Firstly, there are two steps to obtain the visitor openID. 1) When entering our page, we need to determine whether the URL has a code parameter (wechat platform will return the code parameter, 2) If there is no code, we will use our own wechat public platform appID to access the wechat link to get the code, the code is as follows:

  getWxCode() {
      let urlNow = encodeURIComponent(window.location.href)
      let url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + this.appid + '&redirect_uri=' + urlNow + '&response_type=code&scope=snsapi_base#wechat_redirect';
      window.location.href = url
    },
Copy the code

Because it’s a silent fetch here scopeParameter by valuesnsapi_base, if the nickname and other information need to be obtained, non-silent mode can be adopted, scope value transmissionsnsapi_userinfo. Directly jump to this link, when there is no problem verified by wechat platform, the code will be returned to himredirect_uri Address 3) After wechat returns with the code, we need to get the returned code and that of our public platformappid 和 appsecretTo exchange wechatopenid(Other user information can also be obtained in non-silent mode), the code is as follows:

 axios.get('https://api.weixin.qq.com' + '/sns/oauth2/access_token? appid=' + this.appid + '&secret=' + this.appsecret + '&code=' + code + '&grant_type=authorization_code')
          .then(res => {
            console.log('openid for = = >')
            console.log('wechat return :', res)
            console.log('current openid:', res.data.openid)
            console.log('< = = openid access')
            this.userId = res.data.openid;
          })
Copy the code

Attached complete VUE code, other similar logic:

<script>
import md5 from '@/utils/md5'
import axios from 'axios'
import URL from '@/http/url'
import utils from '@/utils/utils'
import { Toast } from 'vant';

export default {
  data () {
    return {
      userId: ' ',
      appid: ' '.// Wechat official account appid
      appsecret: ' '.// Wechat official account AppSecret
    }
  },
  computed: {
  },
  created() {
    if (utils.isWeixin()) {
      Obtain the Code. 2. Exchange the OpenID
      let code = this.$route.query.code;
      if (code) {
      axios.get('https://api.weixin.qq.com' + '/sns/oauth2/access_token? appid=' + this.appid + '&secret=' + this.appsecret + '&code=' + code + '&grant_type=authorization_code')
          .then(res => {
            console.log('openid for = = >')
            console.log('current openid:', res.data.openid)
            console.log('< = = openid access')
            this.userId = res.data.openid; })}else {
        this.getWxCode(); }}else {
      Toast('Please open it in wechat environment')
    }
  },
  mounted() {
  },
  methods: {
    /** * @description silently get wechat code */
    getWxCode() {
      let urlNow = encodeURIComponent(window.location.href)
      let url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + this.appid + '&redirect_uri=' + urlNow + '&response_type=code&scope=snsapi_base#wechat_redirect';
      location.href = url
    },
  },
}
</script>
Copy the code