meteor => Мобильные приложения

Макет страницы на разных устройствах - 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);

Modified text is an extract of the original Stack Overflow Documentation

Лицензировано согласно CC BY-SA 3.0

Не связан с Stack Overflow

meteor
Мобильные приложения

Поиск…