最近由于公司业务发展,有很多地方都涉及到了需要在微信的 H5 中唤起 App。Github 搜了一圈也没有找到合适的库。于是为了方便,写了一个库,方便使用,希望也能帮助到大家。
一、效果
在微信中,并且微信鉴权成功则显示唤起按钮:
二、使用思路
在不需要唤起的场景下显示“下载 APP”按钮,而在需要唤起的场景下就去调用该库生成唤起按钮,并且将其覆盖在原按钮上。
调用步骤如下:
- 安装/下载依赖包
- 获取需要被覆盖的按钮元素
- 将所需参数传入
H5_APP
中 - 如果返回值不为 -1
- 将返回的元素挂载在指定元素上
- 监听元素 B 的 error (可选)
三、开始使用
(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
- 方式一:
- 使用
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 | 子属性/默认值 | 用途 | 是否必填 | 文档 |
---|---|---|---|---|
wechatConfig | appId、timestamp、nonceStr、signature | 用于微信权限验证 | 是 | JS-SDK 说明文档 |
openTagConfig | appid:App 唯一 Id,可在微信开放平台查看 extinfo:页面信息。通常为页面路径,如: yt://push.exclusive.co?page=xxx¶ms=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 | 按钮文字 | 否 | 无 |
config | debug: 是否开启调试。Boolean,默认 false | 库配置信息 | 否 | 无 |
五、提示
- 实现的基本逻辑是:生成唤起按钮,然后直接将其挂载在父元素上(生成一个按钮,覆盖在指定元素上)。基于这个逻辑,那么就需要实现者自己判断什么时候显示该组件。
- 唤起按钮的样式、文本等可以根据暴露的接口自定义
- 按钮生成失败时的回调可以自定义内容
六、注意事项
- 在开始之前,先确保已经按照文档准备好了配置信息。可以参考:解读微信内网页跳转到APP方法,使用微信开放标签
- 如果要覆盖父级容器的样式,需要显示的设置定位方式。如设置
position: relative;
基于框架的使用方式暂未测试(已测试通过)
项目地址:h5-open-app
如果有问题,欢迎提 issue !