微信公眾號（靜默授權和分享）

微信網頁授權

'https://open.weixin.qq.com/connect/oauth2/authorize?appid='+ appId +'&redirect_uri=' + redirectUri + '&response_type=code&scope=snsapi_base#wechat_redirect'

以snsapi_base為scope發起的網頁授權，是用來獲取進入頁面的用戶的openid的，並且是靜默授權並自動跳轉到回調頁的。用戶感知的就是直接進入了回調頁

授權回調域名：在微信公眾號請求用戶網頁授權之前，開發者需要先到公眾平台官網中的配置選項中，修改授權回調域名。用戶在網頁授權頁同意授權給公眾號后，微信會將授權數據傳給一個回調頁面，回調頁面需在此域名下，以確保安全可靠。沙盒號回調地址支持域名和ip，正式公眾號回調地址只支持域名。

第一步：用戶同意授權，獲取code
1）靜默授權
https://open.weixin.qq.com/connect/oauth2/authorize?appid=xxx&redirect_uri=https://xxx/%23%2FtimelineIndex?posterId=1&response_type=code&scope=snsapi_base#wechat_redirect
2）授權后重定向的回調鏈接地址
https://xxx/?code=0719FpQV14xO2W0FHAPV12AqQV19FpQj&state=#/timelineIndex?posterId=1
code說明：code作為換取access_token的票據，每次用戶授權帶上的code將不一樣，code只能使用一次，5分鍾未被使用自動過期。

第二步：通過code換取網頁授權access_token
　　公眾號可通過接口來獲取網頁授權access_token。如果網頁授權的作用域為snsapi_base，則本步驟中獲取到網頁授權access_token的同時，也獲取到了openid，snsapi_base式的網頁授權流程即到此為止。
　　尤其注意：由於公眾號的secret和獲取到的access_token安全級別都非常高，必須只保存在服務器，不允許傳給客戶端。后續刷新access_token、通過access_token獲取用戶信息等步驟，也必須從服務器發起。

 

微信JS-SDK使用步驟
步驟一：綁定域名
步驟二：引入JS文件
步驟三：通過config接口注入權限驗證配置
簽名生成規則如下：參與簽名的字段包括noncestr（隨機字符串）, 有效的jsapi_ticket, timestamp（時間戳）, url（當前網頁的URL，不包含#及其后面部分）

const currentUrl=location.href.split('#')[0]
sdkSign({ Url:currentUrl }).then(response => {
  wx.config({
    debug: false, // 關閉調試模式,調用的所有api的返回值不會在客戶端alert出來
    appId: appId, // 必填，公眾號的唯一標識
    timestamp: response.Timestamp, // 必填，生成簽名的時間戳
    nonceStr: response.Noncestr, // 必填，生成簽名的隨機串
    signature: response.Signature,// 必填，簽名
    jsApiList: [
      'showMenuItems',
      'hideAllNonBaseMenuItem',
      'onMenuShareTimeline',
      'onMenuShareAppMessage'
    ] // 必填，需要使用的JS接口列表
  })
}).catch(error => {
  
})

步驟四：通過ready接口處理成功驗證
wx.ready(function(){
// config信息驗證后會執行ready方法，所有接口調用都必須在config接口獲得結果之后，config是一個客戶端的異步操作，所以如果需要在頁面加載時就調用相關接口，則須把相關接口放在ready函數中調用來確保正確執行。對於用戶觸發時才調用的接口，則可以直接調用，不需要放在ready函數中。
});

 

微信接口-分享等

// 1、路由跳轉處理
router.beforeEach((to, from, next) => {
    wx.ready(function(){
        wx.hideAllNonBaseMenuItem(); //隱藏所有非基礎按鈕(包含分享)，只有部分頁面能分享
    });
})
// 2、頁面分享
const shareData = {
  title: 'xxx',// 分享標題
  desc: 'xxx',// 分享描述(分享到朋友圈無該配置項)
  link: location.href,// 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
  imgUrl: 'xxx'// 分享圖標
}
this.$root.setShareInfo(shareData)
// 3、分享公共配置(分享朋友、朋友圈)
setShareInfo(shareData) {
  shareData.success = () => {// 用戶確認分享后執行的回調函數
    this.$toast('分享成功')
  }
  wx.ready(function(){
    wx.showMenuItems({
        menuList: ['menuItem:share:appMessage','menuItem:share:timeline'] // 要顯示的菜單項
    });
    wx.onMenuShareAppMessage(shareData);//分享給朋友
    wx.onMenuShareTimeline(shareData);//分享到朋友圈
  })
}