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模擬器上啟動應用，界面是扁平風格的，很漂亮吧