Поиск…
Макет страницы на разных устройствах - CSS
Если ваше приложение будет запускаться на разных устройствах, оно должно будет отображаться на разных портах ViewPorts на основе размера устройства. Вы можете справиться с этим двумя способами: с правилами javascript или стилями мультимедиа CSS. Если вы использовали библиотеку MVC или MVVM, такую как Angular или Ember (или Blaze, если на то пошло), и только таргетинг на одну аппаратную или аппаратную платформу, вам может потребоваться переосмыслить вашу модель MVC как другое оборудование. ViewPorts введенные в ваше приложение.
// desktop @media only screen and (min-width: 960px) { } // landscape orientation @media only screen and (min-width: 768px) { } // portrait orientation @media only screen and (min-width: 480px) { }
Вам нужно выяснить, хотите ли вы стирать стили в 768px (портретный режим) или 1024 пикселя (пейзаж). Это предполагает, что вашим целевым мобильным устройством является iPad, который использует соотношение 3: 4. В противном случае вам нужно будет определить пропорции устройств, на которые вы хотите настроить таргетинг, и определить уровни порога оттуда.
Исправленные окна
Если вы планируете создавать макеты с экранами фиксированного размера для разных мобильных устройств, вы можете захотеть отразить этот дизайн при запуске приложения на рабочем столе. Следующий метод фиксирует размер окна OUTSIDE of PhoneGap, предоставляя окно на фиксированном уровне на рабочем столе. Иногда проще управлять ожиданиями пользователей и дизайном пользовательского интерфейса, ограничивая возможности!
// create a window of a specific size var w=window.open('','', 'width=100,height=100'); w.resizeTo(500,500); // prevent window resize var size = [window.width,window.height]; //public variable $(window).resize(function(){ window.resizeTo(size[0],size[1]); });
Автономное кэширование
Чтобы получить все это для работы, вам, вероятно, понадобится автономная поддержка, что означает кэширование данных приложений и пользовательских данных.
meteor add appcache
meteor add grounddb
Отключить прокрутку
В настольных приложениях вы можете отключить прокрутку, чтобы дать вашему приложению более привычное ощущение. Вы можете сделать это с помощью javascript, отключив, как браузер управляет DOM:
// prevent scrolling on the whole page // this is not meteorish; TODO: translate to meteor-centric code document.ontouchmove = function(e) {e.preventDefault()}; // prevent scrolling on specific elements // this is not meteorish; TODO: translate to meteor-centric code scrollableDiv.ontouchmove = function(e) {e.stopPropagation()};
Кроме того, вы можете использовать CSS, стили переполнения и прокрутки.
#appBody { overflow: hidden; } #contentContainer { .content-scrollable { overflow-y: auto; -webkit-overflow-scrolling: touch; } }
Объектная модель, необходимая для работы выше, выглядит примерно так:
<div id="appBody"> <div id="contentContainer"> <div class="content-scrollable"> <!-- content --> </div> </div> </div>
Мультитач и жесты
На мобильных устройствах обычно нет клавиатур, поэтому вам нужно добавить в ваше приложение некоторые тактильные контроллеры. Два популярных пакета, которые, по-видимому, используют люди, - FastClick и Hammer. Установка проста.
meteor add fastclick
meteor add hammer:hammer
FastClick практически не нуждается в настройке, в то время как Hammer требует немного работы для подключения. Кононический пример приложения Todos выглядит следующим образом:
Template.appBody.onRendered(function() {
if (Meteor.isCordova) {
// set up a swipe left / right handler
this.hammer = new Hammer(this.find('#appBody'));
this.hammer.on('swipeleft swiperight', function(event) {
if (event.gesture.direction === 'right') {
Session.set(MENU_KEY, true);
} else if (event.gesture.direction === 'left') {
Session.set(MENU_KEY, false);
}
});
}
});
Создайте свои иконки и заставки экрана
Прежде чем компилировать приложение и запустить его на своем устройстве, вам нужно создать несколько значков и заставки и добавить файл mobile-config.js
в ваше приложение.
App.icons({ // iOS 'iphone': 'resources/icons/icon-60x60.png', 'iphone_2x': 'resources/icons/[email protected]', 'ipad': 'resources/icons/icon-72x72.png', 'ipad_2x': 'resources/icons/[email protected]', // Android 'android_ldpi': 'resources/icons/icon-36x36.png', 'android_mdpi': 'resources/icons/icon-48x48.png', 'android_hdpi': 'resources/icons/icon-72x72.png', 'android_xhdpi': 'resources/icons/icon-96x96.png' }); App.launchScreens({ // iOS 'iphone': 'resources/splash/splash-320x480.png', 'iphone_2x': 'resources/splash/[email protected]', 'iphone5': 'resources/splash/[email protected]', 'ipad_portrait': 'resources/splash/splash-768x1024.png', 'ipad_portrait_2x': 'resources/splash/[email protected]', 'ipad_landscape': 'resources/splash/splash-1024x768.png', 'ipad_landscape_2x': 'resources/splash/[email protected]', // Android 'android_ldpi_portrait': 'resources/splash/splash-200x320.png', 'android_ldpi_landscape': 'resources/splash/splash-320x200.png', 'android_mdpi_portrait': 'resources/splash/splash-320x480.png', 'android_mdpi_landscape': 'resources/splash/splash-480x320.png', 'android_hdpi_portrait': 'resources/splash/splash-480x800.png', 'android_hdpi_landscape': 'resources/splash/splash-800x480.png', 'android_xhdpi_portrait': 'resources/splash/splash-720x1280.png', 'android_xhdpi_landscape': 'resources/splash/splash-1280x720.png' });
Трубопровод архитектуры Метеор Кордова
Теперь пришло время пройти через документацию интеграции Metega Cordova Phonegap Integration .
Поскольку эта документация была написана, были выпущены XCode и Yosemite, что вызвало некоторые икоты при установке. Вот шаги, которые мы должны были выполнить, чтобы получить Meteor, скомпилированный для устройства iOS.
- Поднимитесь до Йосемити.
- Удалить XCode (перетащить из папки «Приложения» в корзину)
- Установите XCode 6.1 из магазина приложений.
- Соглашайтесь на различные условия.
# 5. clone and rebuild the ios-sim locally # (this step will not be needed in future releases) git clone https://github.com/phonegap/ios-sim.git cd ios-sim rake build # 6. make sure we can update the .meteor/packages locations # (this step will not be needed in future releases) sudo chmod -R 777 ~/.meteor/packages # 7. copy the new build into Meteor locations # (this step will not be needed in future releases) for i in `find ~/.meteor/packages/meteor-tool/ -name ios-sim -type f`; do cp -R ./build/Release/ios-sim "$i" done # 8. install the ios platform to your app cd myapp meteor list-platforms meteor add-platform ios meteor list-platforms # 9. and that there aren't dead processes ps -ax kill -9 <pid> # /Users/abigailwatson/.meteor/packages/meteor-tool/.1.0.35.wql4jh++os.osx.x86_64+web.browser+web.cordova/meteor-tool-os.osx.x86_64/dev_bundle/mongodb/bin/mongod # tail -f /Users/abigailwatson/Code/Medstar/dart/webapp/.meteor/local/cordova-build/platforms/ios/cordova/console.log # 10. make sure there are correct permissions on the application (important!) sudo chmod -R 777 .meteor/local/ # 11. run app meteor run ios # 12. if that doesn't work, clear the directory sudo rm -rf .meteor/local # 13a. run meteor again to create the default browser build meteor # 13b. run it a second time so bootstrap and other packages get downloaded into the browser build ctrl-x meteor # 14. then run the ios version ctrl-x meteor run ios
XCode должен запускаться во время процесса. Выберите ваш симулятор и нажмите кнопку «Воспроизвести».
Разработка IOS
- Зарегистрируйте свою учетную запись Apple Developer
- Зарегистрируйте идентификатор приложения для своего приложения.
- Зарегистрируйте UUID ваших тестовых устройств
- Создайте профиль обеспечения разработки приложений iOS
- Создание сертификатаSigningRequest из KeychainAccess
- Отправить CertificateSigningRequest в https://developer.apple.com/account/ios/profile/profileCreate.action
- Загрузите и дважды щелкните сертификат для импорта в Keychain
- Перейдите в раздел XCode> Настройки> Аккаунты и зарегистрируйте свою учетную запись Apple Developer
Тестирование устройств IOS
- Убедитесь, что ваша рабочая станция разработки и iPhone подключены к той же сети WiFi. Модем, горячие точки и другие специальные сети не будут работать.
- Запустить
sudo meteor run ios-device
запускаsudo meteor run ios-device
- Разверните на свое устройство!
Настройте проект Cordova (config.xml)
Meteor считывает файл mobile-config.js
в корневой каталог вашего приложения во время сборки и использует настройки, указанные там, для создания config.xml
Кордовы.
Project_folder
├── /.meteor
└── mobile-config.js
Большинство конфигураций могут быть достигнуты с помощью mobile-config.js
(метаданные приложений, предпочтений, значков и экранов запуска, а также параметры установки плагинов Кордовы).
App.info({
id: 'com.example.matt.uber',
name: 'über',
description: 'Get über power in one button click',
author: 'Matt Development Group',
email: '[email protected]',
website: 'http://example.com'
});
// Set up resources such as icons and launch screens.
App.icons({
'iphone': 'icons/icon-60.png',
'iphone_2x': 'icons/[email protected]',
// ... more screen sizes and platforms ...
});
App.launchScreens({
'iphone': 'splash/Default~iphone.png',
'iphone_2x': 'splash/Default@2x~iphone.png',
// ... more screen sizes and platforms ...
});
// Set PhoneGap/Cordova preferences
App.setPreference('BackgroundColor', '0xff0000ff');
App.setPreference('HideKeyboardFormAccessoryBar', true);
App.setPreference('Orientation', 'default');
App.setPreference('Orientation', 'all', 'ios');
// Pass preferences for a particular PhoneGap/Cordova plugin
App.configurePlugin('com.phonegap.plugins.facebookconnect', {
APP_ID: '1234567890',
API_KEY: 'supersecretapikey'
});
Не вручную отредактируйте файл /.meteor/local/cordova-build/config.xml
, так как он будет регенерирован при каждом meteor run ios/android
или meteor build
, выполняемом meteor build
, поэтому вы потеряете все свои модификации.
Справочная страница: Руководство Meteor> Build> Mobile> Настройка вашего приложения
Обнаружение события deviceready
Разумеется, лучший способ обнаружить мобильный телефон - это то, что оборудование должно уведомить вас напрямую. Cordova PhoneGap предоставляет событие «deviceready», к которому вы можете добавить прослушиватель событий.
document.addEventListener('deviceready', function(){
Session.set('deviceready', true);
}, false);