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

A-A+

haibao 2018-10-25 11 21 6.2 k 百度已收录前端开发

温馨提示：本文共3536个字，读完预计9分钟。

这两天在开发一个双十一的活动页，前端用的是Vue，由于活动的性质需要传播分享，所以在项目中也集成了微信JS-SDK自定义的功能，下面来说一下实现的思路和方法。

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

下面说一下具体的步骤：

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

1	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、如何使用呢？

在Vue页面，比如首页，先引入刚刚的js文件：

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

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

1	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的问题。