网上非常多的微信分享例子和教程，但是都不全面，甚至不少错误。自己根据微信官方文档踩了好几个坑才撸成功。痛定思痛，写下这篇文章，详细的告诉您 React / Vue 前后端分离项目的如何实现微信分享。
一. 申请微信订阅号/服务号
这个是必要条件。需要注意的是个人的微信订阅号是没有微信分享权限的。
二. 配置 JS 接口安全域名
登录微信公众平台，配置安全域名
安全域名
假设你的前端项目访问的主域名是 abc.com，那就填 abc.com。
三.后端获取微信签名
这个步骤需要后端服务器和微信服务器进行交互，获得「网页授权access_token」，根据 access_token 把关键的几个参数算出来，传给前端。这几个参数分别是：
appId , timestamp , nonceStr , signature
（因为本文主要针对前端开发者，后端的内容就不展开了）
后端要算出这几个参数不仅仅需要 access_token，还需要一个 URL 参数。这个 URL 是前端带有分享功能页面的当前 URL。
比如 www.abc.com/123 这个页面需要微信分享功能，那么就把这个 URL 传给后端，后端算出来参数后再返回给前端。
注意，只要 URL 发生变化，都得需要重新获取微信分享参数。除非个别页面不需要微信分享功能。
URL 配置
如果前端用的是react-router 或者 vue-router ，请尽量用 history 模式。如果你用的是 hash 模式，那么你给后端传递 URL 是有坑的，具体可以看这篇文章。
四. 前端编写分享代码
打开微信分享官方文档
步骤大概是这样的
第一步我们可以直接使用 weixin-js-sdk 这个库
npm install weixin-js-sdk --save
下面是前端代码：
import wx from 'weixin-js-sdk'
const ua = window.navigator.userAgent.toLowerCase()
// 如果不在微信浏览器内，微信分享也没意义了对吧？这里判断一下
if (ua.indexOf('micromessenger') < 0) return false
// 最好在在 router 的全局钩子里调用这个方法，每次页面的 URL 发生变化时，都需要重新获取微信分享参数
// 如果你的 router 使用的是 hash 形式，应该不用每次都重新获取微信分享参数
const data = $ajax.post({
url: '当前页面的 URL',
// xxx
// xxx
})
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: '', // 必填，公众号的唯一标识
timestamp: , // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '',// 必填，签名，见附录1
jsApiList: [
'onMenuShareAppMessage',
'onMenuShareTimeline'
] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
})
wx.ready(() => {
//分享给朋友
wx.onMenuShareAppMessage({
title: '', // 分享标题
desc: '', // 分享描述
link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: '', // 分享图标
type: '', // 分享类型,music、video或link，不填默认为link
dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
})
//分享到朋友圈
wx.onMenuShareTimeline({
title: '', // 分享标题
link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: '', // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
})
})
代码亲测是没问题的，你可以下载一个微信开发者工具，打开对应的网页，测试没问题之后再用手机测试微信分享。
五. 关于 link 的坑
image.png
注意！！一定要按照规定填写 link 字段，不然微信开发者工具里测试成功，但是用手机测试还是会失败！！！
link // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
六.路由选择 history 模式还是 hash模式？
history 优点
- URL 好看，没有 #
history 缺点
- 如果你每一个页面都需要微信分享，那么每一个子路由都需要用当前的 URL 换取微信分享 config
- 需要额外配置 nginx
hash 优点
- 无需配置 nginx
- 只需要用域名请求一次微信分享 config ，全部的子页面都能微信分享
hash 缺点
- URL 里面有个 # ，不好看。但是如果你的网站是移动端的话就无所谓了。URL 不明显。
hash 的坑：拿 URL 换取微信分享 config 时，最好这么写：
const url = window.location.href.split('#')[0]
或者直接写主域名。例如http://wwww.baidu.com/
最后一定要加斜杠，别问我为什么。。。
10-24 更新：
开发的时候，一定要下载一个微信开发者工具，在那里面进行微信分享测试。代码开启 debug 模式后，如果签名错误，微信开发者工具会直接提醒你的。判断签名是否正确非常重要。
如果该文章对您有帮助，点赞支持下~
网友评论