Question

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

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

这应该将网页上主按钮的文本改为＆＃34; KIK IS ENABLED！＆＃34;如果该网站正在通过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!"
}

Answer 1

此： document.getElementById("main_button")

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

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

因此需要进行的查询是：page.querySelector("#main_button")。这是因为page元素可能没有附加到DOM，因此document.querySelector将无法找到它。

Answer 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!"
    }

}

Kik网站上未启用Kik

2 个答案: