2016-02-11 64 views
0

我正在制作一个查找餐馆的应用程序,并且它在PhoneGap Desktop中完美地工作,但是当我使用PhoneGap构建将其打包到apk中时,jQuery将无法加载,而我得到一个完整的可滚动页面,而不是单独的jQuery页面。这可能是白名单的一个问题,但我已经改变了东西,没有喜悦。由于知识产权等原因,我无法链接太多的内容,但它是一个通用的jQuery Mobile结构。我如何正确加载jQuery?PhoneGap Build不会加载jQuery

的index.html

<html> 
    <head> 
     <title>Vegging Out</title> 
     <meta charset="utf-8"/> 
     <meta name="viewport" content="width=device-width, initial-scale=1"/> 
     <link rel="stylesheet" href="css/fooStyle.css"/> 
     <link rel="stylesheet" href="css/jquery.mobile.icons.min.css"/> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css"/> 
     <script src="js/jquery-2.2.0.min.js"></script> 
     <!--<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>--> 
     <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
     <script src="phonegap.js"></script> 
    </head> 
    <body> 
     jQuery Mobile pages 
     <script src="js/restaurantDatabase.js"></script> 
    </body> 
</html> 

config.xml中

<?xml version="1.0" encoding="UTF-8"?> 

<!-- config.xml reference: https://build.phonegap.com/docs/config-xml --> 
<widget xmlns  = "http://www.w3.org/ns/widgets" 
     xmlns:gap = "http://phonegap.com/ns/1.0" 
     id  = "com.phonegap.helloworld" 
     version = "1.0.0"> 

    <name>Vegging Out</name> 

    <description> 
     Vegging Out 
    </description> 

    <author href="http://phonegap.com" email="[email protected]"> 
     Tanya Branagan 
    </author> 
    <!-- PhoneGap person said to add CSP --> 
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; media-src *"> 
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' code.jquery.com"> 

    <!-- 
     If you do not want any permissions to be added to your app, add the 
     following tag to your config.xml; you will still have the INTERNET 
     permission on your app, which PhoneGap requires. 
    --> 
    <preference name="permissions"    value="none"/> 

    <!-- Customize your app and platform with the preference element. --> 
    <preference name="orientation"    value="default" />  <!-- all: default means both landscape and portrait are enabled --> 
    <preference name="target-device"    value="universal" />  <!-- all: possible values handset, tablet, or universal --> 
    <preference name="fullscreen"     value="true" />   <!-- all: hides the status bar at the top of the screen --> 
    <preference name="webviewbounce"    value="true" />   <!-- ios: control whether the screen 'bounces' when scrolled beyond the top --> 
    <preference name="prerendered-icon"   value="true" />   <!-- ios: if icon is prerendered, iOS will not apply it's gloss to the app's icon on the user's home screen --> 
    <preference name="stay-in-webview"   value="false" />   <!-- ios: external links should open in the default browser, 'true' would use the webview the app lives in --> 
    <preference name="ios-statusbarstyle"   value="black-opaque" /> <!-- ios: black-translucent will appear black because the PhoneGap webview doesn't go beneath the status bar --> 
    <preference name="detect-data-types"   value="true" />   <!-- ios: controls whether data types (such as phone no. and dates) are automatically turned into links by the system --> 
    <preference name="exit-on-suspend"   value="false" />   <!-- ios: if set to true, app will terminate when home button is pressed --> 
    <preference name="show-splash-screen-spinner" value="true" />   <!-- ios: if set to false, the spinner won't appear on the splash screen during app loading --> 
    <preference name="auto-hide-splash-screen" value="true" />   <!-- ios: if set to false, the splash screen must be hidden using a JavaScript API --> 
    <preference name="disable-cursor"    value="false" />   <!-- blackberry: prevents a mouse-icon/cursor from being displayed on the app --> 
    <preference name="android-installLocation" value="auto" />   <!-- android: app install location. 'auto' will choose. 'internalOnly' is device memory. 'preferExternal' is SDCard. --> 
    <!-- 
     Define a specific version of PhoneGap to build into your app. 
     <preference name="phonegap-version"  value="3.5.0" /> 
    --> 

    <!-- Plugins --> 

    <!-- Core plugins --> 
    <gap:plugin name="org.apache.cordova.battery-status" /> 
    <gap:plugin name="org.apache.cordova.camera" /> 
    <gap:plugin name="org.apache.cordova.media-capture" /> 
    <gap:plugin name="org.apache.cordova.console" /> 
    <gap:plugin name="org.apache.cordova.contacts" /> 
    <gap:plugin name="org.apache.cordova.device" /> 
    <gap:plugin name="org.apache.cordova.device-motion" /> 
    <gap:plugin name="org.apache.cordova.device-orientation" /> 
    <gap:plugin name="org.apache.cordova.dialogs" /> 
    <gap:plugin name="org.apache.cordova.file" /> 
    <gap:plugin name="org.apache.cordova.file-transfer" /> 
    <gap:plugin name="org.apache.cordova.geolocation" /> 
    <gap:plugin name="org.apache.cordova.globalization" /> 
    <gap:plugin name="org.apache.cordova.inappbrowser" /> 
    <gap:plugin name="org.apache.cordova.media" /> 
    <gap:plugin name="org.apache.cordova.network-information" /> 
    <gap:plugin name="org.apache.cordova.splashscreen" /> 
    <gap:plugin name="org.apache.cordova.vibration" /> 

    <!-- Third party plugins --> 
    <!-- A list of available plugins are available at https://build.phonegap.com/plugins --> 
    <!-- 
     <gap:plugin name="com.phonegap.plugins.barcodescanner" /> 
    --> 

    <!-- Define app icon for each platform. --> 
    <icon src="icon.png" /> 
    <icon src="res/icon/android/icon-36-ldpi.png" gap:platform="android" gap:qualifier="ldpi" /> 
    <icon src="res/icon/android/icon-48-mdpi.png" gap:platform="android" gap:qualifier="mdpi" /> 
    <icon src="res/icon/android/icon-72-hdpi.png" gap:platform="android" gap:qualifier="hdpi" /> 
    <icon src="res/icon/android/icon-96-xhdpi.png" gap:platform="android" gap:qualifier="xhdpi" /> 
    <icon src="res/icon/blackberry/icon-80.png"  gap:platform="blackberry" /> 
    <icon src="res/icon/blackberry/icon-80.png"  gap:platform="blackberry" gap:state="hover"/> 
    <icon src="res/icon/ios/icon-57.png"   gap:platform="ios"  width="57" height="57" /> 
    <icon src="res/icon/ios/icon-72.png"   gap:platform="ios"  width="72" height="72" /> 
    <icon src="res/icon/ios/icon-57-2x.png"   gap:platform="ios"  width="114" height="114" /> 
    <icon src="res/icon/ios/icon-72-2x.png"   gap:platform="ios"  width="144" height="144" /> 
    <icon src="res/icon/webos/icon-64.png"   gap:platform="webos" /> 
    <icon src="res/icon/windows-phone/icon-48.png" gap:platform="winphone" /> 
    <icon src="res/icon/windows-phone/icon-173.png" gap:platform="winphone" gap:role="background" /> 

    <!-- Define app splash screen for each platform. --> 
    <gap:splash src="res/screen/android/screen-ldpi-portrait.png"  gap:platform="android" gap:qualifier="port-ldpi" /> 
    <gap:splash src="res/screen/android/screen-mdpi-portrait.png"  gap:platform="android" gap:qualifier="port-mdpi" /> 
    <gap:splash src="res/screen/android/screen-hdpi-portrait.png"  gap:platform="android" gap:qualifier="port-hdpi" /> 
    <gap:splash src="res/screen/android/screen-xhdpi-portrait.png"  gap:platform="android" gap:qualifier="port-xhdpi" /> 
    <gap:splash src="res/screen/blackberry/screen-225.png"    gap:platform="blackberry" /> 
    <gap:splash src="res/screen/ios/screen-iphone-portrait.png"   gap:platform="ios"  width="320" height="480" /> 
    <gap:splash src="res/screen/ios/screen-iphone-portrait-2x.png"  gap:platform="ios"  width="640" height="960" /> 
    <gap:splash src="res/screen/ios/screen-iphone-portrait-568h-2x.png" gap:platform="ios"  width="640" height="1136" /> 
    <gap:splash src="res/screen/ios/screen-ipad-portrait.png"   gap:platform="ios"  width="768" height="1024" /> 
    <gap:splash src="res/screen/ios/screen-ipad-landscape.png"   gap:platform="ios"  width="1024" height="768" /> 
    <gap:splash src="res/screen/windows-phone/screen-portrait.jpg"  gap:platform="winphone" /> 

    <gap:config-file platform="ios" parent="CFBundleShortVersionString"> 
    <string>100</string> 
    </gap:config-file> 

    <!-- 
     Define access to external domains. 
     <access />   - a blank access tag denies access to all external resources. 
     <access origin="*" /> - a wildcard access tag allows access to all external resource. 
     Otherwise, you can specify specific domains: 
     <access origin="http://phonegap.com" />     - allow any secure requests to http://phonegap.com/ 
     <access origin="http://phonegap.com" subdomains="true" /> - same as above, but including subdomains, such as http://build.phonegap.com/ 
     <access origin="http://phonegap.com" browserOnly="true" /> - only allows http://phonegap.com to be opened by the child browser. 
    --> 
    <!-- Hopefully will fix jQuery problem--> 
    <access origin="*"/> 
    <access origin="code.jquery.com" subdomains="true" /> 
    <allow-navigation href="*://*.code.jquery.com/*" /> 


    <!-- Added the following intents to support the removal of whitelist code from base cordova to a plugin --> 
    <!-- Whitelist configuration. Refer to https://cordova.apache.org/docs/en/edge/guide_appdev_whitelist_index.md.html --> 
    <plugin name="cordova-plugin-whitelist" version="1" /> 
    <allow-intent href="http://*/*" /> 
    <allow-intent href="https://*/*" /> 
    <allow-intent href="tel:*" /> 
    <allow-intent href="sms:*" /> 
    <allow-intent href="mailto:*" /> 
    <allow-intent href="geo:*" /> 
    <platform name="android"> 
     <allow-intent href="market:*" /> 
    </platform> 
    <platform name="ios"> 
     <allow-intent href="itms:*" /> 
     <allow-intent href="itms-apps:*" /> 
    </platform> 



</widget> 
+0

您的内容安全策略元标记是什么样的? –

+0

对于初学者,您的内容安全策略meta标签位于config.xml中,当它们应位于index.html的头部时。此外,你真的只需要一个元标签,所以你可以将它们合并。 – MHardwick

回答

2

的内容安全策略标签是必要的,以表明你的应用程序有权负荷code.jquery脚本.COM。正如我在我的评论中提到,你不需要为这两个meta标签,这样你就可以像这样将它们组合起来:在

<meta http-equiv="Content-Security-Policy" content="default-src 'self' http://code.jquery.com data: gap: https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; media-src *"> 

它需要被放入的index.html的头,而不是config.xml中。

此外,您可能会考虑下载JQuery并将其包含在您的项目中,而不是本地。

+0

我在项目中本地有jQuery。我尝试下载jQuery Mobile并做同样的事情,但是当我将项目导出到apk时,它只会加载到白色屏幕。我现在又试了一遍,同样的事情。我真的不明白为什么。 –

+0

白页是Phonegap Build中许多不同加载问题的常见症状。我的猜测是你实际面临的问题与插件有关。与命令行版本不同,PGB在config.xml中需要不同的插件定义语法。例如,下面是我的工作项目中白名单插件的定义: MHardwick

+0

而且是您的PhoneGap Build或命令行制作的吗? –