设为首页收藏本站

LUPA开源社区

 找回密码
 注册
文章 帖子 博客
LUPA开源社区 首页 业界资讯 技术文摘 查看内容

初学指南:利用Meteor进行移动开发

2015-3-9 22:16| 发布者: joejoe0332| 查看: 1201| 评论: 0|原作者: sitepoint|来自: sitepoint

摘要: 如果你是一个Web开发者,想要转向iOS和Android,或许你不需要学习一种新的语言或全新的概念,只需要对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 preferencesApp.setPreference('BackgroundColor', '0xff0000ff');App.setPreference('HideKeyboardFormAccessoryBar', true); // Pass preferences for a particular PhoneGap/Cordova pluginApp.configurePlugin('com.phonegap.plugins.facebookconnect', {  APP_ID: '1234567890',  API_KEY: 'supersecretapikey'});

你也可以看下config.xml文件,点此进入

第四步:编写Cordova-only代码

通过Meteor创建移动应用,你可以一次编写大多数功能。大多数代码将跨平台工作。但是并不是所有的代码都应该跨平台的,同样我们可以通过isClientisServer条件语句控制某些代码是否运行于客户端或服务端,当然也包括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


酷毙

雷人

鲜花

鸡蛋

漂亮
  • 快毕业了,没工作经验,
    找份工作好难啊?
    赶紧去人才芯片公司磨练吧!!

最新评论

关于LUPA|人才芯片工程|人才招聘|LUPA认证|LUPA教育|LUPA开源社区 ( 浙B2-20090187 浙公网安备 33010602006705号   

返回顶部