如何在 Vue Spa 中使用微信 jssdk 分享介面

Insua發表於2018-10-09
VueJS

在Vue Spa專案中，使用了 History 模式，要使用分享介面，只能在第一次訪問的時候，就載入jssdk配置，通過Vue router進入其他頁面之後再做載入，雖然在除錯模式下依然會顯示配置正確，但是分享介面是無效的，那麼怎麼辦呢？直接在App.vue下就做jssdk config

實現步驟

編寫後端介面

使用了 overture/wechat

public function jssdk(Request $request)
    {
        $this->jssdk->setUrl($request->input('url'));
        return $this->jssdk->buildConfig([
            'onMenuShareAppMessage',
            'onMenuShareWechat',
            'onMenuShareTimeline',
            'getLocation'
        ], false);
    }

在App.vue中注入配置

引入wexin-js-sdk

const wx = require('weixin-js-sdk')

方法

async getJssdk () {
      const { data } = await this.$axios.post('/api/wechat-work/jssdk', { url: window.location.href })
      wx.config(data)
    }

在分享頁面中編寫分享方法

引入wexin-js-sdk

const wx = require('weixin-js-sdk')

在mounted裡寫入分享方法

wx.ready(() => {
      const self = this
      wx.onMenuShareTimeline({
        title: self.shareTitle,
        link: window.location.href,
        imgUrl: self.logoPath,
        success: function () {
          self.forward('onMenuShareTimeline')
          self.$toast.success('分享成功')
        },
        cancel: function () {
          self.$toast.fail('取消分享')
        }
      })
   })

最後在destroyed裡重寫分享方法，以終止分享介面

wx.ready(() => {
      wx.onMenuShareTimeline({
        success: function () {},
        cancel: function () {}
      )
    })

相關文章