JSSDK使用分享

最近做了一個h5活動頁面，需要自定義微信分享的標題、詳情、縮圖和url，使用到了jssdk，功能已經完成，總結一下這個東西到底怎麼用（使用的是vue框架）

---

先來做下思想建設：
使用微信瀏覽器開啟任何一個頁面都可以點選右上角的···進行分享，這個功能只是可以自定義分享出去顯示的標題、詳情、縮圖和url，如圖

微信瀏覽器不支援主動喚起分享，所以如果你想做點選某個按鈕就開啟微信好友列表進行分享這種類似功能的話，就別想了，只能給使用者一個提示，讓他自己去分享，如圖

配置自定義分享內容的時間節點在使用者可能分享之前的任一時刻，最好在剛開啟頁面時就立即進行配置，防止使用者已經點選分享了，還沒有配置好自定義內容的情況

---

接下來看下程式碼實現：

先讀官方文件：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

安裝‘weixin-js-sdk’包

將‘weixin-js-sdk’放到Vue原型上

在進入到頁面之後從後臺提供的介面獲取微信需要的許可權驗證資訊，然後通過config介面注入許可權驗證配置

data() {
  return {
	toastTime: 2000,
	
    // 微信配置
    weixinConfig: {
      debug: false, // 除錯時可以開啟，能看到每一步的返回結果
      appId: '', // 後臺會返回
      timestamp: null, // 後臺會返回
      nonceStr: '', // 後臺會返回
      signature: '', // 後臺會返回
      jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline'], // 要包含所有你要用到的方法
    },

    // 自定義微信分享內容
    shareContent: {
      url: `${window.location.href.split('?')[0]}?inviteUserId=${this.inviteUserId}`,
      title: '感恩節狂歡！感恩紅包大回饋！',
      desc: '快來和我一起瓜分現金紅包，先到先得，可直接提現到支付寶',
    },
    // 微信分享縮圖
    // 原本用的base64圖片，但是不知道為什麼安卓顯示不出來，後來改成了https圖片
    wxShareImg: `https://${location.host}/page/news/pdd/thumbnail.png`,
  }
},

async created() {
   try {
     await this.getWechatConfig()
     await this.initWeixin()
   } catch (e) {
     console.dir(e)
   }
}

methods: {
	async getWechatConfig() {
	  try {
	    const data = await this.$axios.get(
	      '/WXB/news-server/app/wechat/jssdkConfig',
	      {
	        headers: this.requestheader,
	        params: {
	          appCode: this.requestheader.AppCode,
	          url: window.location.href, // 需要把url傳給後臺，後臺需要這個來生成許可權驗證配置
	        },
	      }
	    )
	    if (data.data.code === 200) {
	      this.weixinConfig.signature = data.data.data.signature
	      this.weixinConfig.appId = data.data.data.appId
	      this.weixinConfig.nonceStr = data.data.data.nonceStr
	      this.weixinConfig.timestamp = data.data.data.timestamp
	    } else {
	      this.$toast({
	        message: '請求錯誤',
	        duration: this.toastTime,
	      })
	    }
	  } catch (e) {
	    this.netError = false
	    this.$toast({
	      message: '請求錯誤',
	      duration: this.toastTime,
	    })
	  }
	},

	 async initWeixin() {
	    const that = this
	    this.$wx.config(this.weixinConfig)
	    await new Promise((resolve) => {
	      that.$wx.ready(() => {
	        that.$wx.onMenuShareAppMessage({
	          title: that.shareContent.title,
	          desc: that.shareContent.desc,
	          link: that.shareContent.url,
	          imgUrl: that.wxShareImg,
	          success() {
	            that.$toast({
	              message: '分享成功',
	              duration: that.toastTime,
	            })
	          },
	          cancel() {
	            that.$toast({
	              message: '分享失敗',
	              duration: that.toastTime,
	            })
	          },
	        })
	        that.$wx.onMenuShareTimeline({
	          title: that.shareContent.title,
	          link: that.shareContent.url,
	          imgUrl: that.wxShareImg,
	          success() {
	            that.$toast({
	              message: '分享成功',
	              duration: that.toastTime,
	            })
	          },
	          cancel() {
	            that.$toast({
	              message: '分享失敗',
	              duration: that.toastTime,
	            })
	          },
	        })
	        resolve()
	      })
	    })
	  },
}

搞到這裡就可以聯調了，常見的報錯解決方法請參考官方文件的“附錄5-常見錯誤及解決方法”