html5开发移动混合App系列1-开发环境搭建

最近公司准备开发门店收银系统，是基于IPAD的程序，决定采用基于 Ionic + Cordova + AngularJS技术混合开发模式。

准备

一台mac（安装了mac os的虚拟机也可以），nodejs，ionic，xcode

安装

1，安装nodejs

到官网下载nodejs安装包（pkg文件），需要0.10.＊及以下的版本，高版本会有很多插件不可用。我使用的版本是v0.10.38（下载地址：http://nodejs.org/dist/v0.10.38/ ），下载完成之后直接打开按提示安装即可。

安装成功后，在Launchpad中打开终端，输入命令npm：

koala:~ dev$ npm

Usage: npm <command>

where <command> is one of:

    add-user, adduser, apihelp, author, bin, bugs, c, cache,

    completion, config, ddp, dedupe, deprecate, docs, edit,

    explore, faq, find, find-dupes, get, help, help-search,

    home, i, info, init, install, isntall, issues, la, link,

    list, ll, ln, login, ls, outdated, owner, pack, prefix,

    prune, publish, r, rb, rebuild, remove, repo, restart, rm,

    root, run-script, s, se, search, set, show, shrinkwrap,

    star, stars, start, stop, submodule, t, tag, test, tst, un,

    uninstall, unlink, unpublish, unstar, up, update, v,

    version, view, whoami

npm <cmd> -h     quick help on <cmd>

npm -l           display full usage info

npm faq          commonly asked questions

npm help <term>  search for help on <term>

npm help npm     involved overview

Specify configs in the ini-formatted file:

    /Users/giti/.npmrc

or on the command line via: npm <command> --key value

Config info can be viewed via: npm help config

npm@1.4.28 /usr/local/lib/node_modules/npm

出现上述信息，表示nodejs安装成功。

2，安装cordova

$ sudo npm install -g cordova

3，安装ionic

$ sudo npm install -g ionic

4，安装ios-sim

$ sudo npm install -g ios-sim

测试app

ionic官网为开发者提供了多个开发模板，如默认的Tab模板（页面基于类似微信的Tab组织，使用了ionTab指令），Sidemenu模板等

创建基于Tab模板的应用

$ ionic start myApp1

控制台输出

$ ionic start myApp1

Running start task...

Creating Ionic app in folder /Users/zhangxitao/myApp1 based on tabs project

DOWNLOADING: https://github.com/driftyco/ionic-app-base/archive/master.zip

DOWNLOADING: https://github.com/driftyco/ionic-starter-tabs/archive/master.zip

Initializing cordova project.

Fetching plugin "org.apache.cordova.device" via plugin registry

Fetching plugin "org.apache.cordova.console" via plugin registry

Fetching plugin "https://github.com/driftyco/ionic-plugins-keyboard" via git clone

可以看到创建模板应用就是从git上下载ionic框架的代码，然后通过cordova命令初始化cordova工程，接着添加了Device，console log，keyboard等的插件，最后一个插件ionic-plugins-keyboard使用ionic开发的，提供了软键盘事件的js层通知，在android上很有用。

添加ios原生代码，其实就是调用了cordova platform add ios，当然这边要在mac上做了，并且需要安装了xcode

$ ionic platform  add ios

Running platform task...

Adding platform ios

Creating ios project...

Installing "com.ionic.keyboard" for ios

Installing "org.apache.cordova.console" for ios

Installing "org.apache.cordova.device" for ios

在模拟器上运行一下创建的应用吧

$ ionic run ios

Running run task...

Running app on platform ios

Running command: /Users/zhangxitao/myApp1/platforms/ios/cordova/run

No device is connected, trying Simulator.

Build settings from command line:

    ARCHS = i386

    CONFIGURATION_BUILD_DIR = /Users/zhangxitao/myApp1/platforms/ios/build/emulator

    SDKROOT = iphonesimulator7.1

    VALID_ARCHS = i386

=== BUILD TARGET CordovaLib OF PROJECT CordovaLib WITH CONFIGURATION Debug ===

如果最后是成功状态，会在iphone模拟器上启动应用，界面是扁平风格的，很漂亮吧