vue 微信 js-sdk分享功能-有解無憂

第一步：

npm install weixin-js-sdk -S // （或者直接index.html里面引入js檔案 http://res.wx.qq.com/open/js/jweixin-1.6.0.js

官方檔案：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

第二步：

import wx from 'weixin-js-sdk'  // 喜歡的在main.js里面把wx掛載到Vue下面 Vue.prototype.$wx = wx

第三步：

// 找后臺獲取簽名，（拿簽名的介面只需要向后臺傳遞當前頁面的url就行了，其他引數更具業務自定，如果后臺找你要授權驗證的code，就讓他自己看檔案去）
this.$store.dispatch('getAutographCode', {vm: this, devType: 'yanshi', url: window.location.href}).then(res => {
  if(res && res.data){
    this.$wx.config({
      debug: false, // 開啟除錯模式,呼叫的所有api的回傳值會在客戶端alert出來，若要查看傳入的引數，可以在pc端打開，引數資訊會通過log打出，僅在pc端時才會列印，
      appId: res.data.appId, // 必填，公眾號的唯一標識
      timestamp: res.data.timestamp, // 必填，生成簽名的時間戳
      nonceStr: res.data.noncestr, // 必填，生成簽名的隨機串
      signature: res.data.signature, // 必填，簽名
      jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'] // 必填，需要使用的JS介面串列
    })
    this.$wx.ready(() => {      //需在用戶可能點擊分享按鈕前就先呼叫
      console.log(this.$wx, 'readyreadyreadyreadyreadyreadyreadyready')
      this.$wx.onMenuShareTimeline({
        title: this.title, // 分享標題
        link: this.$serverPath, // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
        imgUrl: this.cover , // 分享圖示
        success: () => {
          // 設定成功
        }
      })
      this.$wx.onMenuShareAppMessage({
        title: this.title, // 分享標題
        link: this.$serverPath, // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
        imgUrl: this.cover, // 分享圖示
        success: () => {
          // 設定成功
        }
      })
    });
    this.$wx.error(() => {      //需在用戶可能點擊分享按鈕前就先呼叫
      console.log(this.$wx, 'errorerrorerrorerrorerrorerrorerrorerror')
    });
  }
})

備注：上面的代碼調取成功后，微信那邊并不會彈出視窗讓選擇是分享朋友圈還是分享給好友，只是自定義了微信右上角三個點里面的分享功能！！！

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/452050.html

標籤：其他

上一篇：AJAX（Web資料互動方式）

下一篇：演示webuploader和cropperjs圖片裁剪上傳