这篇“smartbanner.js如何实现可定制智能应用横幅使用”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“smartbanner.js如何实现可定制智能应用横幅使用”文章吧。
引言
smartbanner.js 适用于 iOS 和 Android 的可定制智能应用横幅(smart app banner)。
基本用法
<!-- 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://cache.yisu.com/upload/information/20230302/112/25578.png"> <Meta name="smartbanner:icon-google" content="https://cache.yisu.com/upload/information/20230302/112/25579.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:
<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>
高级用法
如何根据系统语言动态修改横幅文案
if (navigator.language?.includes("zh")) { document .querySelector('Meta[name="smartbanner:button"]') .setAttribute("content", "查看"); }
如何自己处理点击按钮事件
需要先移除对应的Meta,禁用按钮点击事件
<!-- <Meta name="smartbanner:button-url-apple" content="https://ios/application-url"> <Meta name="smartbanner:button-url-google" content="https://android/application-url"> -->
document.addEventListener("smartbanner.view", () => { document.querySelector(".js_smartbanner__button").onclick = () => false; }); document.addEventListener("smartbanner.clickout", () => { // 在这里做其它操作,比如手动关闭横幅 smartbanner.exit(); });
如何在微信浏览器内不显示横幅
先新增Meta禁用自动添加到DOM,再调用api手动添加到DOM。判断微信浏览器的代码我就不贴出来了。
<Meta name="smartbanner:api" content="true">
const apiHandler = () => { if (is_weixn()) return; setTimeout(() => { if (smartbanner) smartbanner.publish(); }, 500); }; window.onload = apiHandler;
以上就是关于“smartbanner.js如何实现可定制智能应用横幅使用”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注编程之家行业资讯频道。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。