web端如何微信分享代码

概述

最近H5页面需要内嵌微信小程序提供，包括两个功能：1、隐藏头部。第二，将共享信息传递给小程序。

做的时候遇到了一点坑，记录一下解决的方法。

---

隐藏头部

APP内嵌H5隐藏头部，一般都是H5里判断userAgent是否有APP的特定字符串，然后做隐藏。微信小程序也一样，官方提供了文档说明相关接口4，但示例代码的两种方法都是异步方法。一般大型项目都是把判断设备写成一个公共方法，哪里要用哪里调，异步方法就没办法公用了。二来如果用异步方法判断头部，异步方法是要消耗时间的，通过异步方法来隐藏头部，页面会闪一下，因为一开始页面显示了头部，然后异步方法判断是微信小程序，才会隐藏头部。这种不好的体验也是不允许的，所以必须找到一个同步方法能判断微信小程序。

官方开发者论坛有个帖子，官方人员回复过同步的办法，只是没写到文档里“如果是前端判断小程序环境，想要同步的方法，需要兼容一下，在iOS可以同步取得 window.__wxjs_environment，在安卓则判断UA上是否有miniprogram”。通过这段话，我们可以得到以下代码（代码有简化，无法直接使用）：

var isWeApp = isIOS ? window.__wxjs_environment === 'miniprogram' : ().indexOf('miniprogram') > -1);

我自己测试了几台手机，能成功识别微信小程序。但这么写感觉太局限了，我最终的代码如下：

var isWeApp = window.__wxjs_environment === 'miniprogram' || window.naviga().indexOf('miniprogram') > -1;

上面的代码意思是，不论你是什么系统，这两个条件只要满足一个，就判断为微信小程序。

---

把分享信息传给小程序

官方文档提供了postMessage功能，这里要特别注意后面一段话“网页向小程序 postMessage 时，会在特定时机（小程序后退、组件销毁、分享）触发并收到消息。e.detail = { data }”。官方论坛很多人提问为什么postMessage无效，估计大部分原因是没看到“特定时机”这句话。这其中就包括分享，所以点分享按钮肯定会接受H5传过来的信息。

H5页面里先引用JSSDK 1.3.2，如果你要传字符串，就写：

wx.miniProgram.postMessage({ data: 'foo' })

如果你要传对象，就写：

wx.miniProgram.postMessage({ data: {foo: 'bar'} })

然后微信小程序里接收bindmessage方法，在方法里打印e.detail就知道获取到的数据是什么格式。刷新微信小程序是不会执行方法的，必须按照上面说的，“会在特定时机（小程序后退、组件销毁、分享）触发并收到消息”。我这里只要点击右上角分享按钮，微信开发者工具控制台就会打印出信息。出来的信息是个数组，有人说用数组的最后一个值，这个我就不清楚为什么了，我每次数组都只有1个值，就取的第一个值。

另外和我联调的微信小程序是基于Taro开发的。这里bindmessage方法和onShareAppMessage是平行的方法，bindmessage里获取的值还不方便直接传给onShareAppMessage里使用，所以要在外面声明变量做传递。微信小程序声明变量是data，改变值是setData，而Taro声明变量是state，改变值是setState。恰巧setState赋值是异步的（没试过setData是同步还是异步），onShareAppMessage里永远都获取不到声明的变量。问了好久，才知道在setState赋值下面加一句();就可以同步赋值了。

---

后面小编会分享更多运维干货，感兴趣的朋友走一波关注哩~