前言
文档能力值：仅能帮助微信中网页开发自定义分享给朋友，朋友圈和QQ中分享给QQ好友，QQ空间的开发需求。
文档的目的：服务于没有接过微信自定义分享开发任务的人，完成快速开发和理解。
为什么要用JS-SDK？
原生的微信分享如上面的图左，使用了JS-SDK进行配置是图右，所以您知道为什么要用这个JS-SDK了吧，因为原生的这种不能满足业务需求；
所以当产品说微信分享需求，我们开发要知道他们说的是自定义微信分享微信内容，因为微信本来就带微信分享功能，我们做的只是去自定义他的标题，描述，图片，来让它满足我们的业务。
文挡结构：
接入步骤
补充部分（特意将它放在文章下面，为了您能够快速完成该需求）
您可以直接读取接入步骤就能实现微信自定义分享，我建议您看完理解部分，为了理解和更好的使用过它！
接入步骤
需要下载的插件
接入环节
步骤：绑定域名–>引入JS-SDK–>在自定分享页面config配置–>在自定义分享页面ready自定义分享内容。
- 绑定域名
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
- 在index.html页面上引入这个SDK
// 不建议引入低版本的SDK，如：<script src="http://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>，因为他的 wx.onMenuShareTimeline、wx.onMenuShareAppMessage、wx.onMenuShareQQ、wx.onMenuShareQZone 接口，即将废弃
<script src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
- 在规范的地方新建vxMixin.js文件，并粘贴如下代码：
import axios from "axios"
export default {
methods: {
async wxConfig() {
const res = await axios.post(
"xxx/xxx/xxx",
{ currentUrl: window.location.href },
{
// TODO: 根据实际接口填写
baseURL: "https://xxx.xxx.xxx/xxx/",
method: "POST"
}
)
// 接口反
const { appId, timestamp, nonceStr, signature } = res.data && res.data.data
await wx.config({
// 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
// debug: true,
// 必填，公众号的唯一标识
appId,
// 必填，生成签名的时间戳
timestamp,
// 必填，生成签名的随机串
nonceStr,
// 必填，签名
signature,
// 必填，需要使用的JS接口列表
jsApiList: ["updateTimelineShareData", "updateAppMessageShareData"]
})
wx.error(function(res) {
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
console.log("微信验证失败", res)
})
wx.ready(() => {
this.updateAppMessageShareData()
this.updateTimelineShareData()
})
wx.checkJsApi({
jsApiList: ["updateTimelineShareData", "updateAppMessageShareData"], // 需要检测的JS接口列表，所有JS接口列表见附录2,
success: function(res) {
// 以键值对的形式返回，可用的api值true，不可用为false
// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
}
})
},
// 自定义“分享给朋友”及“分享到QQ”按钮的分享内容
updateAppMessageShareData() {
wx.updateAppMessageShareData({
// TODO: 以下根据实际情况填写
title: "xxx",
desc: "xxx",
link: xxx,
// imgUrl一定要是绝对地址，否则可能出问题
imgUrl: "xxx",
success() {
// 用户确认分享后执行的回调函数
}
})
},
// 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容
updateTimelineShareData() {
wx.updateTimelineShareData({
// TODO: 以下根据实际情况填写
title: "xxx",
link: xxx,
// imgUrl一定要是绝对地址，否则可能出问题
imgUrl: "xxx",
success() {
// 用户确认分享后执行的回调函数
}
})
}
}
}
- 在需要分享的页面加入如下代码：
import vx from "（根绝具体情况填写）/vxMixin.js"
export default {
mixins: [vx],
created() {
// 如果是
if (navigator.userAgent.toLowerCase().match(/MicroMessenger/i) == "micromessenger") {
this.wxConfig()
}
}
// ......
}
补充部分
文档
坑点
- 本地测试会报错，可以发到线上进行测试或者软件解决一下（这个我不会但是知道能这么做），线上就不会，如下图，本地调试报错invalid url domain 的原因是，当前网页的域名和绑定公众号的appId没有进行绑定
2.wx.updateTimelineShareData，wx.updateAppMessageShareData，中的参数imgUrl，不要写base64、require引入、相对路径，要用上传到CDN的绝对地址，否则会有如下问题，看你是否已经中招了，都是血的教训啊：
- 场景： IOS hash模式下（我只测了这一个场景，不知道是什么问题），在该域名下从其他页面进入自定义微信分享页面时，需要手动刷新自定义分享页面
不是直接进入刷新后，才能分享出自定义的内容，我这里还不知道什么问题，但是用代码实现了一的场景，解决了这个bug：
// 组件内的守卫
beforeRouteEnter(to, from, next) {
// 判断是不是IOS和页面的来源是不是从主页跳转过来的，就是存在bug的情况，代码实现手动刷新
if (
!!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) &&
from.name === "Home"
) {
next(vm => {
// 禁止alert弹窗。 防止reload错误提醒
window.alert = function() {
return false
}
// 代码实现手动刷新
location.reload()
})
return
}
// 如果不是就是2的情况 什么都不做
next()
},
自定义分享失败的展示内容就是纯原生的展示内容：
安卓9系统，分享http://asset.esign.cn/apps/esign-nuxt-website/marketing/sml/index.html#/intro/xx 详情页的时候，分享出去的链接被安卓自动截掉了#后面的部分，变成http://asset.esign.cn/apps/esign-nuxt-website/marketing/sml/index.html#/也就是主页的网址
解决方案：在#前面加一个问号，这样就不会被截掉后面的内容了http://asset.esign.cn/apps/esign-nuxt-website/marketing/sml/index.html?#/
本文使用 mdnice 排版
