How to use wechat jssdk sharing interface in Vue Spa

Time:2021-7-25

In the Vue spa project, the history mode is used. To use the sharing interface, the jssdk configuration can only be loaded at the first visit, and then loaded after entering other pages through the Vue router. Although the configuration is still correct in the debugging mode, but the sharing interface is invalid, what should we do? Do jssdk config directly under app.vue

Implementation steps

Writing back-end interfaces

Overture / wechat is used

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

Inject configuration in app.vue

Introducing WeXin JS SDK

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

method

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

Write sharing methods on the sharing page

Introducing WeXin JS SDK

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

staymountedWrite sharing method in

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 ('share success')
        },
        cancel: function () {
          Self. $toast. Fail ('cancel sharing ')
        }
      })
   })

Finally indestroyedRewrite the sharing method to terminate the sharing interface

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

This work adoptsCC agreement, reprint must indicate the author and the link to this article