PhoneGap listview格式

时间:2017-09-07 19:40:38

标签: jquery cordova listview webstorm phonegap

虽然我非常精通HTML,CSS和jQuery,但我对PhoneGap相对较新。使用WebStorm默认

执行测试列表视图程序
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />

    <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: 'unsafe-inline' https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; media-src *" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <title>Hello World</title>
</head>

<body>
<div id="home" data-role="page">
    <div data-role="content">
        <ul data-role="listview" data-inset="true">
            <li><a id="one" href="#one">one</a></li>
            <li><a id="two" href="#two">two</a></li>
        </ul>
    </div>
</div>
    <div class="app">
        <h1>PhoneGap</h1>

        <div id="deviceready" class="blink">
            <p class="event listening">Connecting to Device</p>
            <p class="event received">Device is Ready</p>
        </div>
    </div>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript">
        app.initialize();
    </script>
</body>

</html>

返回一个简单的列表视图,但没有正确的格式,蓝色锚点和项目符号可见。评论<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: 'unsafe-inline' https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; media-src *" />通过反复试验解决了问题,但我不知道为什么。

这是在PhoneGap / Cordova中获取列表视图的正确方法吗?

1 个答案:

答案 0 :(得分:3)

没有“正确”的方式来显示PhoneGap / Cordova的东西,所以你做的很好。您只需按照构建Web应用程序的方式执行此操作。

与PhoneGap / Cordova的不同之处在于,您的JavaScript代码基本上是作为应用程序运行的,并且可能访问浏览器中的网站所没有的系统资源。因此,作为开发人员,您应该特别注意加载和执行的远程脚本。

这是Content-Security-Policy标记的来源。它基本上将允许加载的内容列入白名单,并且不允许所有JQuery内容,这就是为什么它只在删除标记时才有效。