parent
aefffa2e6c
commit
73b156b488
@ -0,0 +1,165 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>淘宝 App 唤起测试</title>
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
color: #17212b;
|
||||
background: #f6f8fb;
|
||||
}
|
||||
|
||||
main {
|
||||
width: min(720px, 100%);
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0 0 10px;
|
||||
font-size: 24px;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 16px;
|
||||
color: #52616f;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
section {
|
||||
margin: 16px 0;
|
||||
padding: 16px;
|
||||
border: 1px solid #dce4ec;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0 0 12px;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
a,
|
||||
button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: 10px 0;
|
||||
padding: 13px 14px;
|
||||
border: 1px solid #d75b1f;
|
||||
border-radius: 6px;
|
||||
color: #fff;
|
||||
background: #f26a21;
|
||||
font: inherit;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
button.secondary,
|
||||
a.secondary {
|
||||
border-color: #bac7d5;
|
||||
color: #17212b;
|
||||
background: #eef3f8;
|
||||
}
|
||||
|
||||
code {
|
||||
display: block;
|
||||
margin-top: 8px;
|
||||
padding: 10px;
|
||||
overflow-wrap: anywhere;
|
||||
border-radius: 6px;
|
||||
background: #eef3f8;
|
||||
color: #243241;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.note {
|
||||
padding: 12px;
|
||||
border-left: 4px solid #f26a21;
|
||||
border-radius: 6px;
|
||||
background: #fff3ea;
|
||||
color: #6a371f;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>淘宝 App 唤起测试</h1>
|
||||
<p class="note">不要把 taobao:// 或 tbopen:// 直接粘到地址栏测试。请用手机浏览器打开这个 HTML 页面，然后点下面的按钮。</p>
|
||||
|
||||
<section>
|
||||
<h2>基础 scheme</h2>
|
||||
<a href="taobao://m.taobao.com/">打开淘宝 taobao://</a>
|
||||
<code>taobao://m.taobao.com/</code>
|
||||
|
||||
<a href="tbopen://m.taobao.com/">打开淘宝 tbopen://</a>
|
||||
<code>tbopen://m.taobao.com/</code>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Android Chrome intent</h2>
|
||||
<a href="intent://m.taobao.com/#Intent;scheme=tbopen;package=com.taobao.taobao;S.browser_fallback_url=https%3A%2F%2Fm.taobao.com%2F;end">Android Chrome 打开淘宝</a>
|
||||
<code>intent://m.taobao.com/#Intent;scheme=tbopen;package=com.taobao.taobao;S.browser_fallback_url=https%3A%2F%2Fm.taobao.com%2F;end</code>
|
||||
|
||||
<a href="intent://m.taobao.com/#Intent;scheme=taobao;package=com.taobao.taobao;S.browser_fallback_url=https%3A%2F%2Fm.taobao.com%2F;end">Android Chrome taobao scheme 变体</a>
|
||||
<code>intent://m.taobao.com/#Intent;scheme=taobao;package=com.taobao.taobao;S.browser_fallback_url=https%3A%2F%2Fm.taobao.com%2F;end</code>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>淘宝 H5 包装</h2>
|
||||
<a href="tbopen://m.taobao.com/tbopen/index.html?h5Url=https%3A%2F%2Fm.taobao.com%2F">tbopen 打开淘宝 H5</a>
|
||||
<code>tbopen://m.taobao.com/tbopen/index.html?h5Url=https%3A%2F%2Fm.taobao.com%2F</code>
|
||||
|
||||
<a href="taobao://m.taobao.com/tbopen/index.html?h5Url=https%3A%2F%2Fm.taobao.com%2F">taobao 打开淘宝 H5</a>
|
||||
<code>taobao://m.taobao.com/tbopen/index.html?h5Url=https%3A%2F%2Fm.taobao.com%2F</code>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>常见页面</h2>
|
||||
<a href="taobao://cart.taobao.com/my_cart.htm">打开购物车</a>
|
||||
<code>taobao://cart.taobao.com/my_cart.htm</code>
|
||||
|
||||
<a href="taobao://my.m.taobao.com/myTaobao.htm">打开我的淘宝</a>
|
||||
<code>taobao://my.m.taobao.com/myTaobao.htm</code>
|
||||
|
||||
<a href="taobao://s.taobao.com/search?q=手机">搜索“手机”</a>
|
||||
<code>taobao://s.taobao.com/search?q=手机</code>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>JS 按钮</h2>
|
||||
<button id="openTaobao">按系统自动选择打开方式</button>
|
||||
<button class="secondary" id="openFallback">打开兜底网页</button>
|
||||
<code>Android 优先 intent://，其他系统尝试 tbopen://。失败时手动点兜底网页。</code>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
const fallbackUrl = "https://m.taobao.com/";
|
||||
const androidIntent = "intent://m.taobao.com/#Intent;scheme=tbopen;package=com.taobao.taobao;S.browser_fallback_url=https%3A%2F%2Fm.taobao.com%2F;end";
|
||||
const tbopenUrl = "tbopen://m.taobao.com/";
|
||||
|
||||
document.getElementById("openTaobao").addEventListener("click", () => {
|
||||
if (/Android/i.test(navigator.userAgent)) {
|
||||
location.href = androidIntent;
|
||||
return;
|
||||
}
|
||||
|
||||
location.href = tbopenUrl;
|
||||
});
|
||||
|
||||
document.getElementById("openFallback").addEventListener("click", () => {
|
||||
location.href = fallbackUrl;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in new issue