微信H5唤起App解决方案

4,706 阅读3分钟

最近由于公司业务发展,有很多地方都涉及到了需要在微信的 H5 中唤起 App。Github 搜了一圈也没有找到合适的库。于是为了方便,写了一个库,方便使用,希望也能帮助到大家。

一、效果

在微信中,并且微信鉴权成功则显示唤起按钮:

image.png

二、使用思路

在不需要唤起的场景下显示“下载 APP”按钮,而在需要唤起的场景下就去调用该库生成唤起按钮,并且将其覆盖在原按钮上。

调用步骤如下:

  1. 安装/下载依赖包
  2. 获取需要被覆盖的按钮元素
  3. 将所需参数传入 H5_APP
  4. 如果返回值不为 -1
    • 将返回的元素挂载在指定元素上
    • 监听元素 B 的 error (可选)

三、开始使用

(1)原生方式

  1. 引入/安装
    • 方式一:
        <!-- 将文件下载到本地,然后配好路径。源文件:https://github.com/syt-honey/h5-open-app/blob/main/lib/whoa.min.js -->
        <script src="/path/whoa.min.js"></script>
      
    • 方式二:
        yarn add @honeysyt/h5-open-app
      
  2. 使用
    const { H5_APP } = Whoa;
    
    // 被覆盖的按钮
    const container = document.getElementById("button");
    
    // 生成 wx-open-launch-app
    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
      }
    });
    
    // 如果配置没有出错,则将 wx-open-launch-app 塞入容器中显示
    if (dom !== -1) {
      alert('dom create success...');
      dom.mount(container);
    
      // 唤起失败时的错误处理逻辑
      dom.openApp && dom.openApp.addEventListener("error", (e) => {
        console.log(e);
      });
    }
    

(2)Vue3+TS

  yarn add @honeysyt/h5-open-app
<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"

export interface AppConfig {
  appid: string
  extinfo: string
}

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

// 为每个组件生成不同的 id
const getId = "open-btn" + Math.random() * 10

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

const getAppConfig = computed(() => {
  return props.appConfig
})

const getWechatConfig = computed(() => {
  return props.wechatConfig
})

const getText = computed(() => {
  return props.text || "打开App"
})

const getContainerStyle = computed(() => {
  return props.btnContainerStyle || ""
})

const getBtnStyle = computed(() => {
  return (
    props.btnStyle ||
    "padding: 5px 20px;width: 90px;height: 30px;line-height: 28px;font-size: 12px;background: #FACD04;border-radius: 16px;"
  )
})

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

async function genBtn() {
  try {
    const openBtn = document.getElementById(getId)

    const { app_id, timestamp, nonce_str, signature } = getWechatConfig.value
    const { appid, extinfo } = getAppConfig.value

    const params = {
      wechatConfig: {
        appId: app_id,
        timestamp,
        nonceStr: nonce_str,
        signature,
      },
      openTagConfig: {
        appid,
        extinfo,
      },
      btnContainerStyle: getContainerStyle.value,
      btnStyle: getBtnStyle.value,
      text: getText.value,
    }

    const { H5_APP } = Whoa

    const openBtnDom = await H5_APP(params)

    if (openBtnDom !== -1) {
      openBtnDom.mount(openBtn)
      openBtnDom.openApp &&
        openBtnDom.openApp.addEventListener("error", () => {
          toDownload()
        })
    }
  } catch (e) {
    console.log(e)
  }
}

const toDownload = () => {
  // to download page
}
</script>

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

四、API 说明

API子属性/默认值用途是否必填文档
wechatConfigappId、timestamp、nonceStr、signature用于微信权限验证JS-SDK 说明文档
openTagConfigappid:App 唯一 Id,可在微信开放平台查看
extinfo:页面信息。通常为页面路径,如: yt://push.exclusive.co?page=xxx&params=xxx
被唤起的 APP 的相关信息
btnContainerStyle默认值:position: absolute;top: 0;left: 0;bottom: 0;right: 0;width: 100%;height: 100%;按钮容器样式
btnStyle默认值: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;按钮样式
text默认值:打开APP按钮文字
configdebug: 是否开启调试。Boolean,默认 false库配置信息

五、提示

  • 实现的基本逻辑是:生成唤起按钮,然后直接将其挂载在父元素上(生成一个按钮,覆盖在指定元素上)。基于这个逻辑,那么就需要实现者自己判断什么时候显示该组件。
  • 唤起按钮的样式、文本等可以根据暴露的接口自定义
  • 按钮生成失败时的回调可以自定义内容

六、注意事项


项目地址:h5-open-app
如果有问题,欢迎提 issue