vueJS实现微信端分享朋友圈和朋友功能

前提：要有公众号，需要在其后台添加一个安全域名，安全域名用于微信的验证，没有这一步操作，下面的都白搭。一般还需要后端提供一个获取appid，timestamp，签名等信息的接口给你ajax请求用。如果你自己用nodejs啥的实现，那么也是棒棒的。

下面说一下具体的步骤：
1、通过npm 安装 微信的js-sdk，当然你也可以在index.html页面中直接加script标签来引用，哪种方式都可以。命令如下：

npm install weixin-js-sdk --save-dev

2、在Vue目录下，比如：common文件夹，新建一个js文件，起名你随意，我这边叫wxapi.js，贴入下面代码(PS: Axios根据实际情况来使用)：

/**
 * 微信js-sdk
 * 参考文档：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
 */
import wx from 'weixin-js-sdk'
import Axios from 'axios'
const wxApi = {
  /**
  * [wxRegister 微信Api初始化]
  * @param  {Function} callback [ready回调函数]
  */
  wxRegister (callback) {
    // 这边的接口请换成你们自己的
    Axios.post('/api/wechat/shares', { reqUrl: window.location.href }, { timeout: 5000, withCredentials: true }).then((res) => {
      let data = JSON.parse(res.data.data) // PS: 这里根据你接口的返回值来使用
      wx.config({
        debug: false, // 开启调试模式
        appId: data.appId, // 必填，公众号的唯一标识
        timestamp: data.timestamp, // 必填，生成签名的时间戳
        nonceStr: data.noncestr, // 必填，生成签名的随机串
        signature: data.signature, // 必填，签名，见附录1
        jsApiList: data.jsApiList // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
      })
    }).catch((error) => {
      console.log(error)
    })
    wx.ready((res) => {
      // 如果需要定制ready回调方法
      if (callback) {
        callback()
      }
    })
  },
  /**
  * [ShareTimeline 微信分享到朋友圈]
  * @param {[type]} option [分享信息]
  * @param {[type]} success [成功回调]
  * @param {[type]} error   [失败回调]
  */
  ShareTimeline (option) {
    wx.onMenuShareTimeline({
      title: option.title, // 分享标题
      link: option.link, // 分享链接
      imgUrl: option.imgUrl, // 分享图标
      success () {
        // 用户成功分享后执行的回调函数
        option.success()
      },
      cancel () {
        // 用户取消分享后执行的回调函数
        option.error()
      }
    })
  },
  /**
  * [ShareAppMessage 微信分享给朋友]
  * @param {[type]} option [分享信息]
  * @param {[type]} success [成功回调]
  * @param {[type]} error   [失败回调]
  */
  ShareAppMessage (option) {
    wx.onMenuShareAppMessage({
      title: option.title, // 分享标题
      desc: option.desc, // 分享描述
      link: option.link, // 分享链接
      imgUrl: option.imgUrl, // 分享图标
      success () {
        // 用户成功分享后执行的回调函数
        option.success()
      },
      cancel () {
        // 用户取消分享后执行的回调函数
        option.error()
      }
    })
  }
}
export default wxApi

3、如何使用呢？

import wxapi from '@/common/wxapi.js'

在mounted()中加入调用的代码：

wxapi.wxRegister(this.wxRegCallback)

然后再methods中加入下面3个方法：

wxRegCallback () {
  // 用于微信JS-SDK回调
  this.wxShareTimeline()
  this.wxShareAppMessage()
},
wxShareTimeline () {
  // 微信自定义分享到朋友圈
  let option = {
    title: '限时团购周 挑战最低价', // 分享标题, 请自行替换
    link: window.location.href.split('#')[0], // 分享链接，根据自身项目决定是否需要split
    imgUrl: 'logo.png', // 分享图标, 请自行替换，需要绝对路径
    success: () => {
      alert('分享成功')
    },
    error: () => {
      alert('已取消分享')
    }
  }
  // 将配置注入通用方法
  wxapi.ShareTimeline(option)
},
wxShareAppMessage () {
  // 微信自定义分享给朋友
  let option = {
    title: '限时团购周 挑战最低价', // 分享标题, 请自行替换
    desc: '限时团购周 挑战最低价', // 分享描述, 请自行替换
    link: window.location.href.split('#')[0], // 分享链接，根据自身项目决定是否需要split
    imgUrl: 'logo.png', // 分享图标, 请自行替换，需要绝对路径
    success: () => {
      alert('分享成功')
    },
    error: () => {
      alert('已取消分享')
    }
  }
  // 将配置注入通用方法
  wxapi.ShareAppMessage(option)
}

以上几步即实现了微信的分享功能，如果期间遇到问题，请自己开启debug调试模式，并根据错误提示的内容去解决。一般如果后端接口没问题的话，前端一般只会遇到：签名验证失败或者URL的问题。?

config:fail,Error: AppID 不合法

由于后端返回的是json, 我前台没有将json转为对象，所以导致一直报appID不合法。这个细心点就不会遇到了。

补充说明：jsApiList的值

onMenuShareTimeline
onMenuShareAppMessage
onMenuShareQQ
onMenuShareWeibo
onMenuShareQZone
startRecord
stopRecord
onVoiceRecordEnd
playVoice
pauseVoice
stopVoice
onVoicePlayEnd
uploadVoice
downloadVoice
chooseImage
previewImage
uploadImage
downloadImage
translateVoice
getNetworkType
openLocation
getLocation
hideOptionMenu
showOptionMenu
hideMenuItems
showMenuItems
hideAllNonBaseMenuItem
showAllNonBaseMenuItem
closeWindow
scanQRCode
chooseWXPay
openProductSpecificView
addCard
chooseCard
openCard

以上有些权限菜单可能会被废弃，请自行查看微信官方文档：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115