@honeysyt/h5-open-app v1.0.6

Whoa

Whoa(Open App In WeChat H5)，微信 H5 唤起 App 解决方案

使用

Vanilla JavaScript

  <!-- 将文件下载到本地，然后配好路径 -->
  <script src="/path/whoa.min.js"></script>

  (async function e() {
    const { H5_APP } = Whoa;
    const container = document.getElementById("button");

    const dom = await H5_APP({
      // 需要唤起的 app 信息
      openTagConfig: {
        appid: "", // appid，可在微信开放平台查看
        extinfo: "" // 唤起页面信息
      },
      // 后端返回的鉴权信息
      wechatConfig: {
        appId: "", // 公众号 id
        timestamp: 0,
        nonceStr: "",
        signature: ""
      },
      // 默认样式：https://github.com/syt-honey/h5-open-app/blob/main/core.js
      btnContainerStyle: "", // 按钮容器样式
      btnStyle: "", // 按钮样式
      text: "", // 按钮文本。默认为：打开APP
      // 开启调试
      config: {
        debug: true
      }
    });

    if (dom !== -1) {
      alert('dom create success...');
      dom.mount(container);

      // 唤起失败时的错误处理逻辑
      dom.openApp && dom.openApp.addEventListener("error", (e) => {
        console.log(e);
      });
    }
  });

框架

  yarn add @honeysyt/h5-open-app

  // main.js
  import Whoa from "@honeysyt/h5-open-app";

  const { H5_APP } = Whoa;
  const container = document.getElementById("button");

  const dom = await H5_APP({
    // 需要唤起的 app 信息
    openTagConfig: {
      appid: "", // appid，可在微信开放平台查看
      extinfo: "" // 唤起页面信息
    },
    // 后端返回的鉴权信息
    wechatConfig: {
      appId: "", // 公众号 id
      timestamp: 0,
      nonceStr: "",
      signature: ""
    },
    // 默认样式：https://github.com/syt-honey/h5-open-app/blob/main/core.js
    btnContainerStyle: "", // 按钮容器样式
    btnStyle: "", // 按钮样式
    text: "", // 按钮文本。默认为：打开APP
    // 开启调试
    config: {
      debug: true
    }
  });

  if (dom !== -1) {
    alert('dom create success...');
    dom.mount(container);

    // 唤起失败时的错误处理逻辑
    dom.openApp && dom.openApp.addEventListener("error", (e) => {
      console.log(e);
    });
  }

注意事项

• 在开始之前，先确保已经按照文档准备好了配置信息。可以参考：解读微信内网页跳转到APP方法，使用微信开放标签
• 父级容器（如上面的 container）需要显示的设置定位方式。如设置 position: relative;
• 可以通过添加 config 参数设置是否进行 debug
• 基于框架的使用方式暂未测试