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

dianchanhe0596

墨衍会员 · AI 创作全网分发码龄10年

关注

转载最新推荐文章于 2025-01-02 15:16:08 发布 4.5k 阅读 AI 写同款· GEO 优化 ›

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

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

写在最后

好了，本文到此结束！

如果还有什么疑问或者建议，欢迎多多交流，原创文章，文笔有限，文中若有不正之处，万望告知。

如果觉得文章对你有帮助，打个赏，让我有更大的动力去创作，谢谢！

转载于:https://www.cnblogs.com/guiyishanren/p/11002467.html