最近做H5页面需要提供给微信小程序内嵌,涉及到两个功能:一、隐藏头部;二、把分享信息传给小程序。做的时候遇到了一点坑,记录一下解决的方法。

一、隐藏头部

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

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

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

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

var isWeApp = window.__wxjs_environment === 'miniprogram' || window.navigator.userAgent.toLowerCase().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赋值下面加一句this.forceUpdate();就可以同步赋值了。

>>原创文章,欢迎转载。转载请注明:转载自西门的后花园,谢谢!
>>原文链接地址:http://ons.me/578.html