持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第18天，点击查看活动详情

前言

在接入一个第三方sdk的时候，如果对sdk文档没有充分的阅读，那么就会造成评审的时候你接了很多需求但是到最后都实现不了，于是只能背锅了；今天我们就来说一说怎么做微信分享，哪些需求要砍掉，怎么砍掉这些需求

PC端分享

PC端分享一般是扫码到移动端去分享

移动端分享

设置移动端分享的流程：加载微信jssdk=>调用api设置分享内容

加载微信sdk

对于移动端，我们首先看一下微信开发文档如何使用微信sdk：

// 首先引入jssdk http://res.wx.qq.com/open/js/jweixin-1.6.0.js
// 然后通过config注入权限验证配置
wx.config({
  debug: true, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: [] // 必填，需要使用的 JS 接口列表
});
// 通过 ready 接口处理成功验证
wx.ready(()=>{
 // 然后就可以开发我们的业务
})

设置分享内容

屏幕快照 2022-06-11 下午6.49.18.png 注意：这里我们一般不会写死分享的内容，一般创建一个dom，然后设置一些自定义属性shareTitle、shareDesc、shareImg、shareUrl，当我们wxjssdk加载完毕之后去获取这几个属性

// 首先jsApiList需要加上这两个api
jsApiList:['updateAppMessageShareData','updateTimelineShareData']
// wx.ready一般在mount之后调用，在Vue中是mounted，React中是componentDidMount
wx.ready(()=>{
   const shareDom = document.getElement("shareDom")
   const title = shareDom.getAttribute("shareTitle")
   const desc = shareDom.getAttribute("shareDesc")
   const imgUrl = shareDom.getAttribute("shareImg")
   const link = shareDom.getAttribute("shareUrl")
   
   wx.updateAppMessageShareData({
       title,desc,imgUrl,link
   });
   wx.updateTimelineShareData({
       title,desc,imgUrl,link
   })
});

这样我们就实现了微信分享的所有功能，然后我们欢欢喜喜发布到测试环境，发现并没有生效，这是为什么？因为我们的测试环境一般都是内网环境，当然无法预览微信分享，所以我们一般需要在预发环境或者线上环境查看分享结果；为了避免返工我们一定要确认好上面写的代码准确无误！

砍需求+改需求

接下来就是重点了，微信分享哪些功能不能实现？

按钮唤起分享界面

当刚开始需求评审的时候，产品一般都要求放一个按钮，点击按钮唤起分享界面；这里我们”砍掉这个需求“！先把文档截图给产品看然后说明”分享界面“这个是微信提供的；而微信为了防止”诱导分享“不支持这么做。

微信右上角...按钮埋点

接下来产品还是不善罢甘休：既然这个按钮实现不了，那么点击微信右上角...的时候给我埋点，我要看看多少人分享了；呃...还是实现不了，这个时候产品很有可能火冒三丈，我们只能拿证据说话：

屏幕快照 2022-06-11 下午6.55.31.png

这里有两个api是点击”分享到朋友圈“和”分享给朋友“，而且即将废弃，更别说点击右上角...这个时候直接给产品断了念想，但是这里的埋点我们也需要看一看怎么做

分享埋点

这里的分享我们只需要做一个分享按钮，点击之后出现一个引导用户点击右上角按钮的提示，同时上报用户点击事件，这样就解决了运营过程中统计分享数的问题

总结

设置移动端微信分享首先需要引入微信jssdk，然后通过api设置分享内容；

如果要做分享埋点需要在页面上加一个按钮，按钮点击后提示用户点击右上角然后再分享，相当于延长了用户分享的操作链

其他的需求我们都实现不了

做微信分享的时候怎么砍需求？

前言