PhoneGap中文网

标题: cordova+famous实战篇（1）——创建第一个应用程序 [打印本页]
作者: weishao    时间: 2016-5-9 09:34
标题: cordova+famous实战篇（1）——创建第一个应用程序
本帖最后由 weishao 于 2016-5-9 09:43 编辑

对于famous，相信大多数人还比较陌生。但是它在开发APP方面，相对于传统开发程序，的确有着非常大的优势。具体大家可以看看《利用 Famous 创建高性能移动 UI》这篇文章，如果你还不学习famous,那你就真的out啦！如果大家看到博客有什么不对的地方，请不吝指正，谢谢。

1.配置运行环境：
(1).由于cordova是利用nodeJS进行管理，所以需要先下载和安装nodeJS。

(2).安装好NodeJS之后，打开DOS窗口，然后输入命令打开需要创建项目的文件夹路劲。例如我想把项目放在d盘的test文件夹下面，则需要输入

d:

cd test

(3).安装cordova

  1. npm install -g cordova
复制代码

2.安装好cordova之后，我们就可以创建一个自己的cordova项目

  1. cordova create MyApp
复制代码

现在你打开d盘的test文件夹，是不是多了一个MyApp文件夹呢。接下来我们就要让项目跑起来

3.给项目增加一个运行的平台,这里我们设置为浏览器  
cd MyApp
  1. cordova platform add browser
复制代码

4.让项目运行起来

  1. cordova run browser
复制代码

这个时候你的浏览器会自动打开，如果你也看到下图，那么恭喜你，cordova程序创建成功啦！

5.让famous加入进来


  1. npm install famous
复制代码
作者: weishao    时间: 2016-5-9 09:34
本帖最后由 weishao 于 2016-5-9 09:45 编辑

6.接下来我们需要引入Browserify，为什么呢？原因在于NodeJS 模块并不能直接在浏览器端应用中使用，引用这些模块时需要使用 NodeJS 中的 require 方法，而该方法在浏览器端并不存在。Browserify 作为 NodeJS 模块与浏览器端应用之间的桥梁，让应用可以直接使用 NodeJS 中的模块，并可以把应用所依赖的模块打包成单个 JavaScript 文件。当然，在gulp中使用Browserify是比较简单的办法。首先，在根目录下面新建个文件package.json来管理npm里面的依赖包,把如下代码复制到文件中去。

  1. {
  2.   "name": "myapp",
  3.   "version": "1.0.0",
  4.   "description": "",
  5.   "main": "gulpfile.js",
  6.   "dependencies": {
  7.     "browserify": "^13.0.0",
  8.     "famous": "^0.7.1",
  9.     "gulp": "^3.9.1",
  10.     "vinyl-buffer": "^1.0.0",
  11.     "vinyl-source-stream": "^1.1.0"
  12.   },
  13.   "devDependencies": {},
  14.   "scripts": {
  15.     "test": "gulp && cordova serve"
  16.   },
  17.   "author": "",
  18.   "license": "ISC"
  19. }
复制代码

如果大家对这一步不是很理解，暂时不用管，跟着做就是了。这里面的字段代表的意思，大家可以参考http://blog.csdn.net/woxueliuyun/article/details/39294375

7.安装里面的依赖包

  1. npm install
复制代码

8.接下来我们还需要一个编写famous的地方，在根目录新建个名为src文件夹，用来存放famous代码。在src文件夹里面新建index.js

9.准备工作做好之后，我们就开始使用Browserify。在根目录新建个文件，名为gulpfile.js，在里面添加以下代码，这个是管理gulp任务的文件。详细信息，可以参考gulp中文网http://www.gulpjs.com.cn/

  1. var gulp = require('gulp');
  2. var browserify = require('browserify');
  3. var source = require('vinyl-source-stream');  
  4. var buffer = require('vinyl-buffer');

  6. gulp.task('default',function(){
  7.      return browserify('src/index.js')
  8.     .bundle()
  9.     .pipe(source('index.js'))
  10.     .pipe(buffer())
  11.     .pipe(gulp.dest('www/js'));
  12. });
复制代码

10.到这步，我们离成功就不远啦！经过上面繁琐的过程，我们终于可以编写famous代码了，是不是很激动呢？下面我们就打开src文件夹下面的index.js，编写如下代码:

  1. var FamousEngine = require('famous/core/FamousEngine');
  2. var DOMElement = require('famous/dom-renderables/DOMElement');

  4. FamousEngine.init();

  6. var scene = FamousEngine.createScene("body");

  8. var firstChild = scene.addChild();

  10. new DOMElement(firstChild,{
  11.     content:'Hello World'
  12. });
复制代码

11.编译和运行

  1. gulp && cordova run browser
复制代码


久违的Hello World！终于出来了！怎么样？配置还是非常简单的吧。仅仅需要10分钟，就配置好了famous所需要的环境，并写出了自己的第一个项目。当然，如果你在配置中遇到了阻碍，欢迎阅读我们萌妹子发表的文章《Cordova+Famous的入门秘籍》，里面有更详细的配置说明。如果你准备好了，接下来的文章我将和大家一起更全面的了解famous!





欢迎光临 PhoneGap中文网 (http://bbs.phonegap100.com/) Powered by Discuz! X3.2