使用(或不使用)jQuery在你的网站中实现智能应用横幅

本文概述

• 1.使用SmartApp标语
• 2.使用jquery.smartbanner
• 3.使用CSS和jQuery自行实现的横幅

智能标语是一个有用的元素, 应该在每个具有移动应用程序的网站上显示, 以鼓励和鼓励应用程序的下载(和使用), 而不是使用网站。尽管此标语应鼓励使用该应用程序, 但这并不意味着你作为开发人员会忽略或放弃你的网站与移动设备的响应能力和兼容性！标语的使用仅是为了推广你的应用程序, 而绝不应像”下载我们的应用程序, 我们的网站在移动设备上无法正常工作”之类的信息。

在本文中, 你将学习如何在网站上实现此功能, 以防你有自己的网站应用程序, 使用插件, 甚至使用标记, 一些CSS和VanillaJS(或jQuery)自己实现横幅。

1.使用SmartApp标语

我们认为, 最有用, 易于使用和实现的插件可以创建横幅广告, 以在你的网站中推广你的移动应用程序。 SmartApp标语是没有jQuery(或任何其他框架)要求的轻量级智能应用标语。易于实施, 并且具有非常可接受的设计(易于定制)。

该插件将自动检查是否是移动设备, 并在适用时显示横幅。

你可以通过从官方github仓库下载.zip文件来获取插件, 也可以使用npm install –save smart-app-banner从npm安装软件包。

以下代码包含可用于插件和初始化方式的所有选项。在文档中添加css和js文件：

<!-- Style -->
<link rel="stylesheet" href="smart-app-banner.css" type="text/css" media="screen">
<!-- Smart Banner Plugin -->
<script src="smart-app-banner.js"></script>

请注意, URL是由插件生成的(如果你在读取源代码的情况下可以更改URL, 以防某些生成URL不能正常工作), 因此你需要在元数据中提供应用ID在文档中分别为每个平台标记：

<!-- App store -->
<meta name="apple-itunes-app" content="app-id=<id-of-your-app>">
<!-- Play Store -->
<meta name="google-play-app" content="app-id=<id.of.your.app>">
<!-- Windows App Store -->
<meta name="msApplication-ID" content="app-id=<id-of-your-app>">

和初始化：

// Initialize Banner
new SmartBanner({
    daysHidden: 15, // days to hide banner after close button is clicked (defaults to 15)
    daysReminder: 90, // days to hide banner after "VIEW" button is clicked (defaults to 90)
    appStoreLanguage: 'us', // language code for the App Store (defaults to user's browser language)
    title: 'Our Code Editor', author: 'Our Code World', button: 'Download', store: {
        ios: 'On the App Store', android: 'In Google Play', windows: 'In Windows store'
    }, price: {
        ios: 'FREE', android: 'FREE', windows: 'FREE'
    }, force:'ios', // Add an icon (in this example the icon of Our Code Editor)
    icon: "https://lh3.googleusercontent.com/yyEmckv5badLAHiu8y5rH1ieZNqxeuZOaWPZoj7o3yHujtNWffzZFLeXdOHJ3q2HrIA=w300-rw", //theme: '', // put platform type ('ios', 'android', etc.) here to force single theme on all device
    //icon: '', // full path to icon image if not using website icon image
    //force: 'windows' // Uncomment for platform emulation
});

每个平台上的横幅应如下所示：

2.使用jquery.smartbanner

智能横幅用于在网站上的所有应用程序商店中推广应用程序。这个jQuery插件将此功能引入了iOS, Android设备和Windows Store应用。

注意：jQuery Smart Banner目前尚未得到积极维护, 但可以正常使用, 你可以使用它并自行修改, 以备不时之需。

<meta name="apple-itunes-app" content="app-id=<id-of-your-app>">
<!-- Play Store -->
<meta name="google-play-app" content="app-id=<id.of.your.app>">
<!-- Windows App Store -->
<meta name="msApplication-ID" content="app-id=<id-of-your-app>">
<!-- Add jQuery -->
<script src="http://code.jquery.com/jquery-2.2.4.min.js"   integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

<!-- Add the required scripts -->
<link rel="stylesheet" href="/resources/jquery.smartbanner.css" type="text/css" media="screen">
<script src="/resources/jquery.smartbanner.js"></script>
<!-- Start smartbanner -->
<script type="text/javascript">
$(function () {
    $.smartbanner({
        title: "Our Code Editor Free", // What the title of the app should be in the banner (defaults to <title>)
        author: null, // What the author of the app should be in the banner (defaults to <meta name="author"> or hostname)
        price: 'FREE', // Price of the app
        appStoreLanguage: 'us', // Language code for App Store
        inAppStore: 'On the App Store', // Text of price for iOS
        inGooglePlay: 'In Google Play', // Text of price for Android
        inAmazonAppStore: 'In the Amazon Appstore', inWindowsStore: 'In the Windows Store', // Text of price for Windows
        GooglePlayParams: null, // Aditional parameters for the market
        icon: null, // The URL of the icon (defaults to <meta name="apple-touch-icon">)
        iconGloss: null, // Force gloss effect for iOS even for precomposed
        url: null, // The URL for the button. Keep null if you want the button to link to the app store.
        button: 'VIEW', // Text for the install button
        scale: 'auto', // Scale based on viewport size (set to 1 to disable)
        speedIn: 300, // Show animation speed of the banner
        speedOut: 400, // Close animation speed of the banner
        daysHidden: 15, // Duration to hide the banner after being closed (0 = always show banner)
        daysReminder: 90, // Duration to hide the banner after "VIEW" is clicked *separate from when the close button is clicked* (0 = always show banner)
        force: null, // Choose 'ios', 'android' or 'windows'. Don't do a browser check, just always show this banner
        hideOnInstall: true, // Hide the banner after "VIEW" is clicked.
        layer: false, // Display as overlay layer or slide down the page
        iOSUniversalApp: true, // If the iOS App is a universal app for both iPad and iPhone, display Smart Banner to iPad users, too.      
        appendToSelector: 'body', //Append the banner to a specific selector
        onInstall: function () {
            // alert('Click install');
        }, onClose: function () {
            // alert('Click close');
        }
    });
});
</script>

与第一个插件相同, 你需要在每个商店中添加带有应用程序ID的meta标签。样式与第一个插件的标语相似(几乎相同)(因为第一个插件基于此)：

3.使用CSS和jQuery自行实现的横幅

你甚至可以创建自己的横幅, 而无需依赖任何插件。要获得这样的促销标语：

你可以在项目中看到使用一些标记, CSS和jQuery的出色实现。请注意, 以下示例基于此存储库的代码。

标记如下：

<div class="smartbanner" id="smartabanner">
    <div class="smartbanner-container">
        <a href="#" id="smb-close" class="smartbanner-close">&times;</a>
        <span class="smartbanner-icon"></span>
        <div class="smartbanner-info">
            <div class="smartbanner-title">Our Code Editor</div>
            <div>Our Code World</div>
            <span>Free &ndash; Google Play</span>
        </div>
        <a href="https://play.google.com/store/apps/details?id=com.ourcodeworld.ourcodeeditorfree" target="_blank" class="smartbanner-button">
            <span class="smartbanner-button-text">Get it</span>
        </a>
    </div>
</div>

CSS将是(请记住更改图标源)：

.smartbanner {
    left:0;top:0;
    width:100%;
    height:78px;
    font-family: "Helvetica Neue", helvetica, arial, sans-serif;
    background:#fff;
    overflow:hidden;
    border-bottom: 1px solid #ccc;
    margin-bottom: 10px;
    -webkit-font-smoothing:antialiased;
    -webkit-text-size-adjust:none;
}
.smartbanner-container {
    margin:0 auto;
}
.smartbanner-close {
    position:absolute;
    left:7px;top:7px;
    display:block;
    font-family:'ArialRoundedMTBold', Arial;
    font-size:15px;
    text-align:center;
    text-decoration:none;
    border-radius:14px;
    -webkit-font-smoothing:subpixel-antialiased;
    border:0;
    width:17px;
    height:17px;
    line-height:17px;
    color:#b1b1b3;
    background:#efefef;
}
.smartbanner-close:active, .smartbanner-close:hover {
    color:#333;
}
.smartbanner-icon{
    position:absolute;
    left:30px;
    top:10px;
    display:block;
    width:57px;
    height:57px;
    background-color: #fff;
    background-size:cover;
    background-image: url("https://lh3.googleusercontent.com/yyEmckv5badLAHiu8y5rH1ieZNqxeuZOaWPZoj7o3yHujtNWffzZFLeXdOHJ3q2HrIA=w300-rw");
}
.smartbanner-info{
    position:absolute;
    left:98px;
    top:15px;
    width:44%;
    font-size:12px;
    line-height:1.2em;
    font-weight:bold;
    color:#999;
}
.smartbanner-title {
    font-size:15px;
    line-height:17px;
    color:#000;
    font-weight:bold;
}
.smartbanner-button{
    position:absolute;
    right:20px;
    top:24px;
    border-bottom:3px solid #b3c833;
    padding:0 10px;
    min-width:12%;
    height:24px;
    font-size:14px;
    line-height:24px;
    text-align:center;
    font-weight:bold;
    color:#fff;
    background-color:#b3c833;
    text-decoration:none;
    border-radius:5px;
}
.smartbanner-button:hover {
    background-color: #c1d739;
    border-bottom:3px solid #8c9c29;
}
.smartbanner-button-text {
    text-align:center;
    display:block;
    padding:0 5px;
}

你可以添加一些JS来处理诸如close banner事件之类的简单操作：

$(function(){
    // Hide banner
    $('#smb-close').click(function(){
        $('#smartabanner').slideUp();
        /// Or 
        //$('#smartabanner').fadeOut(500);
    });
});

根据平台等, 何时显示横幅取决于你是否使用javascript过滤。

作为Web开发中的每一项任务, 你都需要自定义所有内容以适合你的需求, 然后就可以开始玩乐了！