smartbanner.js 适用于 iOS 和 Android 的可定制智能应用横幅(smart app banner)。简单易用，不依赖任何框架，怎么使用官方文档也写的很清楚，我就不过多介绍。
基本用法
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!-- Start SmartBanner configuration --> <meta name="smartbanner:title" content="Smart Application"> <meta name="smartbanner:author" content="SmartBanner Contributors"> <meta name="smartbanner:price" content="FREE"> <meta name="smartbanner:price-suffix-apple" content=" - On the App Store"> <meta name="smartbanner:price-suffix-google" content=" - In Google Play"> <meta name="smartbanner:icon-apple" content="https://url/to/apple-store-icon.png"> <meta name="smartbanner:icon-google" content="https://url/to/google-play-icon.png"> <meta name="smartbanner:button" content="VIEW"> <meta name="smartbanner:button-url-apple" content="https://ios/application-url"> <meta name="smartbanner:button-url-google" content="https://android/application-url"> <meta name="smartbanner:enabled-platforms" content="android,ios"> <meta name="smartbanner:close-label" content="Close"> <!-- End SmartBanner configuration --> |
引用 JavaScript 和 CSS：
|
1 2 |
<link rel="stylesheet" href="node_modules/smartbanner.js/dist/smartbanner.min.css" rel="external nofollow" > <script src="node_modules/smartbanner.js/dist/smartbanner.min.js"></script> |
高级用法
如何根据系统语言动态修改横幅文案
其实就是通过js去修改meta
|
1 2 3 4 5 |
if (navigator.language?.includes("zh")) { document .querySelector('meta[name="smartbanner:button"]') .setAttribute("content", "查看"); } |
如何自己处理点击按钮事件
需要先移除对应的meta，禁用按钮点击事件
|
1 2 |
<!-- <meta name="smartbanner:button-url-apple" content="https://ios/application-url"> <meta name="smartbanner:button-url-google" content="https://android/application-url"> --> |
|
1 2 3 4 5 6 7 |
document.addEventListener("smartbanner.view", () => { document.querySelector(".js_smartbanner__button").onclick = () => false; }); document.addEventListener("smartbanner.clickout", () => { // 在这里做其它操作，比如手动关闭横幅 smartbanner.exit(); }); |
如何在微信浏览器内不显示横幅
先新增meta禁用自动添加到DOM，再调用api手动添加到DOM。判断微信浏览器的代码我就不贴出来了。
|
1 |
<meta name="smartbanner:api" content="true"> |
|
1 2 3 4 5 6 7 |
const apiHandler = () => { if (is_weixn()) return; setTimeout(() => { if (smartbanner) smartbanner.publish(); }, 500); }; window.onload = apiHandler; |
