2016-02-11 63 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或命令行製作的嗎? –