meteor => Mobilappar

Sidlayout på olika enheter - CSS

Om din applikation kommer att köras på olika enheter kommer den att behöva återges till olika ViewPorts, baserat på enhetsstorleken. Du kan hantera detta på två sätt: med javascriptregler eller CSS-mediestilar. Om du har använt ett MVC- eller MVVM-bibliotek, till exempel Angular eller Ember (eller Blaze, för den delen) och bara har riktat in dig på en enda enhet eller hårdvaruplattform, kan du behöva tänka om din MVC-modell eftersom olika ViewPorts-hårdvara är introducerade till din ansökan.

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

Du måste ta reda på om du vill bryta stilarna på 768px (porträttläge) eller vid 1024 pixlar (liggande). Det antas att din mobila målenhet är iPad, som använder ett 3: 4-förhållande. Annars måste du räkna ut bildförhållandena för de enheter du vill rikta in dig och räkna ut tröskelnivåerna därifrån.

Windows med fast storlek

Om du tänker utforma layouter med fasta storlekar för olika mobila enheter, kanske du vill spegla den designen när du kör din app på ett skrivbord. Följande metod fixar storleken på fönstret UTANFÖR PhoneGap, vilket ger ett fönster med fast storlek på skrivbordet. Ibland är det lättast att hantera användarens förväntningar och UI-design genom att begränsa alternativen!

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

Offline-caching

För att allt detta ska fungera behöver du förmodligen offline-stöd, vilket innebär att cache-applikationsdata och användardata.

meteor add appcache
meteor add grounddb

Inaktivera Scroll-Bounce

På stationära appar kanske du vill inaktivera rulla-studs, för att ge din app en mer inhemsk känsla. Du kan göra detta med javascript genom att inaktivera hur webbläsaren styr 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()};

Alternativt kan du använda css, och översvämnings- och rullningsformat.

#appBody {
  overflow: hidden;
}

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

Objektmodellen som behövs för att ovanstående ska fungera ser ut så här:

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

Multitouch & gester

Mobila enheter har i allmänhet inte tangentbord, så du måste lägga till några haptiska kontroller till din applikation. De två populära paketen som folk verkar använda är FastClick och Hammer. Installation är enkel.

meteor add fastclick
meteor add hammer:hammer

FastClick kräver nästan ingen konfiguration, medan Hammer kräver lite arbete för att koppla upp. Det kononiska exemplet från Todos-appen ser så här ut:

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

Skapa dina ikoner och stänkskärmstillgångar

Innan du sammanställer din app och kör den på din enhet måste du skapa några ikoner och stänkskärmar och lägga till en mobile-config.js fil till din app.

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

Meteor Cordova Arkitekturledning

Nu är det dags att gå igenom Meteor Cordova Phonegap Integration dokumentation.

Sedan den dokumentationen skrevs, har XCode och Yosemite släppts, vilket har orsakat vissa hicka under installationen. Här är stegen som vi var tvungna att gå igenom för att få Meteor sammanställt till en iOS-enhet.

Uppgradera till Yosemite.
Radera XCode (dra från mappen Program till papperskorgen)
Installera XCode 6.1 från app store.
Håller med om olika villkor.

# 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 bör starta under processen. Välj din simulator och tryck på knappen "Spela".

IOS-utveckling

Registrera ditt Apple Developer-konto
Registrera ett app-ID för din app
Registrera UUID för dina testenheter
Skapa en iOS-apputvecklingsprofil
- Generera ett CertificateSigningRequest från KeychainAccess
- Skicka CertificateSigningRequest till https://developer.apple.com/account/ios/profile/profileCreate.action
- Ladda ner och dubbelklicka på certifikatet för att importera till nyckelring
Gå till XCode> Inställningar> Konton och registrera ditt Apple Developer-konto

Test av IOS-enheter

Se till att din utvecklingsarbetsstation och iPhone är anslutna till samma WiFi-nätverk. Tethering, hotspots och andra ad-hoc-nätverk fungerar inte.
Kör sudo meteor run ios-device
Distribuera till din enhet!

Konfigurera ditt Cordova-projekt (config.xml)

Meteor läser en mobile-config.js fil i roten till din appkatalog under byggandet och använder inställningarna som anges där för att generera Cordovas config.xml .

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

De flesta konfigurationer kan uppnås med mobile-config.js (app-metadata, preferenser, ikoner och lanseringsskärmar samt installationsparametrar för Cordova-plugins).

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

Redigera inte /.meteor/local/cordova-build/config.xml , eftersom den kommer att regenereras vid varje meteor run ios/android eller meteor build , därför kommer du att förlora alla dina ändringar.

Referenssida: Meteorguide> Bygg> Mobil> Konfigurera din app

Upptäcka händelsens händelse

Naturligtvis är det bästa sättet att upptäcka mobil att hårdvaran meddelar dig direkt. Cordova PhoneGap exponerar en "deviceready" -händelse, som du kan lägga till en händelse lyssnare till.

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

Modified text is an extract of the original Stack Overflow Documentation

Licensierat under CC BY-SA 3.0

Inte anslutet till Stack Overflow

meteor
Mobilappar

Sök…