vue 调用微信分享 遇到的问题

Posted 雾以泪聚rx

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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\'

 

以上是关于vue 调用微信分享 遇到的问题的主要内容,如果未能解决你的问题,请参考以下文章

iOS应用调用微信分享收藏功能遇到的问题

vue 单页面(SPA) history模式调用微信jssdk 跳转后偶尔 "invalid signature"错误解决方案

微信小程序代码片段分享

vue微信分享坑

vue微信分享坑

vue项目中分享到朋友圈,调用微信接口