meteor => Aplikacje mobilne

Układ strony na różnych urządzeniach - CSS

Jeśli aplikacja będzie działać na różnych urządzeniach, będzie musiała renderować na różnych portach ViewPorts, w zależności od wielkości urządzenia. Możesz sobie z tym poradzić na dwa sposoby: z regułami javascript lub stylami mediów CSS. Jeśli korzystasz z biblioteki MVC lub MVVM, takiej jak Angular lub Ember (lub Blaze), i celujesz tylko w jedno urządzenie lub platformę sprzętową, może być konieczne ponowne przemyślenie modelu MVC, ponieważ różne urządzenia ViewPorts są wprowadzone do twojej aplikacji.

// 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) {
}

Musisz dowiedzieć się, czy chcesz przełamać style w rozdzielczości 768 pikseli (tryb pionowy) lub 1024 pikseli (poziomo). Zakłada się, że docelowym urządzeniem mobilnym jest iPad, który używa proporcji 3: 4. W przeciwnym razie musisz obliczyć proporcje urządzeń, na które chcesz celować, i ustalić poziomy progów.

Naprawiono Sized Windows

Jeśli zamierzasz projektować układy z ekranami o stałym rozmiarze dla różnych urządzeń mobilnych, możesz wykonać kopię lustrzaną tego projektu podczas uruchamiania aplikacji na komputerze. Poniższa metoda naprawia rozmiar okna POZA PhoneGap, dając stałe okno na pulpicie. Czasami najłatwiej jest zarządzać oczekiwaniami użytkownika i projektem interfejsu użytkownika, ograniczając opcje!

// 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]);
});

Buforowanie offline

Aby wszystko to zadziałało, prawdopodobnie potrzebujesz wsparcia offline, co oznacza buforowanie danych aplikacji i danych użytkownika.

meteor add appcache
meteor add grounddb

Wyłącz przewijanie

W aplikacjach komputerowych możesz wyłączyć przewijanie, aby nadać swojej aplikacji bardziej natywny charakter. Możesz to zrobić za pomocą javascript, wyłączając sposób, w jaki przeglądarka kontroluje 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()};

Alternatywnie możesz użyć css oraz stylów przepełnienia i przewijania.

#appBody {
  overflow: hidden;
}

#contentContainer {
  .content-scrollable {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

Model obiektowy wymagany do działania powyższego wygląda mniej więcej tak:

<div id="appBody">
  <div id="contentContainer">
    <div class="content-scrollable">
      <!-- content -->
    </div>
  </div>
</div>

Multitouch i gesty

Urządzenia mobilne zazwyczaj nie mają klawiatur, więc musisz dodać do aplikacji kilka kontrolerów dotykowych. Dwa popularne pakiety, z których ludzie wydają się korzystać, to FastClick i Hammer. Instalacja jest łatwa.

meteor add fastclick
meteor add hammer:hammer

FastClick prawie nie wymaga konfiguracji, podczas gdy Hammer wymaga trochę pracy, aby połączyć. Przykład stożkowy z aplikacji Todos wygląda następująco:

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);
      }
    });
  }
});

Utwórz ikony i zasoby ekranu powitalnego

Przed skompilowaniem aplikacji i uruchomieniem jej na urządzeniu musisz utworzyć kilka ikon i ekranów powitalnych oraz dodać plik mobile-config.js do aplikacji.

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'
});

Rurociąg architektury Meteor Cordova

Czas przejrzeć dokumentację dotyczącą integracji Meteor Cordova Phonegap .

Od czasu napisania tej dokumentacji wydano XCode i Yosemite, co spowodowało pewne problemy z instalacją. Oto kroki, które musieliśmy wykonać, aby skompilować Meteor na urządzeniu z systemem iOS.

Uaktualnij do Yosemite.
Usuń XCode (przeciągnij z folderu Aplikacje do Kosza)
Zainstaluj XCode 6.1 ze sklepu z aplikacjami.
Zaakceptuj różne warunki.

# 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 powinien zostać uruchomiony podczas procesu. Wybierz symulator i naciśnij przycisk „Odtwórz”.

Rozwój IOS

Zarejestruj swoje konto Apple Developer
Zarejestruj identyfikator aplikacji dla swojej aplikacji
Zarejestruj UUID swoich urządzeń testowych
Wygeneruj profil udostępniania aplikacji dla systemu iOS
- Wygeneruj CertificateSigningRequest z KeychainAccess
- Prześlij CertificateSigningRequest na https://developer.apple.com/account/ios/profile/profileCreate.action
- Pobierz i kliknij dwukrotnie certyfikat, aby zaimportować do pęku kluczy
Przejdź do XCode> Preferencje> Konta i zarejestruj swoje konto Apple Developer

Testowanie urządzeń IOS

Upewnij się, że twoja stacja robocza i iPhone są podłączone do tej samej sieci Wi-Fi. Tethering, punkty aktywne i inne sieci ad-hoc nie będą działać.
Uruchom sudo meteor run ios-device
Wdróż na swoim urządzeniu!

Skonfiguruj swój projekt Cordova (config.xml)

Meteor odczytuje plik mobile-config.js w katalogu głównym katalogu aplikacji podczas kompilacji i używa określonych tam ustawień, aby wygenerować plik config.xml Cordova.

Project_folder
 ├── /.meteor
 └── mobile-config.js

Większość konfiguracji można osiągnąć za mobile-config.js (metadane aplikacji, preferencje, ikony i ekrany uruchamiania, a także parametry instalacyjne wtyczek Cordova).

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'
});

Nie edytuj ręcznie pliku /.meteor/local/cordova-build/config.xml , ponieważ zostanie on zregenerowany przy każdym meteor run ios/android lub meteor build , dlatego stracisz wszystkie modyfikacje.

Strona referencyjna: Meteor Guide> Build> Mobile> Konfigurowanie aplikacji

Wykrywanie zdarzenia gotowości urządzenia

Oczywiście najlepszym sposobem na wykrycie urządzenia mobilnego jest bezpośrednie powiadomienie sprzętu. Cordova PhoneGap udostępnia zdarzenie „deviceready”, do którego można dodać detektor zdarzeń.

 document.addEventListener('deviceready', function(){
  Session.set('deviceready', true);
 }, false);

Modified text is an extract of the original Stack Overflow Documentation

Licencjonowany na podstawie CC BY-SA 3.0

Nie związany z Stack Overflow

meteor
Aplikacje mobilne

Szukaj…