基於Ionic框架的移動APP開發


一、基礎知識認知

ionic框架是HTML、css、JavaScript用戶界面框架,用於混合移動APP開發,包括(用戶界面組件,強大的接口(CLI),附屬的服務(ionic view 和ionic creator)

最上層:Ionic框架自身

中間層:AngularJS(web 應用框架)

最下層:Apache Cordova 允許web應用程序調用設備原生能力並將app轉換成原生app

混合移動app:試用一種原始的web瀏覽器來運行web應用,在原生設備和webview(瀏覽器)之間使用一個原生app容器進行橋接

Angular的目的是提供一個用於構建復雜的單頁面web app的MVW(model-view-whatever)框架

cordova提供了webview和設備原生層之間的接口,(搭建腳手架、編譯和部署移動應用)

HTML:app的基本結構,CSS:app的可視樣式, JavaScript:app的邏輯和流程控制。

安裝工具:node.js、git、ionic、apache cordova,

查看版本號:node -v,npm -v ,git --version,cordova -v,ionic -v,

安裝:npm install npm -g,npm  install -g cordova,npm install -g ionic,

新建Ionic項目:當前目錄下,ionic start testApp --v2,默認使用tabs模板

ionic項目文件結構:

ionic CLI 可以在瀏覽器種運行app:ionic serve

安裝平台工具:需要在模擬器或設備上繼續開發,安裝原生App開發工具,(這部分內容省略,有點復雜)

二、ionic命令行界面

CLI,這個是使用npm安裝它

ionic --help

創建一個ionic項目:ionic start myapp --(會提示你選擇模板,blank,sidemenu,tabs),還有其他模板通過url鏈接

管理cordova插件:ionic cordova plugin add cordova-plugin-inappbrowser@latest

        移除:ionic cordova plugin rm cordova-plugin-inappbrowser@latest

        查看:ionic cordova plugin ls

ionic 生成器添加屬於自己的頁面等東西 ionic g page mypage,

ionic serve --lab,該命令會在一個瀏覽器窗口現實iOS框架、Android框架,Windows框架

ionic App的流程構建:創建腳手架:ionic start,指定編譯平台:ionic cordova platform,構造模擬器:Android studio,運行ionic app :ionic run,輸出日志:--consolelogs,

三、Angular 和TypeScript基礎知識認知

 


免責聲明!

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



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