1

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

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

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

npm start

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

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

这是应该相关的代码：

索引.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>

主页.js

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

2 回答 2

1

这个： document.getElementById("main_button")

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

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

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

于 2015-04-13T13:27:20.540 回答
0

这仍然是一个问题吗？

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

例子：

主页.js

kik.ready(function() {

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

}
于 2015-03-08T15:18:23.863 回答