Ionic-wechat項目邊開發邊學（一）：環境搭建和創建一個項目

之前學AngularJS，教程過了一遍覺得很簡單，但真正寫幾個Demo就錯誤百出，一個小小的功能要折騰很久。所以這次學Ionic，准備以開發一個項目為切入點去學，那么問題來了，開發什么項目呢？

糾結了10秒，還是模仿微信吧^_，大體列一下要實現的功能：

1. 界面要像，呵呵
2. 聊天消息列表，查看對話內容，來了消息推送提醒
3. 通訊錄展示，好友搜索，右側字母快速索引
4. 朋友圈展示，發朋友圈消息
5. 掃一掃， 搖一搖功能
6. 設置功能，設置消息提醒方式，設置聊天背景，關於等

之前根本沒接觸過上層應用這塊，這些功能有點夠嗆，希望能堅持下去，把這個項目完成好，把博客寫好，與各位共勉，加油！

摘要

本篇文章主要介紹一下Ionic，開發環境的配置，以及創建並運行一個官方的example
項目地址

Ionic介紹

Ionic是一個基於Cordova漂亮，開源的前端SDK，用web技術就可以開發跨平台移動app，它支持在線拖拽生成界面（ionic creator），並可以免費下載生成的代碼。更多介紹
開始之前我覺得最好具備以下幾點知識：

1. HTML5，CSS3和Javascript三劍客
2. AngularJS
3. NodeJS
4. 響應式布局
5. Linux（我是ubuntu14.04）

環境搭建

安裝NodeJS

1. 直接在官網下載二進制包，並解壓
   $ tar -xvf node-v4.0.0-linux-x64.tar.gz
2. 增加軟連接
   $ sudo ln -s ./node-v4.0.0-linux-x64/bin/node /usr/bin/node
$ sudo ln -s ./node-v4.0.0-linux-x64/bin/npm /usr/bin/npm
3. 測試
   $ npm -v
$ node -v

安裝android開發環境

1. 安裝JDK
2. 安裝Android SDK，當然要FQ啦～
   $ tar -xvf android-sdk_r24.4.1-linux.tgz
$ cd android-sdk-linux && tools && ./android
下載API22和默認勾選的項目（下載這個貌似不要FQ，我關掉這個能全速下載）
3. 添加ANDROID_HOME和adb路徑， 打開～/.profile,添加兩行：
   export ANDROID_HOME=~/usr/android-sdk-linux
export PATH=$PATH:${ANDROID_HOME}/platform-tools
4. 創建一個AVD(建議使用Genymotion，原裝的太太太卡)，運行./android-sdk-linux/tools/monitor
5. 安裝Ant
6. 給大家看一下我最后的~/.profile文件

安裝cordova和Ionic

安裝Cordova

$ npm install -g cordova

安裝Ionic

$ sudo npm install -g ionic

創建一個項目

$ ionic start myApp tabs
創建了一個myApp項目，使用了tabs模板，另外還有兩個模板blank和sidemenu

添加平台並編譯(要添加ios，直接add ios)

$ cd myApp
$ ionic platform add android
$ ionic build android

在本地瀏覽器測試

$ ionic serve
打開http://localhost:8100/

在手機測試，連上adb（或者運行Genymotion），再運行下面命令

$ ionic run android

在模擬器測試(不建議使用，AVD太太太卡)

$ ionic emulate android

ok，這篇就寫到這里，下一篇項目正式開始