微信JS-SDK分享實踐

時間 2019-12-20

標籤微信 sdk 分享實踐欄目 JavaScript 简体版

原文原文鏈接

微信JS-SDK分享實踐

前題

本篇適用範圍：使用微信JS-SDK接口調用，分享朋友圈、朋友、QQ、QQ空間、騰訊微博等，包括分享連接中帶有參數。
說明：在Android和iOS端，分享測試均已經過。

開發準備

1.已認證公衆號。登陸微信公衆號確認有相關功能使用權限，參見下圖php

2.設置JS接口安全域名。確保分享連接域名和設置的安全域名一致html

微信公衆號中，在【設置---公衆號設置---功能設置】，設置JS接口安全域名，如圖
前端

3.獲取AppID和AppSecret。在微信公衆號中獲取該信息並保存，後面簽名算法和config配置中會用到。vue

實現邏輯

後臺經過AppID和AppSecret請求微信接口獲取access-token參數，以此access-token參數再次請求微信接口獲取jsapi-ticket，並將獲取的jsapi-ticket進行加密、校驗與其餘的參數封裝成json格式的數據傳送到前臺JS頁面
前臺獲取json數據後，並提供給參數給微信分享接口調用，具體接口爲wx.config，wx.ready; 獲取微信分享頁面的標題和描述，以及分享地址、縮略圖地址

JS-SDK使用步驟--後臺

參考官方文檔附錄1--JS-SDK使用權限簽名算法web

1.獲取access-token算法

AccessToken須要用CorpID和Secret來換取，不一樣的Secret會返回不一樣的AccessToken。此處可以使用前面獲取的AppID和AppSecret，需使用Https協議、Json數據格式、UTF8編碼vue-router

請求示例：https://qyapi.weixin.qq.com/c...json

詳細內容請參考官方文檔-獲取access-tokenapi

2.獲取jsapi-ticket緩存

用第一步拿到的access_token 採用http GET方式請求得到jsapi_ticket（有效期7200秒，開發者必須在本身的服務全局緩存jsapi_ticket）。

請求示例：https://qyapi.weixin.qq.com/c...

3.獲取簽名（signature）

簽名生成規則以下：參與簽名的字段包括noncestr（隨機字符串）, 有效的jsapi_ticket, timestamp（時間戳）,url（當前網頁的URL，不包含#及其後面部分，即前端發起請求傳過來的URL參數）。須要注意的是全部參數名均爲小寫字符。對string1做sha1加密，字段名和字段值都採用原始值，不進行URL 轉義。源代碼參考以下：後臺簽名源代碼下載

4.封裝json參數，返回給前端

將獲取的jsapi-ticket進行加密、校驗與其餘的參數封裝成json格式的數據傳送到前臺JS頁面，返回內容可參考wx.config配置中所需內容。

建議

驗證簽名是否一致，能夠使用微信的驗證簽名工具；建議使用微信web開發者工具調試JS-SDK。

JS-SDK使用步驟--前端

官方參考文檔

1.引入JS文件

在須要調用JS接口的頁面引入以下JS文件，（支持https）：http://res.wx.qq.com/open/js/...

備註：支持使用 AMD/CMD 標準模塊加載方法加載

2.經過config接口注入權限驗證配置

wx.config({
    debug: true, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。
    appId: '', // 必填，企業號的惟一標識，此處填寫企業號corpid
    timestamp: , // 必填，生成簽名的時間戳
    nonceStr: '', // 必填，生成簽名的隨機串
    signature: '',// 必填，簽名，見附錄1
    jsApiList: [] // 必填，須要使用的JS接口列表，全部JS接口列表見附錄3
});

3.經過ready接口處理成功驗證

wx.ready(function(){
    // config信息驗證後會執行ready方法，全部接口調用都必須在config接口得到結果以後，config是一個客戶端的異步操做，因此若是須要在頁面加載時就調用相關接口，則須把相關接口放在ready函數中調用來確保正確執行。對於用戶觸發時才調用的接口，則能夠直接調用，不須要放在ready函數中。
});

4.經過error接口處理失敗驗證

wx.error(function(res){
    // config信息驗證失敗會執行error函數，如簽名過時致使驗證失敗，具體錯誤信息能夠打開config的debug模式查看，也能夠在返回的res參數中查看，對於SPA能夠在這裏更新簽名。
});

5.示例代碼（基於vue）

在調用頁面引入JS，例如index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <!--<meta name="viewport" content="width=device-width,initial-scale=1.0">-->
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <title>Index</title>
    <!-- 必須引入的文件-->
    <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    .....
  </body>
</html>

index.js

import Vue from 'vue'
import Router from 'vue-router'
import restoreUrl from '../utils/restoreUrl';

Vue.use(Router)

let router = new Router(yourRouter)
// 路由攔截
router.beforeEach((to, from, next) => {

  // 微信分享時，微信會在地址欄添加額外參數
  if (restoreUrl.isWeChatUrl()) {
    window.location.href = restoreUrl.getProjectUrl();
  }
})

export default router

restoreUrl.js

屢次分享，去除微信添加參數

export default {
    // 判斷地址欄出現微信本身加的參數問題
    isWeChatUrl () {
      // debugger;
        let url = window.location.href;
        let matchResult = url.match(/\?/g);
        // 若是地址欄中，出現了兩個問號的話，那麼是微信在分享添加了參數
        // 若是地址欄中，出現了form=,那麼就是微信分享添加的參數
        return (matchResult ? matchResult.length >= 2 : false) || (/from=/.test(url));
    },
    // 把地址欄的中微信追加的參數去掉，返回咱們本身項目的地址
    getProjectUrl () {
        let location = window.location;
        return location.origin + location.pathname + location.hash;
    }
};

進入分享頁面時調用onShare()

// 分享
      onShare() {
        // 傳入後臺簽名URL，域名+當前分享頁面路徑
        let _WXurl = window.location.origin + window.location.pathname;
        // 定義分享連接,使用encodeURIComponent對傳入參數編碼，防止在iOS中傳入參數編碼問題
        // 此處示例傳遞單個參數
        let _shareLink = window.location.origin+ '/#?'+encodeURIComponent('key')+"="+ encodeURIComponent('value');
        let params = {
          url:_WXurl
        };
        
        //向後臺發起請求得到config配置參數
        this.$post('/v1/system/shareUrl', params,{
          // 請求header中，Content-Type需爲如下類型，防止分享出去參數丟失
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
          }
        })
          .then((res) => {
            if (res.data.errCode === 0) {
              // 請求接口成功後，
              // 配置config
              wx.config({
               // 開啓調試模式時,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。
                debug: false,
                // 後臺返回以前獲取的appId
                appId: res.data.body.appId,
                // 必填，生成簽名的時間戳
                timestamp: res.data.body.timestamp, 
                // 必填，生成簽名的隨機串
                nonceStr: res.data.body.nonceStr, 
                // 必填，簽名，見附錄1
                signature: res.data.body.signature,
                // 必填，須要使用的JS接口列表，全部JS接口列表見附錄3
                jsApiList: ['checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'hideMenuItems' ] 
              });

              // 微信檢查接口列表
              wx.checkJsApi({
                jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'hideMenuItems'], // 須要檢測的JS接口列表
                success: function (res) {
                  console.log(res);
                  // alert('checkJsApi' + res);
                }
              });

              // 隱藏微信右上角彈出菜單中部分功能按鈕
              wx.hideMenuItems({
                menuList: ['menuItem:share:qq','menuItem:share:QZone','menuItem:share:weiboApp','menuItem:copyUrl'], // 要隱藏的菜單項，只能隱藏「傳播類」和「保護類」按鈕，全部menu項見附錄4
                success: function (res) {
                  // alert(res);
                }
              });
              
              // 頁面加載完成後用戶就有可能調用微信的分享，因此當頁面ready 完後就加載
              wx.ready(function () {  
                // alert(_shareLink);
                // 分享到朋友圈
                wx.onMenuShareTimeline({  
                  // 分享標題
                  title: '你的夢想', 
                  // 分享連接，該連接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致
                  link: _shareLink, 
                  // 分享圖標
                  imgUrl: 'https://www.baidu.com/images/1.png', 
                  // 用戶確認分享後執行的回調函數
                  success: function () {
                    console.log('分享回調函數');
                    console.log('shareLink= '+_shareLink);
                    // alert('分享回成功調函數');
                  },
                  // 用戶取消分享後執行的回調函數
                  cancel: function () {
                    console.log('取消分享回調函數');
                    // alert('取消分享回調函數');
                  }
                });

                // 分享好友
                wx.onMenuShareAppMessage({  
                  // 分享標題
                  title: '接你的夢想', 
                  // 分享描述
                  desc: '歷來都不是夢', 
                  // 分享連接，該連接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致
                  link: _shareLink, 
                  // 分享圖標
                  imgUrl: 'https://www.baidu.com/images/1.png', 
                  // 用戶確認分享後執行的回調函數
                  success: function () {
                    console.log('分享好友回調函數');
                    console.log('shareLink= '+_shareLink);
                    // alert('分享回好友調函數');
                  },
                  // 用戶取消分享後執行的回調函數
                  cancel: function () {
                    console.log('取消分享好友調函數');
                    // alert('取消分享回調函數');
                    // console.log('分享回好友調函數');
                  }
                });
                // 分享多個地址時，可統一傳入參數，如 wx.onMenuShareAppMessage(shareData)
                ...
              });
              // 微信預加載失敗回調
              wx.error(function (res) {
                console.log(res);
                // alert('失敗');
              });
            }
          }).catch(error => {
            // 請求接口失敗回調函數
        })

      }