Nuxt中微信分享

1.引入weixin-js-sdk依赖

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

2. plugins文件中新建wx-share文件，代码如下(微信文档)

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(() => {
      // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）
        this.$wechat.updateAppMessageShareData({
          title: shareData.title,
          desc: shareData.desc,
          link: shareData.link,
          imgUrl: shareData.imgUrl,
          success () {
            // 设置成功
          },
          cancel () {
            console.log('分享取消')
          }
        })
        // 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）
        this.$wechat.updateTimelineShareData({
          title: shareData.title,
          desc: shareData.desc,
          link: shareData.link,
          imgUrl: shareData.imgUrl,
          success () {
            // 设置成功
          },
          cancel () {
            console.log('分享取消')
          }
        })
      })
    }
  }
}

3. nuxt.config.js 中plugins中引入：

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

4.页面中使用

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