nuxt+weixin-js-sdk 配置微信分享api

nuxt配置微信分享api，使用插件形式配置nuxt.config.js裏

// nuxt.config.js 配置以下
  plugins: [
    { src: '~/plugins/wx-share.js', ssr: false }
  ],
複製代碼

// plugins/wx-share.js 內容以下

import Vue from 'vue'
import axios from 'axios'  // 如nuxt已經集成了axios 此處能夠去掉
import wx from 'weixin-js-sdk'

Vue.prototype.$axios = axios // 如nuxt已經集成了axios 此處能夠去掉
Vue.prototype.$wechat = wx

const wechatShare = {
  install(Vue) {
    Vue.prototype.wxShare = function(shareData, url) {
      this.$axios
        .get('//xxx.com/v2/weixin-share/get', {
          // 請求配置
          params: {
            currentUrl: url  // 根據後臺配置填寫
          }
        })
        .then(res => {
          const Data = res.data.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.url,
          imgUrl: shareData.image,
          success: function() {
            // 設置成功
          },
          cancel: function() {
            console.log('分享取消')
          }
        })
        // 自定義「分享到朋友圈」及「分享到QQ空間」按鈕的分享內容（1.4.0）
        this.$wechat.updateTimelineShareData({  
          title: shareData.title,
          desc: shareData.desc,
          link: shareData.url,
          imgUrl: shareData.image,
          success: function() {
            // 設置成功
          },
          cancel: function() {
            console.log('分享取消')
          }
        })
      })
    }
  }
}

Vue.use(wechatShare)
複製代碼

使用方式

// 組件使用
export default {
  mounted() {
    this.wxShare(
      {
        title: 'title',
        desc: 'desc',
        link: 'shareData.url',
        imgUrl: 'shareData.image'
      },
      'https://www.jianshu.com/p/840169ba92e6'
    )
  }
}
複製代碼