【Ionic+AngularJS 開發】之『個人日常管理』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文件是控制器代碼)

 

具體可查看源碼文件

運行效果如下:

 

 

 

*【源碼文件

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM