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

  • 内容
  • 相关

下面说一下具体的步骤:
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的值

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

本文标签:

版权声明:若无特殊注明,本文皆为《热心网友》原创,转载请保留文章出处。

本文链接:vue实现微信分享朋友圈和朋友功能 - https://qibiao.qingshenshiye.cn/?post=24

发表评论

电子邮件地址不会被公开。 必填项已用*标注

允许邮件通知
//