关于在vue2中使用weixin-js-sdk的详细步骤

npm install weixin-js-sdk --save

import wx from 'weixin-js-sdk'

created () {
  // 发送Ajax请求获取微信Js-SDK配置信息
  axios.get('/api/getWechatConfig').then(res => {
    // 将配置信息保存在组件的data对象中
    this.wechatConfig = res.data

    // 在获取到配置信息之后，调用微信Js-SDK的初始化函数
    this.initWechatJsSDK()
  }).catch(err => {
    console.error(err)
  })
}

methods: {
  initWechatJsSDK () {
    // 设置微信Js-SDK的配置信息
    wx.config({
      debug: false,
      appId: this.wechatConfig.appId,
      timestamp: this.wechatConfig.timestamp,
      nonceStr: this.wechatConfig.nonceStr,
      signature: this.wechatConfig.signature,
      jsApiList: [
        // 需要使用的微信JS接口列表
        'onMenuShareAppMessage',
        'onMenuShareTimeline',
        // ...
      ]
    })

    // 配置完成后调用微信Js-SDK的ready函数
    wx.ready(() => {
      // 在ready函数中可以调用微信Js-SDK的其他接口
    })

    // 在配置出错的情况下调用错误处理函数
    wx.error((err) => {
      console.error(err)
    })
  }
}

wx.ready(() => {
  // 设置分享到朋友圈的功能
  wx.onMenuShareTimeline({
    title: '分享标题',
    link: '分享链接',
    imgUrl: '分享图片',
    success: () => {
      // 分享成功的回调函数
    },
    cancel: () => {
      // 用户取消分享的回调函数
    }
  })

  // 设置分享给朋友的功能
  wx.onMenuShareAppMessage({
    title: '分享标题',
    desc: '分享描述',
    link: '分享链接',
    imgUrl: '分享图片',
    success: () => {
      // 分享成功的回调函数
    },
    cancel: () => {
      // 用户取消分享的回调函数
    }
  })
})