基于Ionic框架的移动APP开发

时间:2024-03-15 19:39:32

一、基础知识认知

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框架的移动APP开发

ionic CLI 可以在浏览器种运行app:ionic serve

安装平台工具:需要在模拟器或设备上继续开发,安装原生App开发工具,(这部分内容省略,有点复杂)

二、ionic命令行界面

CLI,这个是使用npm安装它

ionic --help

创建一个ionic项目:ionic start myapp --(会提示你选择模板,blank,sidemenu,tabs),还有其他模板通过url链接

管理cordova插件:ionic cordova plugin add [email protected]

        移除:ionic cordova plugin rm [email protected]

        查看: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基础知识认知