初学指南：利用Meteor进行移动开发
如果你是一个Web开发者，想要转向iOS和Android，或许你不需要学习一种新的语言或全新的概念，只需要对Meteor有一个基本的了解，然后对移动开发细节有一个基础的了解。
第一步：为移动开发准备Meteor
显然，第一步你需要在你的电脑上安装Meteor，如果你的电脑里没有的话，你可以在终端中输入这个命令：
curl <a href="https://install.meteor.com/">https://install.meteor.com/</a> | sh
你需要对Meteor有一个基本的了解，你可以去 官网 了解，这里也推荐一本书给初学者， 点此进入 。
为iOS开发时，在你的系统上需要安装一个Xcode副本。这个可以从Mac应用商店 免费下载 。
第二步：为一个项目添加移动支持
Cordova包含在Meteor中，但是必须手动添加到任何特定的Meteor项目中。这避免了每个项目的膨胀，因为有的项目可能不需要。可以通过添加特定的平台添加支持Cordova。
例如，为了支持iOS，在终端输入以下命令：
meteor add-platform ios
支持Android时，在终端输入以下命令：
meteor add-platform android
当添加支持Android时，系统会提示你安装相关的系统里没有安装的软件。
第三步：创建一个移动配置文件
在项目文件夹中，创建一个 mobile-config.js 文件。在该文件中，我们可以为应用的移动部分设置一组配置选项，包括：
- 元数据，比如应用名称和描述；
- 预设，比如应用的默认定向；
- 特定Cordova插件的额外预设。
Meteor官方文档中提供了一个 配置的例子 ：
// This section sets up some basic app metadata, // the entire section is optional. App.info({ id: 'com.example.matt.uber', name: 'über', description: 'Get über power in one button click', author: 'Matt Development Group', email: 'contact@example.com', website: 'http://example.com' }); // Set up resources such as icons and launch screens. App.icons({ 'iphone': 'icons/icon-60.png', 'iphone_2x': 'icons/icon-60@2x.png', // ... 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); // Pass preferences for a particular PhoneGap/Cordova plugin App.configurePlugin('com.phonegap.plugins.facebookconnect', { APP_ID: '1234567890', API_KEY: 'supersecretapikey' }); 你也可以看下config.xml文件， 点此进入 。
第四步：编写Cordova-only代码
通过Meteor创建移动应用，你可以一次编写大多数功能。大多数代码将跨平台工作。但是并不是所有的代码都应该跨平台的，同样我们可以通过 isClient 和 isServer 条件语句控制某些代码是否运行于客户端或服务端，当然也包括 isCordova 条件语句：
if(Meteor.isCordova){ // code goes here } 上面的代码块将只运行于Cordova移动环境下。
第五步：为你的应用添加移动包
目前有三种官方的Meteor包可以使你更容易的为应用添加移动特性：
- Camera ：在移动设备或台式电脑上拍照；
- Geolocation ：根据设备的GPS追踪用户位置；
- Reload on Resume ：当应用的一个更新有效时可以通知用户，并支持他们重新查看更改信息。
此外，非官方的包可以在atmospherejs上找到， 点此进入 。
上面提供的链接可以帮助你在没有进一步解释的情况下了解这些包的使用方法。这里我们用Camera包作为例子。
我们要做的是创建一个按钮，在点击的时候可以打开用户设备（Android、iOS或桌面）上的相机并允许他们拍照。如果他们拍照了，数据将会返回到应用，届时我们便可以对照片作出处理。
首先将Camera包添加到项目中：
meteor add mdg:camera
然后删除你项目中默认的HTML文件目录，并用以下内容代替：
<head> <title>Camera Example</title> </head> <body> {{> takePhoto}} </body> <template name="takePhoto"> <p><input type="button" class="capture" value="Take Photo"></p> </template> 接下来创建一个包含“Take Photo”按钮的接口。
在默认的JavaScript文件中，删除当前的内容并替换成下面所显示的内容：
if(Meteor.isClient){ Template.takePhoto.events({ 'click .capture': function(){ console.log("Button clicked."); } }); } 由于创建了这个事件，每当单机按钮时，一个消息将会出现在JavaScript控制台。
在这个事件中，写下这一行：
MeteorCamera.getPicture();
这是内置于Camera包中的函数，使我们能够利用用户的硬件来捕捉照片，它接受两个参数：
- 选项：如设置图片的高度和宽度；
- 一个回调函数：用于检索照片的数据。
就目前这个我们将无法通过任何选项：
MeteorCamera.getPicture({}); 但是我们将通过一个回调函数作为第二个参数：
MeteorCamera.getPicture({}, function(error, data){ // something goes here }); 因为这个回调函数，我们现在可以检索任何捕获到的照片数据的错误。为了看到这些，使用log声明：
MeteorCamera.getPicture({}, function(error, data){ console.log(data); }); 在一个允许网络摄像头启动的电脑上测试应用，注意到在你捕捉到一个照片后，一个URL出现在控制台。我们可以使用这个URL将图片嵌入到接口中。
首先，将图像数据存储到一个session中：
MeteorCamera.getPicture({}, function(error, data){ Session.set('photo', data); }); 然后为“takePhoto”模板创建一个helpers块：
Template.takePhoto.helpers({ 'photo': function(){ /// code goes here } }); 我们需要返回“photo”session的值：
Template.takePhoto.helpers({ 'photo': function(){ return Session.get('photo'); } }); 接下来在“takePhoto”模块中，简单的引用该helper：
<template name="takePhoto"> <p><input type="button" class="capture" value="Take Photo"></p> <p>{{photo}}</p> </template> 现在当我们捕获一张照片时，会有一个类似于字符串的出现在内部接口。而字符串将通过以下方式完美工作：
<template name="takePhoto"> <p><input type="button" class="capture" value="Take Photo"></p> <p><img src="{{photo}}"></p> </template> 当然，我们只是在电脑上执行了这段代码，而我们真正想要的是在一个移动应用中去执行它。
第六步：测试应用
你可以通过在命令行输入以下命令让应用运行于iOS模拟器中：
meteor run ios
注意到照片功能实际上不会工作于iOS模拟器中，它将工作于手机本身、Android模拟器以及桌面浏览器中。
使用以下命令在Android模拟器中运行应用：
meteor run android
如果你没有使用 meteor add-platform android 命令，你会安装一些额外的软件，不过不用担心，终端将指导你完成这一过程。
结论
在本教程中，只涉及到用Meteor创建一个移动友好应用的基础知识，不过希望这些足够吸引你进一步去挖掘。Meteor是一个非常有趣的框架，在许多情况下构建移动应用可能更有意义，而Cordova对于那些不感兴趣于学习其他技术的人来说提供了一个简洁的选择。（编译：陈明）
原文来自： sitepoint
正文到此结束
热门推荐
相关文章
近期评论
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
搞个gitee的项目
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
