海口宾馆小姐|海口按摩好

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

微信咨詢 寒總監

海口宾馆小姐 黑龙江快乐10分开奖网站 挂机赚钱APP最新版本 网上动画接任务赚钱吗 58同城城市合伙人分享赚钱 我有电脑技术怎么赚钱 广东十一选五开奖结果x 山西11选5遗漏走势图 极速飞艇骗局 酷狗彩票群 双色球计划免费版 体彩20选5走势图浙江风采网 扫一扫送礼品怎么赚钱 光大彩票群 腾讯游戏欢乐斗地主 广西快3走势图彩经网 梦幻西游老区自己带小号赚钱