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

时间 2019-12-13

标签 vue 实现微信分享朋友功能繁體版

原文原文链接

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

A-A+

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

舒适提示：本文共3536个字，读完预计9分钟。html

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

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

下面说一下具体的步骤：node

一、经过npm 安装微信的js-sdk，固然你也能够在index.html页面中直接加script标签来引用，哪一种方式均可以。命令以下：ios

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

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

/**
 * 微信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

三、如何使用呢？npm

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

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

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

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

写在最后

好了，本文到此结束！

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

若是以为文章对你有帮助，打个赏，让我有更大的动力去创做，谢谢！