Vue中使用微信JSSDK進行分享

要在vue裏使用微信分享須要先後端一塊兒配合來作，大體分爲如下幾步，在開發以前須要在登陸公衆號作一些綁定域名等一系列的操做，這個是大前提我會按照
(1)公衆號配置
(2)後端準備工做及開發（本人是前端開發，只簡單介紹後端與微信的大體接入過程以及在與後端交互的時候出現的問題，代碼就不細說了）
(3)前端準備工做及開發
這個順序來進行書寫，省得看上去很亂，由於在配置完公衆號後，前端的不少工做須要後端跟微信請求完獲取到參數提供給前端，前端才能開始作，話很少說，開整

1、公衆號配置
• 1.登陸公衆號進行域名綁定
  mp.weixin.qq.com/ 進入後臺綁定域名，這個域名必須是你在微信打開的連接的host，這是必須的 如圖配置：

  

2、後端準備工做
• 下載微信官方的代碼示例，裏面有具體的對接代碼 連接： demo.open.weixin.qq.com/jssdk/sampl…
  微信官方提醒：連接中包含php、java、nodejs以及python的示例代碼供第三方參考，第三方切記要對獲取的accesstoken以及jsapi_ticket進行緩存以確保不會觸發頻率限制
  步驟：
  (1) 寫一個接收前端傳遞url參數的方法(這個url就是前端須要分享的url)
  (2) 按照官方代碼示例進行簽名，注意後臺簽名時候這裏參數名必須所有小寫，且必須有序，當時就是由於粗心這裏有一個參數nonce_str裏面的S大寫了，一直報錯
  我跟後端交互大概就這兩步，若是不全後面我再補充

3、前端準備工做（使用的history模式）
• 1.引入微信官方的jssdk
  兩種方式：
  (1) 在須要調用JS接口的頁面引入以下JS文件,(支持https)：
  http://res.wx.qq.com/open/js/jweixin-1.4.0.js
  如需進一步提高服務穩定性，當上述資源不可訪問時，可改訪問：
  http://res2.wx.qq.com/open/js/jweixin-1.4.0.js （支持https） (2)npm install --save-dev weixin-js-sdk
• 2.建立一個公共的js，用來初始化微信分享的一些操做，個人js名字爲wxapi.js，按照大家習慣本身起名字

import wx from 'weixin-js-sdk' //這個是我本身封裝的axios 爲了向後端傳遞當前路由，獲取對應的config字段，可替換成你網絡請求的方法

import {getBaseUrl} from './api'
    const wxApi = {
      /**
      * [wxRegister 微信Api初始化]
      * @param  {Function} callback [ready回調函數]
      */
      wxRegister (url,sys) {
        if(sys == "ios"){
          url = window.entryUrl;
        }
        getBaseUrl('/wechatshare?url='+url).then(res=>{
            wx.config({
                //在測試的時候必定要開啓這個 debug: true 只要有報錯就必定會彈出來，
                debug: false, // 開啓調試模式
                appId: res.appId, // 必填，公衆號的惟一標識
                timestamp: res.timestamp, // 必填，生成簽名的時間戳
                nonceStr: res.nonceStr, // 必填，生成簽名的隨機串
                signature: res.signature, // 必填，簽名，見附錄1
                jsApiList: [
                  'checkJsApi',//必填，檢測api是否有權限
                  //自定義「分享給朋友」及「分享到QQ」按鈕的分享內容
                  'updateAppMessageShareData',
                  //自定義「分享到朋友圈」及「分享到QQ空間」按鈕的分享內容
                  'updateTimelineShareData'
                ] // 必填，須要使用的JS接口列表，全部JS接口列表見附錄2
            })
        }),
        wx.ready(() => {
            //必定要保證分享的url和傳遞給後端url是一致的，若是路由發生了變化必定要獲取當前的路由
          let links = location.href.split('#')[0];
          let optionApp = {
            title: '***', // 分享標題, 請自行替換
            desc:'***',
            link: links, 
            imgUrl: 'logo.png', // 分享圖標, 請自行替換，須要絕對路徑
          }
          let optionTimeline = {
            title: '***', // 分享標題, 請自行替換
            link: links, // 分享連接，根據自身項目決定是否須要split
            imgUrl: 'logo.png', // 分享圖標, 請自行替換，須要絕對路徑
            desc:'***'
          }
          // 微信分享給朋友
          wx.updateAppMessageShareData({
            title: optionApp.title, // 分享標題
            link: optionApp.link, // 分享連接
            imgUrl: optionApp.imgUrl, // 分享圖標
            desc: optionApp.desc, // 分享圖標
            success () {
            },
            cancel () {
              // 用戶取消分享後執行的回調函數
            },fail(){
              // alert("分享失敗！"+JSON.stringify(s));
            }
          }),
          // 微信分享到朋友圈
          wx.updateTimelineShareData({
            title: optionTimeline.title, // 分享標題
            link: optionTimeline.link, // 分享連接
            imgUrl: optionTimeline.imgUrl, // 分享圖標
            desc:optionTimeline.desc,
            success () {
              // 用戶成功分享後執行的回調函數
              
            },
            cancel () {
              // 用戶取消分享後執行的回調函數
            },fail(){
              // alert(JSON.stringify(msg));
            }
          })
        })
        wx.error(function(){
          // alert(JSON.stringify(e)+'--------error')
            // config信息驗證失敗會執行error函數，如簽名過時致使驗證失敗，具體錯誤信息能夠打開config的debug模式查看，也能夠在返回的res參數中查看，對於SPA能夠在這裏更新簽名。
          });
      },
    }
    export default wxApi
複製代碼

• 3.在須要分享的界面引入



import wxapi from '../request/wxapi'
    //在method定義一個方法裏進行驗證，在mounted裏面調用
        methods: {
            //分享前的驗證簽名，由於Android和IOS在進入微信後路由變化的邏輯是不一樣的，因此要判斷一下，IOS只能分享第一次進來時候的路由地址（IOS待驗證，後面來填坑）
            checkSign(){
                // window.__wxjs_is_wkwebview爲true 時 爲 IOS 設備 false時 爲 安卓 設備
                if (window.__wxjs_is_wkwebview) {  // IOS
                if (window.entryUrl == '' || window.entryUrl == undefined) {
                    var url = location.href.split('#')[0]
                    window.entryUrl = url    // 將後面的參數去除
                }
                    wxapi.wxRegister(location.href.split('#')[0],'ios');
                }else {       // 安卓
                setTimeout(function () {
                    wxapi.wxRegister(location.href.split('#')[0],'android');
                }, 500);
                }
            },
        },
        mounted() {
            //聽說Android手機端會有延時，就加了500的延時，看狀況大家加不加均可以
            setTimeout(()=>{
                this.checkSign();
            },500)
        }
複製代碼

其實到這裏基本就完事兒了，能夠根據微信提供的debug來進行跟蹤 我出現過兩種錯誤
(1) invaild singatrue，這個錯誤是因爲後端簽名的時候把noncestr 裏面的S寫成大寫了，通常invaild singatrue錯誤要不就是後端簽名錯誤，要不就是你給後端的url與你當前的路由不匹配
使用微信自帶的調試工具能夠很好的解決url與你當前的路由不匹配的問題
簽名錯誤可使用微信提供的在線簽名工具生成看跟後端返回的是否匹配
(2) config:ok 可是沒法調起微信的分享界面，其實最終提示config:ok的時候就說明你已經分享成功了，若是提示config:ok的話，你認爲還沒調起微信的分享界面的時候看下下面的話，但願對你有所幫助！

• 另，在開發過程當中一直覺得是本身加一個按鈕來調起微信的分享，其實上面作的這麼多操做最終只是重寫微信webview裏右上角三個點，本身重寫的不能調起微信的分享界面，謹記！