字节跳动小程序 web-view jssdk H5传递参数判断H5页面是否在小程序 web-view打开

╰半夏微凉° 2022-11-29 12:11 188阅读 0赞

1、jssdk地址

[https://microapp.bytedance.com/docs/zh-CN/mini-app/develop/component/open-capacity/web-view/][https_microapp.bytedance.com_docs_zh-CN_mini-app_develop_component_open-capacity_web-view]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ljc18wNDA1_size_16_color_FFFFFF_t_70][]

2、H5传递参数

<web-view
      src="{
       {url}}"
      bindload="webviewOnLoad"
      binderror="webviewOnError"
      bindmessage="onMessage"
    ></web-view>

Page({
      data: {
        src: "https://microapp.bytedance.com/",
      },
      // 小程序后退、组件销毁、分享时，由此函数来接收H5页传过来的参数
      onMessage(options) {
        console.log("onmessage：", options.detail.data);
      },
      webviewOnLoad() {
        console.log("webview 加载成功");
      },
      webviewOnError(e) {
        console.log("webview 加载失败", e);
      },
    });

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ljc18wNDA1_size_16_color_FFFFFF_t_70 1][]

3、判断 H5 页面是否在小程序 web-view 打开

// isTTWebView 若为 true，则是在头条小程序的 web-view 中打开
    const isTTWebView = navigator.userAgent
      .toLowerCase()
      .includes("toutiaomicroapp");

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ljc18wNDA1_size_16_color_FFFFFF_t_70 2][]

[https_microapp.bytedance.com_docs_zh-CN_mini-app_develop_component_open-capacity_web-view]: https://microapp.bytedance.com/docs/zh-CN/mini-app/develop/component/open-capacity/web-view/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ljc18wNDA1_size_16_color_FFFFFF_t_70]: /images/20221124/283241abaaf349d0a31812b9ca12b7ac.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ljc18wNDA1_size_16_color_FFFFFF_t_70 1]: /images/20221124/3162472f2cf54f1db3326267475f5fcc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ljc18wNDA1_size_16_color_FFFFFF_t_70 2]: /images/20221124/51a879692f9444a28494d143c38b94c1.png