引言
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; |
以上就是smartbanner.js实现可定制智能应用横幅使用示例的详细内容,更多关于smartbanner.js可定制智能横幅的资料请关注服务器之家其它相关文章!
原文链接:https://juejin.cn/post/7205782964768473125