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).安装cordovanpm install -g cordova
2.安装好cordova之后，我们就可以创建一个自己的cordova项目cordova create MyApp
现在你打开d盘的test文件夹，是不是多了一个MyApp文件夹呢。接下来我们就要让项目跑起来3.给项目增加一个运行的平台,这里我们设置为浏览器cd MyAppcordova platform add browser
4.让项目运行起来cordova run browser
这个时候你的浏览器会自动打开，如果你也看到下图，那么恭喜你，cordova程序创建成功啦！
http://img.ifcoder.us/wp-content/uploads/2016/04/QQ%E6%88%AA%E5%9B%BE20160429104014.png5.让famous加入进来
npm install famous 本帖最后由 weishao 于 2016-5-9 09:45 编辑
6.接下来我们需要引入Browserify，为什么呢？原因在于NodeJS 模块并不能直接在浏览器端应用中使用，引用这些模块时需要使用 NodeJS 中的 require 方法，而该方法在浏览器端并不存在。Browserify 作为 NodeJS 模块与浏览器端应用之间的桥梁，让应用可以直接使用 NodeJS 中的模块，并可以把应用所依赖的模块打包成单个 JavaScript 文件。当然，在gulp中使用Browserify是比较简单的办法。首先，在根目录下面新建个文件package.json来管理npm里面的依赖包,把如下代码复制到文件中去。{
"name": "myapp",
"version": "1.0.0",
"description": "",
"main": "gulpfile.js",
"dependencies": {
"browserify": "^13.0.0",
"famous": "^0.7.1",
"gulp": "^3.9.1",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0"
},
"devDependencies": {},
"scripts": {
"test": "gulp && cordova serve"
},
"author": "",
"license": "ISC"
}
如果大家对这一步不是很理解，暂时不用管，跟着做就是了。这里面的字段代表的意思，大家可以参考http://blog.csdn.net/woxueliuyun/article/details/392943757.安装里面的依赖包npm install
8.接下来我们还需要一个编写famous的地方，在根目录新建个名为src文件夹，用来存放famous代码。在src文件夹里面新建index.js
http://img.ifcoder.us/wp-content/uploads/2016/05/QQ%E6%88%AA%E5%9B%BE20160503102602.png
9.准备工作做好之后，我们就开始使用Browserify。在根目录新建个文件，名为gulpfile.js，在里面添加以下代码，这个是管理gulp任务的文件。详细信息，可以参考gulp中文网http://www.gulpjs.com.cn/var gulp = require('gulp');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
gulp.task('default',function(){
return browserify('src/index.js')
.bundle()
.pipe(source('index.js'))
.pipe(buffer())
.pipe(gulp.dest('www/js'));
});
10.到这步，我们离成功就不远啦！经过上面繁琐的过程，我们终于可以编写famous代码了，是不是很激动呢？下面我们就打开src文件夹下面的index.js，编写如下代码:var FamousEngine = require('famous/core/FamousEngine');
var DOMElement = require('famous/dom-renderables/DOMElement');
FamousEngine.init();
var scene = FamousEngine.createScene("body");
var firstChild = scene.addChild();
new DOMElement(firstChild,{
content:'Hello World'
});
11.编译和运行gulp && cordova run browserhttp://img.ifcoder.us/wp-content/uploads/2016/05/QQ%E6%88%AA%E5%9B%BE20160503104737.png
久违的Hello World！终于出来了！怎么样？配置还是非常简单的吧。仅仅需要10分钟，就配置好了famous所需要的环境，并写出了自己的第一个项目。当然，如果你在配置中遇到了阻碍，欢迎阅读我们萌妹子发表的文章《Cordova+Famous的入门秘籍》，里面有更详细的配置说明。如果你准备好了，接下来的文章我将和大家一起更全面的了解famous!
页:
[1]