<th id="l8pc7"><track id="l8pc7"><rt id="l8pc7"></rt></track></th>

  • <em id="l8pc7"></em>
    <th id="l8pc7"></th>

    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

    留言