The applet is embedded in the web page, jumps to the applet and transmits parameters. The wechat applet realizes the authorization of official account to obtain openid

    Hello everyone , I'm Xiaobian pengzai , For school in the near future uniapp Developed a small campus program , The applet has some activities 、 consulting 、 Notice 、 Leave and other notices , You need to push the prompt through wechat , There are some restrictions on the subscription method of using applets , So the demand side wants to use the bound school official account to push , Because the applet gets the user's openId The official account. openId atypism , Therefore, we must call the official account authorization , Because the project has been basically completed , I feel very troublesome to add this suddenly , At first, I refused to modify it if I wanted to be lazy ...emo..., Later, I compromised , Or break through , Research and development ！！！

    After the blog domain name was sold last time , I haven't updated the article for a long time , Changed domain name , Many friends don't know the new website （ new www.sharedbk.com）, Just sort it out and share it ！

（ Because of the development tool side , Let's preview the picture above ！ That is, the access applet will first determine whether it is authorized through the official account openId, No jump to H5 Page for authorization , If you have one, just store it .）

First , We build a new one html file , Introduce wechat related js file

<!--  Be sure to pay attention to ,H5 Need to introduce wechat related js -->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

next , We write custom js Some methods , The notes in it are relatively clear , How to jump to the applet , How to test the judgment logic , Simple and clear

<script>
  const gzhId = '123456789'; //  official account appid
  const url   = 'http://sharedbk.com/getOpenId.html'; //  Authorization callback link 

  init(); //  initialization 

  //  Initialize validation 
  function init(){
    if (!getUrlKey("code") && !sessionStorage.openId) {
      //  without code and openId, Let's jump to wechat authorization 
      window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + gzhId + "&redirect_uri=" + url +"&response_type=code&scope=snsapi_userinfo";
    } else if (!sessionStorage.openId) {
      //  On the contrary, there are code, No, openId Call the background interface to get openId
      getOpenId();
    } else if (sessionStorage.openId) {
      //  If there is openId, Then jump directly to the applet 
      jumpBtn(sessionStorage.openId);
    }
  }

  //  Request background interface , obtain openId
  function getOpenId(){
    var myHeaders = new Headers();
    myHeaders.append("Content-Type", "application/json");
    var raw = JSON.stringify({"code": getUrlKey("code")});

    var requestOptions = {
      method: 'POST',
      headers: myHeaders,
      body: raw,
      redirect: 'follow'
    };

    fetch("http://sharedbk.com/getOpen", requestOptions)
      .then(response => response.text())
      .then(result => {
        let res = JSON.parse(result);
        if(res.code == '200'){
          console.log(' Authorized success ');
          sessionStorage.setItem("openId", res.data.openId); //  Storage openId
          jumpBtn(res.data.openId); //  Jump to wechat applet 
        } else {
          console.log(' privilege grant failed ');
          window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + gzhId + "&redirect_uri=" + url +"&response_type=code&scope=snsapi_userinfo";
        }
      })
      .catch(error => console.log('error', error));
  }

  //  Jump to applet 
  function jumpBtn(val){
    alert(val)
    // val For transmission openId, Applet path self configuration 
    wx.miniProgram.navigateTo({
      url:`/views/login?gzhOpenId=` + val,
      success: (res) => {
        console.log(res);   //  Page Jump success callback function 
      },
      fail: (err) => {
        console.log(err);   //  Callback function for page Jump failure 
      }
    })
  }

  //  To obtain parameters （http://www.sharedbk.com/post/188.html）
  function getUrlKey (name) {
    return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ''])[1].replace(/\+/g, '%20')) || null
  }

</script>

take html file save , Upload to server , So you can get the page link , Remember to be on it js Modify your own links , Then it needs to be in the background of the applet （ Development management => Development and setup => Business domain name ）, Configure the domain name bound by the server into the business domain name , So you can call web-view Components .

Finish the above work , Let's continue with the following work in the applet （ I am a uniapp, Made a wechat judgment ,setStorageData and getStorageSyncData I encapsulated a local access method , You can directly use the storage method of wechat applet ）, That is, when accessing applets , First determine whether the access has parameters , If you bring it, store it directly , Use without parameters web-view Jump to the web page for authorization （ Write your own small program web-view Page implementation is ok ）.

onLoad: function(val) {
    // #ifdef MP
    if(val.gzhOpenId){ //  Get the parameters passed 
        setStorageData('gzhOpenId', val.gzhOpenId); //  Store official account openId
    }
    //  Judge whether there is a official account openId, Use if it doesn't exist web-view Visit the authorization link to get 
    if(!getStorageSyncData('gzhOpenId')){
        uni.navigateTo({
            url: '/views/webViewPage/index?url=http://sharedbk.com/getOpenId.html'
        });
    }
    // #endif
}

  Look at the address  null     Hello everyone , I'm Xiaobian pengzai , For school in the near future uniapp Developed a small campus program , The applet has some activities 、 consulting 、 Notice 、 Leave and other notices , You need to push the prompt through wechat , There are some restrictions on the subscription method of using applets , So the demand side wants to use the bound school official account to push , Because the applet gets users ..., Share blog http://www.sharedbk.com/post/241.html