公司里要用到 Ionic 做移動App 混合開發
一個環境搭建折騰了好幾天。一是公司權限問題,二是網絡問題,你懂得。
Ionic 環境搭建官網有教程。本來幾行命令就能搞定的事,一旦遇到網絡問題,就蛋疼了。慢的要死
Ionic 框架簡單了解了一下,由於是基於Anjular.js的,擁有Anjular.js的一些獨有特性。比之前接觸過的JS ,jQuery ,jQueryMobile要強大且方便的多。
安裝ionic 框架,正常流程官網有詳細介紹,如果人品較好,分分鍾鍾就搞好了,還有一種情況,像我這樣悲催,網絡問題,試了幾十遍還是沒成功。
好在最后用了比較給力的網,折騰一周才搞定。
mac正常流程:
1、安裝Node.js。(最新版本4.1一定是集成了npm 這個包管理工具的)
2、終端上執行命令,$sudo npm install -g cordova 安裝cordova
3、終端上執行命令,$sudo npm install -g ionic 安裝ionic
當然你可以兩行命令合在一起,$sudo npm install -g corvoda ionic
順利的話,稍等片刻就能安裝成功。接下來可以用命令行新建一個工程:
4、終端上執行命令,$ionic start myApp blank 新建一個空工程
或者$ionic start myApp tabs 新建一個帶tab框架的工程
或者$ionic start myApp sidemenu 新建一個帶側邊欄的工程
5、cd myApp 到工程目錄下,一般工程會users/yourUserName/myApp目錄下。
6、添加iOS 運行平台。$ionc platform add ios
7、build $ionic build ios
8、在iOS模擬器上運行,$ionic emulate ios 查看效果
下面簡單說一下我遇到的情況:
1、安裝Node.js 下載比較慢。耐心就行。
2、安裝cordova.一般用npm 的源:可以用命令查看 $npm config list -l 看到一個registry=http://就能安裝上,視網速而定。如果不能,在終端執行命令:$ npm set registry https://registry.npm.taobao.org
將源改為 淘寶鏡像。這時corvoda一般能安裝成功了。安裝cordova 一般不會有太大問題。問題多出在安裝ionic .
3、在不改變淘寶源的情況下,用命令試試。兩個同事用的$npm 的源都沒問題,如果出現ERR, retry 就是網絡的原因了。ERR socket hung up 也是網絡的問題。這些網絡問題,一般在很少人使用網絡的時候應該會好點,我在將registry 改為: http://registry.cnpmjs.org/ 后竟然成功了。
總結一下。大多問題的出現是因為網絡。我就把github上npm 和ionic 的issue 都看了一遍,還有一些中國的同學遇到類似問題,大多是因為網絡問題,vpn並不好使。npm 的registry 設置成 http://registry.cnpmjs.org 會好一點,謝謝cnpm那些熱心的人.還有一點是因為如果一次安裝ionic 不成功,就不要多次嘗試了,npm的包之間的依賴貌似很麻煩,沒深入了解,就不多談它了,可以把$npm cache clean,一下。如果還不行,建議把Node.js 卸載重新安裝。卸載方法:
把一下代碼放到一個文本編輯器里。保存,取名uninstall_node.sh
#!/bin/bash
lsbom -f -l -s -pf /var/db/receipts/org.nodejs.pkg.bom \
| while read i; do
sudo rm /usr/local/${i}
done
sudo rm -rf /usr/local/lib/node \
/usr/local/lib/node_modules \
/var/db/receipts/org.nodejs.*
然后將該文件拖到終端執行一下,為了防止有些刪除不完全,如有提示顯示:permission denied可以 做完上一步操作后執行一下代碼:
$chmod 777 uninstall_node.sh
然后:找到目錄
usr/local/bin
usr/local/lib
把里面有關 node 、node_moudel的文件夾全部刪除
重啟一下mac 再安裝node.js
關於npm這個包管理工具的具體內部機制,我也不太清楚,因為只是把它當做工具。方便就行。有興趣的同學可以參考http://cnpmjs.org/。
希望搭建ionic 的同學不要遇到我這么悲催的情況。
以上過程參考了許多網上的資料,在此謝過各位分享自己經驗的熱心人。