如果使用者在微信客戶端中訪問第三方網頁，公眾號可以通過微信網頁授權機制，來獲取使用者基本資訊，進而實現業務邏輯。

首先我做了一個H5小專案，然後申請公眾號，然後在【自定義選單】中輸入想填寫的，公眾號選單名稱，以及頁面地址：

然後，我們在我們的前端頁面寫呼叫伺服器介面，得到授權。當然這裡，後端操作的多。前端只需要請求介面即可。

前端應該做什麼呢？

首先，在我們的vue架子下，找到路由router資料夾下的index.js，寫以下程式碼：

router.beforeEach(( to, from, next ) => {
  if (to.name != 'auth') {//判斷當前是否是新建的auth路由空白頁面
    let _token = sessionStorage.getItem('wechataccess_token');
    if (!_token) {//如果沒有token,則讓它授權
      //儲存當前路由地址，授權後還會跳到此地址
      sessionStorage.setItem('beforeUrl', to.fullPath);
      //授權請求,並跳轉http://m.water.ui-tech.cn/auth路由頁面
      window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx777aaa1aaaaa7a77&redirect_uri=http%3A%2F%2Fm.water.ui-tech.cn%2Fauth&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect';
    } else {
      next();
    }
  } else {
    next();
  }
});
 

然後，新建一個路由空白頁面，我起的名字是auth（就是上面所說的：授權請求,並跳轉http://m.water.ui-tech.cn/auth路由頁面），在auth.js中寫入以下程式碼：

created(){
    if (this.$route.query.code) {//如果連線中能拿到code說明此時access_token沒有或者已過期，需要重新獲取token
      let obj = {};
      var url = 'http://api......' + this.$route.query.code;
      this.$get(url).then(res => {
        if (res.data.retCode == 200) {
          //因為瀏覽器重新整理vuex的值就初始化了，所以需要存到瀏覽器中
          sessionStorage.setItem('wechataccess_token', res.data.data.access_token);
          sessionStorage.setItem('wechatuser_userName', res.data.data.userName);
          sessionStorage.setItem('wechatuser_id', res.data.data.user_id);
          .........   
          let url = sessionStorage.getItem("beforeUrl");
          //跳轉
          this.$router.push(url);
        } else {
          this.Toast(res.data.message);
        }
      })
    }
  },
 

具體請參考，微信公眾號授權文件：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842