Kik 网站上未启用 Kik答案

【问题标题】：Kik is not enabled on Kik siteKik 网站上未启用 Kik
【发布时间】：2015-04-18 13:37:33
【问题描述】：

我最近想测试 kik 网站开发。我分叉并克隆了 kik starter-kit repository。我按照设置，编写了这个简单的脚本（脚本在没有 if 语句的情况下运行良好）：

if (kik.enabled) {
    var div = document.getElementById("main_button");
    div.innerHTML = "KIK IS ENABLED!"
}

这应该将网页上主按钮的文本更改为“KIK 已启用！”如果该站点通过 kik 应用程序运行。我使用

在我的本地网络上启动调试服务器

npm start

我在手机上启动 kik，转到浏览器并连接到服务器。它连接正常并且网页显示，唯一的问题是按钮的文本没有改变，这表明即使我通过kik应用程序运行它也没有启用kik。

我不知道是什么原因造成的。网站是否需要在在线网络服务器上运行才能启用 kik？

这是应该相关的代码：

index.html

<!DOCTYPE html>
<html manifest="manifest.appcache">
    <head>
        <!-- App info -->
        <title>Starter Kit</title>
        <meta charset="utf-8">
        <meta name="description" content="My amazing app!">
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <meta name="kik-transparent-statusbar" content="black">
        <meta name="kik-hide-form-helpers" content="true">
        <link rel="kik-icon" href="/img/icon.png">

        <!-- Styles -->
        <link rel="stylesheet" href="//cdn.kik.com/app/3.0.1/app.min.css">
        <link rel="stylesheet" href="/css/styles.css">
        <link rel="stylesheet" href="/css/home.css">
        <link rel="stylesheet" href="/css/page2.css">
    </head>

    <body>
        <!-- Pages -->

        <div class="app-page home-page" data-page="home">
            <div class="app-topbar red">
                <div class="app-title">Home page</div>
            </div>
            <div class="app-content">
                <div class="app-section">
                    <div id="main_button" class="app-button" data-target="page2">Go to Page 2</div>
                </div>
            </div>
        </div>

        <div class="app-page page2-page" data-page="page2">
            <div class="app-topbar red">
                <div class="app-button left" data-back data-autotitle></div>
                <div class="app-title">Page 2</div>
            </div>
            <div class="app-content">
                Page 2 is lonely
            </div>
        </div>

        <!-- Scripts -->
        <script src="/zerver/API.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/zepto/1.1.3/zepto.min.js"></script>
        <script src="//cdn.kik.com/kik/1.0.22/kik.js"></script>
        <script src="//cdn.kik.com/app/3.0.1/app.min.js"></script>
        <script src="/controller/home.js"></script>
        <script src="/controller/page2.js"></script>
        <script src="/main.js"></script>
    </body>
</html>

home.js

if (kik.enabled) {
    var div = document.getElementById("main_button");
    div.innerHTML = "KIK IS ENABLED!"
}

【问题讨论】：

您的代码在某处可用吗？听起来那里可能有问题
是的，当然。我添加了我认为应该与原始问题相关的源代码。
home.js 是 App.controller 中的东西吗？这可能是问题
我现在加了App.controller，还是不行。

标签： kik

【解决方案1】：

这个： document.getElementById("main_button")

应该是：page.querySelector("#main_button")

App.js 在创建新页面供用户导航时使用文档中的 HTML 页面作为模板。 home.js 中的控制器应该是一种自给自足的方式来设置和运行页面。

所以需要发生的查询是：page.querySelector("#main_button")。这是因为 page 元素可能尚未附加到 DOM，因此 document.querySelector 将无法找到它。

【讨论】：

【解决方案2】：

这仍然是个问题吗？

我不知道 home.js 是否在做其他事情，但我建议尝试将它放在一些现成的闭包中。要么是 JQuery 的 $(function(){})，要么是 kik.ready

例子：

home.js

kik.ready(function() {

    if (kik.enabled) {
        var div = document.getElementById("main_button");
        div.innerHTML = "KIK IS ENABLED!"
    }

}

【讨论】：