首页 > 上网技巧 > 电脑小技巧 > 微信JSSDK和自定义分享的神坑

微信JSSDK和自定义分享的神坑

时间:2018-01-29 10:50 作者:QQ地带 我要评论

关于
 
最近开发了一个小的PHP项目, 其中有一个功能是希望用户在手机微信中转发这个页面给自己的朋友。
在这个项目中熟悉了一下微信的H5(JSSDK)开发流程, 过程中遇到一个神一样的坑, 在本文记录一下. 微信的官方文档在 这里,
此处不再赘述, 如果遇到了问题可以一起讨论, 我的邮箱是huhaonan@gmail.com
 
顺便说一下 官方文档中留的那个联系邮箱, 我发了邮件求助但是并没有鸟我,所以有问题的话还是得靠自己解决 :)
 
自定义分享的坑
 
我们由上面的文档可以看到, 微信分享的时候可以支持自定义的标题, 图标, 链接等,
但是很多人按照文档操作都不能达到自定义的效果, 预期的样式是这样的
 
但是最后的结果是这样的
 
我google了一个晚上都不行, 最后自己慢慢试出来才发现, 神坑啊!!!
 
先说下结论: 是因为我们的desc写的是 “恭喜发财, 大吉大利!”… 触发了微信的屏蔽机制, 猜测是那种抵触商家虚假宣传的, 好吧但是 单独写 恭喜发财 或者 大吉大利 都没问题,
最扯淡的是这个屏蔽的规则是不透明的, 比如改成 “万事如意, 大吉大利!” 就没事了, 但是 “万事如意, 大吉大利! 万事如意”就会被屏蔽, wtf …
 
这里面的原因其实不止一种, 包括微信给出的Demo里面也没有完整说明, 只能严格按照微信的要求来, 比如:
 
素材方面 你的图标, 文字最好是遵循 微信的标准
微信版本问题 请看 这里
有人说什么在文章的开头放一个图片并设置成 display: none, 反正我是没有成功 :(
代码方面, 正确的使用方法应该是这样的
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// 页面引入微信js
<script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
 
// 加载完成后初始化配置
<script>
  wx.config({
    debug     : true, // 线上要设置成 false
    appId     : '',   // 必填,公众号的唯一标识
    timestamp : ,     // 必填,生成签名的时间戳
    nonceStr  : '',   // 必填,生成签名的随机串
    signature : '',   // 必填,签名,见附录1
    jsApiList : []    //
  });
 
  // 微信加载成功后执行绑定分享事件
  wx.ready(function() {
    wx.onMenuShareAppMessage({
      title   : '',     // 自定义的标题
      desc    : '',     // 自定义描述
      link    : '',     // 自定义链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      imgUrl  : '',     // 分享图标(完整的URL)
      type    : '',     // 分享类型,music、video或link,不填默认为link
      dataUrl : '',     // 如果type是music或video,则要提供数据链接,默认为空
      success : function () {
          // 用户确认分享后执行的回调函数
          // 比如 alert('分享成功');
      },
      cancel: function () {
          // 用户取消分享后执行的回调函数
      }
    });
  });
</script>
感受
 
这个问题一开始没有摸清方向, 关键是怎么都没想到会是desc的问题(当然title可能也有问题), 在错误的
方向上搞了一个晚上, 郁闷了很久, 只好从头开始, 用一个最简单的demo, 然后慢慢改desc, 改图标, 最后
才幸运地发现了问题.

标签: 微信
顶一下
(1)
100%
踩一下
(0)
0%

Google提供的广告