nuxt微信分享实战

 前提工作：公众号账号需要认证并且配置域名,例如域名为http://www.baidu.com,配置应该为baidu.com

1.在plugins目录下新建一个wxShare.js文件

import Vue from 'vue'
import wx from 'weixin-js-sdk'
Vue.prototype.$wechat = wx

export default () => {
  // 这个url必须传当前页面的url，不然会一直报签名失效
  Vue.prototype.wxShare = async function (shareData, url) {
    // 获取微信公众号签名数据
    let params = {
      URL: url
    }
    const { result } = await this.$indexApi.getWXShare(params);
    // if (result) {
    // $axios.post('/api/wx/base/signature', { url }).then(({ data }) => {
    // const wxData = data.data
    // 注意接口返回字段大小写正确
    // wx.checkJsApi({
    //   jsApiList: ['updateAppMessageShareData', 'onMenuShareAppMessage', 'updateTimelineShareData'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
    //   success: function (res) {
    //     console.log('11111111111', res);
    //     // 以键值对的形式返回，可用的api值true，不可用为false
    //     // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
    //   }
    // });
    wx.config({
      debug: false,
      appId: result.appId,
      timestamp: result.timestamp,
      nonceStr: result.nonceStr,
      signature: result.signature,
      jsApiList: ['updateAppMessageShareData', 'onMenuShareAppMessage', 'updateTimelineShareData']
    });

    setTimeout(() => {
      wx.ready(() => {
        console.log('vvvv', wx.updateAppMessageShareData);
        // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）
        if (wx.updateAppMessageShareData) {
          wx.updateAppMessageShareData({
            // jsApiList: ['updateAppMessageShareData', 'onMenuShareAppMessage'],
            title: shareData.title,
            desc: shareData.desc,
            link: shareData.link,
            imgUrl: shareData.imgUrl,
            success(res) {
              console.log('成功', res);

            },
            cancel(err) {
              console.log("失败2", err);
            }
          })
        } else {
          wx.onMenuShareAppMessage({
            // jsApiList: ['updateAppMessageShareData', 'onMenuShareAppMessage'],
            title: shareData.title,
            desc: shareData.desc,
            link: shareData.link,
            imgUrl: shareData.imgUrl,
            success() {
              console.log('成功2', res);
            },
            cancel(err) {
              console.log('失败2', err);
            }
          })
        }
        // 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）
        wx.updateTimelineShareData({
          title: shareData.title,
          desc: shareData.desc,
          link: shareData.link,
          imgUrl: shareData.imgUrl,
          success() {
          },
          cancel() {
          }
        })
      })
    }, 300)


    wx.error(function (res) {
      console.log('error', res);
      // config信息验证失败会执行 error 函数，如签名过期导致验证失败，具体错误信息可以打开 config 的debug模式查看，也可以在返回的 res 参数中查看，对于 SPA 可以在这里更新签名。
    });
    // }

    // })
  }
}

2.在nuxt.config.js plugins里面配置

{ src: '~/plugins/wxShare.js', ssr: false },

在页面初始化

this.wxShare(
        {
          title: "标题",
          desc: "测试",
          link: window.location.href,
          imgUrl: "",
        },
        window.location.href
      );