H5页面webview内嵌网页的一点经验分享

2019.04.03 |
标签

概述

最近的H5页面需要提供给微信applet嵌入,涉及两个功能:一,隐藏头部;第二,将共享信息传递给applet。当我这样做时,我遇到了一些坑并记录了解决方案。

隐藏头部

APP嵌入H5隐藏头,一般用H5来判断userAgent是否有特定的APP字符串,然后再做隐藏。微信小程序也是如此。官方文档是为相关接口4提供的,但示例代码的两种方法是异步方法。一般而言,大型项目将判断设备作为公共方法编写。无论在何处使用,都不能公开使用异步方法。其次,如果使用异步方法来确定标头,则异步方法非常耗时。异步方法用于隐藏标头。页面将闪烁,因为第一页显示标题,然后异步方法确定它是一个微信小程序。会隐藏头部。这种不良体验也是不允许的,因此您必须找到一种同步方法来判断微信applet。

官方开发者论坛中有一篇文章。该官员已对同步方法做出回应,但没有写入该文件。 “如果它是前端判断小程序环境,你想要同步方法,你需要兼容,你可以在iOS,Android中获得它。确定UA上是否有微型程序。通过这段话,我们可以得到以下代码(代码简化,不能直接使用):

Var isWeApp=isIOS?==='miniprogram':(()。indexOf('miniprogram')<- 1);

我亲自测试了一些手机并成功识别了微信applet。但是这篇文章感觉太有限了,我的最终代码如下:

Var isWeApp===='miniprogram'|| ()。indexOf('miniprogram')<- 1;

上面的代码意味着无论你是什么系统,这两个条件都将被判断为微信小程序,只要它们满足一个。

把分享信息传给小程序

官方文档提供了postMessage函数。在这里你应该特别注意以下段落:“当页面被发送到小程序postMessage时,它将在特定时间触发并接收消息(小程序返回,组件破坏,共享)。={data}” 。官方论坛中有很多人问为什么postMessage无效。据估计,大多数原因是没有看到“具体时间”这一短语。这包括共享,因此共享按钮肯定会接受来自H5的信息。

JSSDK 1.3.2首先在H5页面中引用。如果要传递字符串,请写:

({data:'foo'})

如果要传递对象,请写:

({data: {foo:'bar'}})

然后微信小程序接收bindmessage方法,并在方法中打印以获知所获取数据的格式。刷新微信小程序将不会执行该方法。如上所述,必须在特定时间(小程序返回,组件销毁,共享)触发和接收它。我只需单击右上角的“共享”按钮,微信开发者工具控制台就会打印出信息。出来的信息是一个数组。有人说使用了数组的最后一个值。我不知道为什么。每个数组只有一个值,我取第一个值。

另外,我链接到的微信小程序基于Taro。这里bindmessage方法和onShareAppMessage是并行方法,bindmessage中获取的值不方便直接传递给onShareAppMessage,因此声明外部变量要传递。微信applet声明变量是数据,变量值是setData,Taro声明变量是state,变化值是setState。碰巧setState赋值是异步的(如果setData是同步或异步的话,没有尝试过),并且在onShareAppMessage中永远不会获得声明的变量。在问了很长时间之后,我知道我可以在setState赋值中添加一个句子();我可以同步分配值。

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

相关推荐

最新文章

热门推荐

联系电话 400-6065-301

微信咨询 寒总监