vue 調用微信分享 遇到的問題

關於微信分享網上有一堆的教程，就不詳細說了，大致如下：

1.安裝

cnpm install weixin-js-sdk --save-dev

2.新建一個share.js，與main.js放在同一層級（我只是偷懶，方便調用）

import wx from 'weixin-js-sdk'

exports.install = function (Vue, options) {
  Vue.prototype.shareList = function (imgUrl, link, desc, title) {
    // 分享
    var url = encodeURIComponent(location.href.split('#')[0])
    Vue.http.post('http://fubala.xiemy.cn/api/' + 'Wechat/getSignPackage', {url: url}).then(function (res) {
      res = res.data.data

      wx.config({
        debug: false, // true:調試時候彈窗
        appId: res.appId, // 微信appid
        timestamp: res.timestamp, // 時間戳
        nonceStr: res.nonceStr, // 隨機字符串
        signature: res.signature, // 簽名
        jsApiList: [
          // 所有要調用的 API 都要加到這個列表中
          'onMenuShareTimeline', // 分享到朋友圈接口
          'onMenuShareAppMessage', //  分享到朋友接口
          'onMenuShareQQ', // 分享到QQ接口
          'onMenuShareWeibo' // 分享到微博接口
        ]
      })
      wx.checkJsApi({
        jsApiList: [
          // 所有要調用的 API 都要加到這個列表中
          'onMenuShareTimeline', // 分享到朋友圈接口
          'onMenuShareAppMessage', //  分享到朋友接口
          'onMenuShareQQ', // 分享到QQ接口
          'onMenuShareWeibo' // 分享到微博接口
        ],
        success: function (res) {
        }
      })

      wx.ready(function () {
        // 微信分享的數據
        var shareData = {
          imgUrl: imgUrl, // 分享顯示的縮略圖地址
          link: link, // 分享地址
          desc: desc, // 分享描述
          title: title, // 分享標題
          success: function () {
            // 分享成功可以做相應的數據處理
            alert('分享成功')
            alert('appId:' + res.appId)
            alert('timestamp:' + res.timestamp)
            alert('nonceStr:' + res.nonceStr)
            alert('signature:' + res.signature)
          },
          fail: function () {
            alert('調用失敗')
          },
          complete: function () {
            alert('調用結束')
          }
        }
        wx.updateTimelineShareData(shareData)
        wx.updateAppMessageShareData(shareData)
        wx.onMenuShareQQ(shareData)
        wx.onMenuShareWeibo(shareData)
      })
      wx.error(function (res) {
        // config信息驗證失敗會執行error函數，如簽名過期導致驗證失敗，
        // 具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數中查看，
        // 對於SPA可以在這里更新簽名。
        alert('分享失敗')
      })
    }, function (res) {
      alert(res)
      console.log(parseInt(res.code))
    })
  }
}

3.main.js中引用

import share from './share'
Vue.use(share)

4.組件中調用分享，在created或者mounted中調用，方法如下

this.shareList(image, link, title,sub_title) // image 為分享的圖片，必須是完整路徑

 

 

但是

使用的時候出現一些問題：

base.js?d7e6:19 Uncaught (in promise) TypeError: Cannot read property 'config' of undefined
    at eval (share.js?d7e6:19)

很奇怪，因為我是按照教程寫的啊，怎么會這樣，然后我就好奇的輸出wx這個變量

得到的結果，可想而知

wx:undefined

這時候我心里有千萬只神獸奔騰而過，還有種不知所措的感覺

網上找了很久，還真給我找出來一個可能性：

微信為了方便用戶使用，將官方的jssdk發布到了npm上，有一個叫weixin-js-sdk的，但我們需要使用的不是這個，網上很多在vue中引用的是這個，但是這個是為commonjs發布的版本，只能通過require引入。

 

let wx = require('weixin-js-sdk');

 

實際為了方便es6使用，官方發布了一個weixin-jsapi，這個才是我們能在vue中引用的jssdk。

 

cnpm install weixin-jsapi --save-dev

 

 

import wx from 'weixin-jsapi'