寫在前面的話 過去一年自己接觸了不少手機前端開發,得益於現在手機性能的提升和4G普及,感覺使用混合技術開發手機App已經可以滿足越來越多的應用場景了。新年伊始,對自己2016年所學知識做一個階段性總結,記錄一個自製的“小而萌”Hybrid App開發歷程,共勉! 〖擴展閱讀〗 企業移動應用開發 混合 ...
寫在前面的話
過去一年自己接觸了不少手機前端開發,得益於現在手機性能的提升和4G普及,感覺使用混合技術開發手機App已經可以滿足越來越多的應用場景了。新年伊始,對自己2016年所學知識做一個階段性總結,記錄一個自製的“小而萌”Hybrid App開發歷程,共勉!
〖擴展閱讀〗
App預覽
(*模糊化的個人數據)
簡介
個人日常管理App,簡稱PDM(Personal Daily Management),大數據時代的小數據記錄工具,可進行日常記賬、活動記錄、事項規劃,科學合理安排個人消費、辦公學習。
使用技術
Ionic+AngularJS+SQLite
〖擴展閱讀〗
設計與開發
開發環境搭建(Android)
- 安裝node
- 安裝Android SDK
- 安裝Python(後面安裝npm插件什麼的可能用到)
- 安裝cnpm(npm大中華版,安裝好node後命令行:npm install -g cnpm)
搭建開發環境,並創建工程
創建ionic項目
1 ionic start PDM
本來是一條命令就能簡單搞定的事,在國內就行不太通了——網路卡半天。這裡介紹另一種“曲折立項”的方法,命令行分裂式開始:
1 ionic start PDM --v1 --skip-npm 2 cd PDM 3 cnpm install --save
至此,項目創建好,命令行在項目所在目錄,輸入:
1 ionic serve
就可看到(官方Tabs模板的)運行效果了
搭建框架
目錄一覽
項目的主要功能實現都在www目錄下,重點看以下文件:
- www/js/app.js ——項目初始化,自定義各種功能等
- www/views/* —— 這是本項目各個界面的實現代碼(按一個界面一個子目錄區分開來,html文件時視圖,js文件是控制器代碼)
具體可查看源碼文件
運行效果如下:
〖擴展閱讀〗
*【源碼文件】
作者:Ken
出處:http://www.cnblogs.com/glife/
本文版權歸作者和博客園共有,歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文連接,否則保留追究法律責任的權利。