专注于
IT技术和业内交流

Cordova+Famous的入门秘籍

在通过阅读利用 Famous 创建高性能移动 UI之后我想我们已经对Famous已经有了一个初步的认识,那么我们在使用Famous之前需要做哪些准备工作呢?这篇文章将会为大家作详细介绍。

第一步:下载并安装nodeJS

登录 nodeJS官网 下载nodeJS
Famous的入门秘籍

为了凸显逼格高,我肯定下载最新版的咯O(∩_∩)O哈哈~。下载完成后双击安装包对其进行安装,需要注意的是记得勾选Cordova+Famous的入门秘籍 ,然后一直点next就行,完成后点击finish完成安装(已经安装过nodeJS的电脑请无视我~(≧▽≦)/~啦啦啦)

第二步:安装cordova并创建cordova项目

1.登录 cordova官网页面往下滑动出现安装cordova的步骤
2.为了演示我在我的D盘里建了一个名为qiuqiu的文件夹,按下window+R调出按下enter键出现命令窗口, 进入到我们刚创建的文件的位置,(因为我是创建在D盘里的,所以要在D盘里去找),键入d:敲回车,继续输入
cd qiuqiu,敲回车出现

D:\qiuqiu>这个时候就代表我们已经进入了我们所创建的这个文件内,现在我们按照cordova官网提示的安装步骤来进行安装:
3.npm install -g cordova[安装cordova,需要等待几秒]
4.cordova create MyApp[创建一个名字叫MyApp的项目。这个名字可以自己取]

5.cd MyApp[进入到项目里面]
6.cordova platform add browser[过程需要等待几秒]
7.cordova run browser[会打开一个窗口],当出现以下界面时,就代表cordova安装成功,并且成功创建了一个名为MyApp的项目文件夹,是不是感觉自己萌萌哒呢^_^
Cordova+Famous的入门秘籍

第三步:安装Famous

1.npm install -g Famous[安装Famous,这个过程需要等待几秒]
2.要确定Famous有没有安装的话只需要进入这个文件夹里看看有没有这个文件夹在,如果有,恭喜你,你已经夺得了三杀。

第四步:安装gulp

1.npm install -g gulp[安装gulp]
2.npm install –save-dev gulp[作为项目的开发依赖安装]
3.在项目根目录下创建一个gulpfile.js文件:

var gulp = require('gulp');

gulp.task('default',function(){
    //将你的默认任务代码放在这
});

4.运行gulp:

$gulp

做到这一步代表已经安装好了所有需要准备的东西,并且拥有个空的gulpfile.js。
如果出现端口号就代表gulp运行成功啦~~

第五步:安装Browserify

Browserify跟gulp的关系就等同于jQuery跟JS的关系,是互相依赖的好基友,一起天长与地久,也可以把它当作一个插件来看,如果不安装browserify的话require会报错哦,下面为大家介绍安装步骤
1.npm install -g browserify[安装browserify]
2.在根目录下面新建个文件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",
    "vainyl-source-stream":'^1.1.0'
},
"devDependencies":{},
"scripts":{
    "test":"gulp && cordova serve"
},
"author":"",
"license":"ISC"
}

3.在根目录新建个名为src文件夹,用来存放famous代码。在src文件夹里面新建index.js,这里我打开了命令我就不用鼠标右键新建文件夹了,不要问我为什么,我才不会告诉你们我比较懒呢╭(╯^╰)╮
Cordova+Famous的入门秘籍
做好这些呢,现在就需要打开刚刚我们创建的gulpfile.js,这个是管理gulp任务的文件,下面来添加如下代码:

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

到这一步就已经顺利完成五杀了,准备工作做好以后就需要进行实战了,打开src文件夹下面的index.js就可以直接编写Famous代码了,关于Famous实战篇可以戳这里戳这里啦《cordova+famous实战篇》,其实我是一个萌妹纸,第一次看到Famous就喜欢上它了,一直在研究它,如果您遇到了什么问题欢迎交流,么么哒(づ ̄ 3 ̄)づ

未经允许,不得转载本站任何文章:代码山 » Cordova+Famous的入门秘籍

分享到:更多 ()

专注品牌化高端网站建设

商务服务联系我们