Vue+WeChat Get User Information

  html, html5, javascript, vue.js

Vue+WeChat Get User Information

This project achieves a praise function, i.e. sharing a page to WeChat friends. WeChat friends click on it and praise it. WeChat nicknames, WeChat avatars and WeChat openid, WeChat unionid (this field is required to pay attention to the public number) need to be sent to the back end to record the relevant information of the praiser.

Wechat web page authorization

  1. For the authorization configuration of WeChat public number webpage, please refer to the official website for details.
  2. A description of the differences between the two scope for web page authorization (see the official website for details)
    -scope = snsapi _ base obtains the wechat user openid, and directly jumps to the service page after obtaining, without user operation
    -scope = snsapi _ userinfo obtains WeChat user details (nicknames, avatars, etc.), requiring the user to manually click on authorization. when clicking on permission, it will jump to the service page (similar to closing the popup window). when clicking on refusal, it will launch the page, with authorization as shown in the figure:
    图片描述
  3. The “get user basic information interface” in the user management class interface is to get user basic information according to user OpenID after the user and public number generate message interaction or event push after attention. This interface, including other WeChat interfaces, requires the user (i.e., openid) to pay attention to the public number before calling successfully.
  4. The actual link to the sharing page:
    The link to the current page requires encodeURIComponent( url) encoding

    https://open.weixin.qq.com/connect/oauth2/authorize?  appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
     // APPID: appid of public number
     // REDIRECT_URI: The link of the current page needs encoding.
     // scope: snsapi_base / snsapi_userinfo
     //No other values need to be changed.
  5. The link to jump after clicking allow is redirect _ uri+code = code & state = state.
    Code here can be used to call the interface to obtain relevant information of WeChat users
    Each time the code on the user authorization belt is different, the code can only be used once and will expire automatically if it is not used for 5 minutes.
    -The official statement code can only be used once. In H5 page, if there is a jump, WeChat will judge whether authorization has been granted. If authorization has been granted, code will return the previous code. If you use code to retrieve user information (code has expired), it will report invalid Code, Hints: [REQ _ ID: GGJBIZ 4 CE-OGY Wya], so the user information can be stored locally when you first obtain user information.
  6. Need to obtain user information and share it again
    Although there is no problem with the current page, WeChat will share the link of the current page (excludinghttps://open.weixin.qq.com …), new users will not be authorized to click, but WeChat’s secondary sharing will add & from =, which can be used to obtain and judge parameters in vue created’s life cycle, and jump if there is FROM parameter.https://open.weixin.qq.com/co …Links to allow users to authorize
    The second sharing style display problem can be viewed in another article of mine.Vue+WeChat Secondary Sharing/Custom Sharing

The code is as follows

// created cycle
 If(this.$route.query.from) {// judge whether there is a from parameter in the link, the following studentId and activityId items are required.
 let _nowUrl = window.location.href.split('?'  )[0] + `?  resource=1&studentId=${this.$route.query.studentId}&activityId=${this.$route.query.activityId}`
 let _shareUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?  appid=${appId}&redirect_uri=${encodeURIComponent(_nowUrl)}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`
 window.location.href = _shareUrl
 return
 }
//Process WeChat user information
 handleWechatMsg(code) {
 //Call the interface for obtaining WeChat user information (the back end refers to WeChat official documents for encapsulation) Code-parameter
 api.getWechatInfo(code).then((res)=>{
 if(res.data.code == 200) {
 //Returns json string
 let _data = res.data.content
 let _personMsg = JSON.parse(_data)
 this.wechatMsg = _personMsg
 //Store WeChat user information locally to prevent pages from being refreshed and code from failing.
 window.localStorage.setItem('wechatMesssage', _data)
 } else if (res.data.code = = 400) {//400-code is invalid, 400 is the back-end return, depending on which code the back-end returns.
 let msgs = window.localStorage.getItem('wechatMesssage')
 this.wechatMsg = JSON.parse(msgs)
 } else {
 this.$Message.message(res.data.message);
 }
 
 })
 },
  • If the unionid of wechat needs to be obtained, the user needs to be guided to pay attention to the public number, and whether the unionid is contained can be judged in the returned user information. if not, the two-dimensional code of the public number of wechat can be displayed for the user to identify and pay attention to.

⚠️--------------------

  1. The domain name of the current page needs to be added in the background of the public number (see official website for details)
  2. If the page has #, there may be problems, which can be configured by using nginx