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

Во-первых, метатеги политики безопасности контента находятся в файле config.xml, когда они должны быть в заголовке index.html. Кроме того, вам действительно нужен только один метатег, поэтому вы можете комбинировать их. – MHardwick

ответ

2

Тег политики безопасности контента необходимо указать, что ваше приложение имеет разрешение на загрузку скрипта из code.jquery .com. Как я уже говорил в моем комментарии, вам не нужны два мета-тегов для этого, так что вы можете комбинировать их так:

<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, чем в командной строке. Например, вот определение плагина whitelist из моего рабочего проекта: MHardwick

+0

И ваш с помощью PhoneGap Build или командной строки? –

 Смежные вопросы

  • Нет связанных вопросов^_^