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

秒速五厘米 2023-06-06 10:57 37阅读 0赞

> 前提：要有公众号，需要在其后台添加一个安全域名，安全域名用于微信的验证，没有这一步操作，下面的都白搭。一般还需要后端提供一个获取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