Package Exports

@honeysyt/h5-open-app
@honeysyt/h5-open-app/lib/whoa.esm.js
@honeysyt/h5-open-app/lib/whoa.min.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@honeysyt/h5-open-app) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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
基于框架的使用方式暂未测试