### Handling Launch Errors and Events

Source: https://context7.com/syt-honey/h5-open-app/llms.txt

Illustrates how to listen for 'error' and 'launch' events on the openApp element. This is critical for implementing fallback logic, such as redirecting users to an app store if the app is not installed.

```javascript
const dom = await H5_APP({
  wechatConfig: { appId: "wx123", timestamp: 1609459200, nonceStr: "str", signature: "sig" },
  openTagConfig: { appid: "wxApp123", extinfo: "yt://page=home" }
});
if (dom !== -1) {
  dom.mount(document.getElementById("container"));
  dom.openApp.addEventListener("error", (e) => {
    const errorDetail = e.detail;
    console.error("唤起 App 失败:", JSON.stringify(errorDetail));
    const isIOS = /iPhone|iPad/i.test(navigator.userAgent);
    if (isIOS) {
      window.location.href = "https://apps.apple.com/app/id123456789";
    } else {
      window.location.href = "https://play.google.com/store/apps/details?id=com.example.app";
    }
  });
  dom.openApp.addEventListener("launch", (e) => {
    console.log("成功唤起 App");
  });
}
```

--------------------------------

### Vanilla JavaScript Integration

Source: https://github.com/syt-honey/h5-open-app/blob/main/README.md

Instructions and example code for integrating the h5-open-app library using Vanilla JavaScript.

```APIDOC
## Vanilla JavaScript Integration

### Description
Integrate the Whoa library into your H5 page using a script tag. This example demonstrates how to initialize and mount the app opening button.

### Method
Asynchronous function call

### Endpoint
N/A (Client-side script)

### Parameters
#### Request Body (Configuration Object)
- **openTagConfig** (object) - Required - Configuration for opening the app.
  - **appid** (string) - Required - The App ID, found on the WeChat Open Platform.
  - **extinfo** (string) - Required - Information for the page to open in the app (e.g., `yt://push.exclusive.co?page=xxx&params=xxx`).
- **wechatConfig** (object) - Required - WeChat authorization information.
  - **appId** (string) - Required - Public account ID.
  - **timestamp** (number) - Required - Timestamp for signature.
  - **nonceStr** (string) - Required - Nonce string for signature.
  - **signature** (string) - Required - Signature for WeChat authorization.
- **btnContainerStyle** (string) - Optional - CSS style for the button container.
- **btnStyle** (string) - Optional - CSS style for the button itself.
- **text** (string) - Optional - Text displayed on the button. Defaults to '打开APP'.
- **config** (object) - Optional - Library configuration.
  - **debug** (boolean) - Optional - Enable debug mode. Defaults to `false`.

### Request Example
```json
{
  "openTagConfig": {
    "appid": "YOUR_APP_ID",
    "extinfo": "your_app_scheme://path?param=value"
  },
  "wechatConfig": {
    "appId": "YOUR_WECHAT_APP_ID",
    "timestamp": 1678886400,
    "nonceStr": "random_string",
    "signature": "generated_signature"
  },
  "btnContainerStyle": "position: relative; width: 100px; height: 40px;",
  "btnStyle": "background-color: blue; color: white;",
  "text": "Open App",
  "config": {
    "debug": true
  }
}
```

### Response
#### Success Response (Mount Object)
- **mount** (function) - Function to mount the generated button to a DOM element.
- **openApp** (HTMLElement) - The generated button element, with an event listener for 'error'.

#### Response Example
```javascript
// Assuming 'dom' is the result of H5_APP call
dom.mount(document.getElementById('button-container'));
dom.openApp.addEventListener('error', (e) => {
  console.error('App opening failed:', e);
});
```
```

--------------------------------

### Whoa Configuration Object Structure

Source: https://context7.com/syt-honey/h5-open-app/llms.txt

Provides a comprehensive example of the configuration object required by the H5_APP function, detailing mandatory WeChat and App parameters as well as optional styling and debugging settings.

```javascript
const fullConfig = {
  wechatConfig: {
    appId: "wx1234567890",
    timestamp: 1609459200,
    nonceStr: "randomString",
    signature: "sha1Signature"
  },
  openTagConfig: {
    appid: "wxAppId123456",
    extinfo: "scheme://path?param=value"
  },
  btnContainerStyle: "border-radius: 8px; overflow: hidden;",
  btnStyle: "font-size: 16px; font-weight: 600; color: #ffffff; background: linear-gradient(90deg, #ff6b6b, #ff8e53);",
  text: "在 App 中查看",
  config: {
    debug: false
  }
};

const dom = await H5_APP(fullConfig);
```

--------------------------------

### Vue3 Component Integration

Source: https://github.com/syt-honey/h5-open-app/blob/main/README.md

Instructions and example code for integrating the h5-open-app library as a Vue3 component.

```APIDOC
## Vue3 Component Integration

### Description
Install the `@honeysyt/h5-open-app` package and use the provided Vue component to easily integrate the app opening functionality into your Vue 3 application.

### Method
Vue Component

### Endpoint
N/A (Client-side component)

### Parameters
#### Props
- **appConfig** (AppConfig) - Required - Configuration for opening the app.
  - **appid** (string) - Required - The App ID, found on the WeChat Open Platform.
  - **extinfo** (string) - Required - Information for the page to open in the app (e.g., `yt://push.exclusive.co?page=xxx&params=xxx`).
- **wechatConfig** (WechatConfig) - Required - WeChat authorization information.
  - **app_id** (string) - Required - Public account ID.
  - **timestamp** (string) - Required - Timestamp for signature.
  - **nonce_str** (string) - Required - Nonce string for signature.
  - **signature** (string) - Required - Signature for WeChat authorization.
- **text** (string) - Optional - Text displayed on the button. Defaults to '打开App'.
- **btnContainerStyle** (string) - Optional - CSS style for the button container.
- **btnStyle** (string) - Optional - CSS style for the button itself.

### Request Example
```vue
<template>
  <OpenAppButton
    :appConfig="myAppConfig"
    :wechatConfig="myWechatConfig"
    text="Launch App"
    btnStyle="background-color: green; color: white;"
  />
</template>

<script setup lang="ts">
import OpenAppButton from '@honeysyt/h5-open-app/dist/vue3'; // Adjust import path if necessary
import { ref } from 'vue';

const myAppConfig = ref({
  appid: 'YOUR_APP_ID',
  extinfo: 'your_app_scheme://path?param=value'
});

const myWechatConfig = ref({
  app_id: 'YOUR_WECHAT_APP_ID',
  timestamp: '1678886400',
  nonce_str: 'random_string',
  signature: 'generated_signature'
});
</script>
```

### Response
#### Success Response (Component Rendering)
- The component renders a button that, when clicked, attempts to open the specified application.

#### Response Example
```html
<!-- The rendered button will appear in the DOM -->
<div id="open-btn12345" class="open-app-btn" style="position: relative; font-size: 12px; background: #facd04; color: #111;">
  <!-- Button content generated by the library -->
</div>
```
```

--------------------------------

### Initialize Whoa in Vanilla JavaScript

Source: https://github.com/syt-honey/h5-open-app/blob/main/README.md

Demonstrates how to import the library and initialize the H5_APP function to generate and mount an app-launching button onto a specific DOM element.

```html
<script src="/path/whoa.min.js"></script>
```

```javascript
(async function e() {
  const { H5_APP } = Whoa;
  const container = document.getElementById("button");
  const dom = await H5_APP({
    openTagConfig: {
      appid: "",
      extinfo: ""
    },
    wechatConfig: {
      appId: "",
      timestamp: 0,
      nonceStr: "",
      signature: ""
    },
    config: {
      debug: true
    }
  });
  if (dom !== -1) {
    dom.mount(container);
    dom.openApp && dom.openApp.addEventListener("error", (e) => {
      console.log(e);
    });
  }
});
```

--------------------------------

### API Parameters Explanation

Source: https://github.com/syt-honey/h5-open-app/blob/main/README.md

Detailed explanation of the parameters available for configuring the app opening functionality.

```APIDOC
## API Parameters

### Description
This section details all the configuration parameters available for the `H5_APP` function and the Vue component props.

### Parameters Table

| Parameter Name | Sub-properties / Default Value |
|---|---|
| **wechatConfig** | `appId`, `timestamp`, `nonceStr`, `signature` <br> **Purpose**: Used for WeChat permission verification. <br> **Required**: Yes <br> **Docs**: [JS-SDK Documentation](https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html) |
| **openTagConfig** | `appid`: App's unique ID, found on the WeChat Open Platform. <br> `extinfo`: Page information. Typically a page path, e.g., `yt://push.exclusive.co?page=xxx&params=xxx`. <br> **Purpose**: Related information for the app to be invoked. <br> **Required**: Yes |
| **btnContainerStyle** | Default: `position: absolute;top: 0;left: 0;bottom: 0;right: 0;width: 100%;height: 100%;` <br> **Purpose**: Style for the button container. <br> **Required**: No |
| **btnStyle** | Default: `display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;color: #252525;outline: none;background: none;box-sizing: border-box;border-color: transparent;border: none;` <br> **Purpose**: Style for the button itself. <br> **Required**: No |
| **text** | Default: `打开APP` <br> **Purpose**: Text displayed on the button. <br> **Required**: No |
| **config** | `debug`: Whether to enable debugging. Boolean, defaults to `false`. <br> **Purpose**: Library configuration information. <br> **Required**: No |
```

--------------------------------

### Integrate Whoa in Vanilla HTML

Source: https://context7.com/syt-honey/h5-open-app/llms.txt

Shows how to include the Whoa library via a script tag in a standard HTML page. It initializes the library within an async IIFE and mounts the button to a specific DOM element.

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>微信 H5 唤起 App 示例</title>
</head>
<body>
  <div id="open-button">打开 App</div>

  <script src="./lib/whoa.min.js"></script>
  <script>
    (async function() {
      try {
        const { H5_APP } = Whoa;
        const container = document.getElementById("open-button");

        const dom = await H5_APP({
          wechatConfig: {
            appId: "your_wechat_app_id",
            timestamp: Date.now(),
            nonceStr: "your_nonce_str",
            signature: "your_signature"
          },
          openTagConfig: {
            appid: "your_target_app_id",
            extinfo: "scheme://path?param=value"
          },
          text: "立即打开",
          config: { debug: true }
        });

        if (dom !== -1) {
          dom.mount(container);
          dom.openApp.addEventListener("error", function(e) {
            alert("请先安装 App 后再试");
          });
        }
      } catch (e) {
        console.error(e);
      }
    })();
  </script>
</body>
</html>
```

--------------------------------

### Mounting the Launch Button

Source: https://context7.com/syt-honey/h5-open-app/llms.txt

Shows how to attach the generated launch button to a specific DOM element. The target container should have relative positioning to ensure the overlay button renders correctly.

```javascript
const container = document.getElementById("button-wrapper");
const dom = await H5_APP({
  wechatConfig: { appId: "wx123", timestamp: 1609459200, nonceStr: "str", signature: "sig" },
  openTagConfig: { appid: "wxApp123", extinfo: "page=detail&id=100" }
});
if (dom !== -1) {
  dom.mount(container);
}
```

--------------------------------

### Initialize H5_APP for WeChat App Launch

Source: https://context7.com/syt-honey/h5-open-app/llms.txt

Demonstrates the core H5_APP function to initialize the WeChat JS-SDK and create a launch button. It requires WeChat configuration and target app parameters, returning a mountable DOM object.

```javascript
(async function() {
  try {
    const { H5_APP } = Whoa;
    const container = document.getElementById("open-app-button");
    const dom = await H5_APP({
      wechatConfig: {
        appId: "wx1234567890abcdef",
        timestamp: 1609459200,
        nonceStr: "randomstr123",
        signature: "abc123def456..."
      },
      openTagConfig: {
        appid: "wx0987654321fedcba",
        extinfo: "yt://push.app?page=home&userId=12345"
      },
      btnContainerStyle: "border-radius: 8px;",
      btnStyle: "font-size: 14px; font-weight: bold; color: #ffffff; background: #07c160;",
      text: "立即打开",
      config: {
        debug: false
      }
    });
    if (dom !== -1) {
      dom.mount(container);
      dom.openApp && dom.openApp.addEventListener("error", (e) => {
        console.log("唤起失败:", e.detail);
        window.location.href = "https://example.com/download";
      });
    }
  } catch (error) {
    console.error("初始化失败:", error);
  }
})();
```

--------------------------------

### Integrate Whoa as a Vue3 Component

Source: https://context7.com/syt-honey/h5-open-app/llms.txt

Demonstrates how to wrap the Whoa library into a Vue3 component. It uses the onMounted lifecycle hook to initialize the open-app button and accepts configuration via props for custom styling and app parameters.

```vue
<template>
  <div :id="buttonId" class="open-app-btn" @click="handleFallback"></div>
</template>

<script setup lang="ts">
import { onMounted, computed } from "vue"
import Whoa from "@honeysyt/h5-open-app"

interface AppConfig {
  appid: string
  extinfo: string
}

interface WechatConfig {
  app_id: string
  timestamp: string
  nonce_str: string
  signature: string
}

const props = defineProps<{
  appConfig: AppConfig
  wechatConfig: WechatConfig
  text?: string
  btnContainerStyle?: string
  btnStyle?: string
}>()

const buttonId = "open-btn-" + Math.random().toString(36).slice(2)

const getText = computed(() => props.text || "打开App")
const getContainerStyle = computed(() => props.btnContainerStyle || "")
const getBtnStyle = computed(() =>
  props.btnStyle ||
  "padding: 5px 20px; width: 90px; height: 30px; line-height: 28px; font-size: 12px; background: #FACD04; border-radius: 16px;"
)

onMounted(async () => {
  try {
    const openBtn = document.getElementById(buttonId)
    const { app_id, timestamp, nonce_str, signature } = props.wechatConfig
    const { appid, extinfo } = props.appConfig

    const { H5_APP } = Whoa
    const dom = await H5_APP({
      wechatConfig: {
        appId: app_id,
        timestamp,
        nonceStr: nonce_str,
        signature
      },
      openTagConfig: { appid, extinfo },
      btnContainerStyle: getContainerStyle.value,
      btnStyle: getBtnStyle.value,
      text: getText.value
    })

    if (dom !== -1) {
      dom.mount(openBtn)
      dom.openApp?.addEventListener("error", () => handleFallback())
    }
  } catch (e) {
    console.error("初始化失败:", e)
  }
})

const handleFallback = () => {
  window.location.href = "https://example.com/download"
}
</script>

<style scoped>
.open-app-btn {
  position: relative;
  font-size: 12px;
  background: #facd04;
  color: #111;
}
</style>
```

--------------------------------

### Integrate Whoa with Vue 3

Source: https://github.com/syt-honey/h5-open-app/blob/main/README.md

Shows how to wrap the Whoa library into a Vue 3 component using the Composition API. It handles configuration via props and mounts the generated button on the component's root element.

```bash
yarn add @honeysyt/h5-open-app
```

```vue
<template>
  <div :id="getId" class="open-app-btn" @click="toDownload"></div>
</template>

<script setup lang="ts">
import { onMounted } from "vue"
import { computed } from "@vue/reactivity"
import Whoa from "@honeysyt/h5-open-app"

const getId = "open-btn" + Math.random() * 10
const props = defineProps<{ appConfig: any, wechatConfig: any, text?: string }>()

onMounted(() => {
  genBtn()
})

async function genBtn() {
  const openBtn = document.getElementById(getId)
  const { H5_APP } = Whoa
  const openBtnDom = await H5_APP({
    wechatConfig: props.wechatConfig,
    openTagConfig: props.appConfig
  })
  if (openBtnDom !== -1) {
    openBtnDom.mount(openBtn)
  }
}
</script>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.