vue项目调用微信分享(设置全局分享和单个页面分享)

0. (后端)请求微信公众号开发的接口拿到签名

• (后端)首先获取access_token
• (后端)然后通过access_token拿到jsapi_ticket 生成 JS-SDK 权限验证的签名

1. 安装"weixin-js-sdk": "^1.6.0"

2. 微信初始化config配置

// wxConfig.js
import wx from "weixin-js-sdk";
import api from "@/services";

/*
 * 初始化设置
 *
 * @param {String} url
 */
api.base
  .getShareConfig({ url: encodeURI(window.location.href) })
  .then((res) => {
    const { appId, nonceStr, signature, timestamp } = res;
    const jsApiList = [
      "checkJsApi",
      "updateTimelineShareData",
      "updateAppMessageShareData",
      "onMenuShareAppMessage",
      "onMenuShareTimeline",
    ];

    // wx.config
    wx.config({
      debug: false,
      appId: appId,
      timestamp: timestamp,
      nonceStr: nonceStr,
      signature: signature,
      jsApiList,
    });

    // wx.error
    wx.error((err) => {
      console.log(err);
    });
  });

3.main.js里引入wxConfig.js

import '@/utils/wxConfig'

4.微信分享配置

// wxShare.js
import wx from 'weixin-js-sdk'

function wechatShare(param) {
  // wx.ready
  wx.ready(() => {
    const { title, desc, link, imgUrl } = param

    const tempParam = {
      title,
      desc,
      link,
      imgUrl,
      success: (res) => {
        console.log(`分享成功`, res)
      },
      cancel: (err) => {
        console.log('分享失败', err)
      }
    }
    // 分享给朋友
    wx.onMenuShareAppMessage(tempParam)
    // 分享到朋友圈
    wx.onMenuShareTimeline(tempParam)
    // 分享给朋友 + 分享到QQ
    wx.updateAppMessageShareData(tempParam)
    // 分享到朋友圈 + 分享到QQ空间
    wx.updateTimelineShareData(tempParam)
  })
}
export default wechatShare

5.调用

import wechatShare from '@/utils/wxShare'
wechatShare({
  title: '分享标题',
  desc: '分享描述',
  link: location.href,
  imgUrl: 'https://xxx.com/share.jpg'
})

• 这个地方如果全局都是一个分享语直接在main.js里或者App.vue里调用即可
• 如果是每个页面有单独的分享需要在需要的页面单独调用，而且要注意离开有分享的A页面到不需要分享的B页面分享语变化, 这时候可以写在路由配置里。

router.afterEach((to) => {
  wechatShare({...})
})

注意

1. 微信开发文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html
2. 签名：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62
3. 开发可以在微信开发者工具-公众号网页调试，如果wx.config报错出现invalid signature，大概率是后端签名的问题
4. 域名需要在公众号后台配置白名单。https://mp.weixin.qq.com/ - 公众号设置 - JS接口安全域名