1. Introduce weixin-js-SDK dependency

npm install weixin-js-sdk or yarn add weixin-js-sdk

2. Create a new wx-share file in the plugins file with the following code:WeChat document)

import Vue from 'vue' import wx from 'weixin-js-sdk' Vue.prototype.$wechat = wx export default ({ app, $axios, store }) => { Vue.prototype.wxShare = function (shareData, url) { console.log('wxShare', shareData, url) if (store.getters.deviceType.env && store.getters.deviceType.env === 'wechat') { $axios.post('/weChat/getWeChatConfig', {url}).then(res => { const Data = res.data console.log('getWeChatConfig', Data) this.$wechat.config({ debug: false, appId: Data.appId, timestamp: Data.timestamp, nonceStr: Data.nonceStr, signature: Data.signature, jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData']})}) this.$wechat. Ready (() => {// Customize the "Share to Friends" and "Share to QQ" buttons to share content (1.4.0) this.$wechat.updateAppMessageShareData({ title: shareData.title, desc: shareData.desc, link: shareData.link, imgUrl: Sharedata.imgurl, success () {// Set successfully}, Cancel () {the console. The log (' share cancellation ')}}) / / custom "share to friends" and "share to QQ space" button on the share content (1.4.0) enclosing $wechat. UpdateTimelineShareData ({ title: shareData.title, desc: shareData.desc, link: shareData.link, imgUrl: Sharedata.imgurl, Success () {// Set successfully}, cancel () {console.log(' share cancelled ')}})})}}}Copy the code

3. Plugins in nuxt.config.js include:

plugins: [
    { src: '~/plugins/wx-share.js', ssr: false }
  ],
Copy the code

4. Use it on the page

mounted () {
    this.wxShare(
      {
        title: '',
        desc: '',
        link: window.location.href,
        imgUrl: ''
      },
      window.location.href
    )
  },
Copy the code