You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
166 lines
4.7 KiB
166 lines
4.7 KiB
<!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>
|