| Markdown版本笔记 | 我的GitHub首页 | 我的博客 | 我的微信 | 我的邮箱 |
|---|---|---|---|---|
| MyAndroidBlogs | baiqiantao | baiqiantao | bqt20094 | baiqiantao&＃64;sina.com |
混合开发 Hybird Ionic Angular Cordova web 跨平台 MD
目录 目录
Ionic
Ionic 简介
Ionic 和 Cordova/PhoneGap 的关系
零基础案例
环境配置
下载
淘宝镜像 cnpm
安装 ionic
查看 ionic 可以创建的模板
项目编写
创建 ionic 应用
添加Android平台&＃xff1a;
构建应用
首页源码
应用的目录结构
Ionic Lab Ionic
Ionic
Ionic 简介
Ionic 和 Cordova/PhoneGap 的关系
零基础案例
环境配置
下载
淘宝镜像 cnpm
安装 ionic
查看 ionic 可以创建的模板
项目编写
创建 ionic 应用
添加Android平台&＃xff1a;
构建应用
首页源码
应用的目录结构
Ionic Lab
官网
文档
API
GitHub
Ionic 简介
- Build amazing apps in one codebase, for any platform, with the web. One app running on everything
- Ionic让Web开发人员比以往更轻松地
构建&＃xff0c;测试&＃xff0c;部署和监控跨平台应用程序。 - Ionic是开源移动应用程序开发框架&＃xff0c;可以使用
Web技术轻松构建高质量的原生和渐进式[progressive]的Web应用程序。 - Ionic基于Web组件&＃xff0c;与过去的版本相比&＃xff0c;具有许多重要的性能、可用性和功能等方面的改进。
ionic是一个用来开发混合手机应用的、开源的、免费的代码库。可以优化html、css和js的性能&＃xff0c;构建高效的应用程序&＃xff0c;而且还可以用于构建Sass和AngularJS的优化。这个框架的目的是从web的角度开发手机应用&＃xff0c;基于PhoneGap的编译平台&＃xff0c;可以实现编译成各个平台的应用程序。
使用 Ionic 需要掌握的技术&＃xff1a;HTML、CSS、Javascript、Angular
- ionic 是一个强大的 HTML5 应用程序开发框架(HTML5 Hybrid Mobile App Framework)。 可以帮助您使用 Web 技术&＃xff0c;比如 HTML、CSS 和 Javascript 构建
接近原生体验的移动应用程序。 - ionic 主要
关注外观和体验&＃xff0c;以及和你的应用程序的 UI 交互&＃xff0c;特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发。 - ionic是一个轻量的
手机UI库&＃xff0c;具有速度快&＃xff0c;界面现代化、美观等特点。为了解决其他一些UI库在手机上运行缓慢的问题&＃xff0c;它直接放弃了IOS6和Android4.1以下的版本支持&＃xff0c;来获取更好的使用体验。
Ionic主要工作内容:
- 在Angular的基础上提供了更适合移动开发的一系列组件(menu,nav,card等)。
- 在cordova的基础上提供了cordova插件的Typescipt封装&＃xff0c;使得调用cordova插件更容易。
- 提供了一组图标和主题&＃xff0c;是的生成的移动应用更美观。
特点&＃xff1a;
- ionic 基于Angular语法&＃xff0c;简单易学。
- ionic 是一个轻量级框架。
- ionic 完美的融合下一代移动框架&＃xff0c;支持 Angularjs 的特性&＃xff0c; MVVM &＃xff0c;代码易维护。
- ionic 提供了漂亮的设计&＃xff0c;通过 SASS 构建应用程序&＃xff0c;它提供了很多
UI 组件来帮助开发者开发强大的应用。 - ionic 专注原生&＃xff0c;让你看不出混合应用和原生的区别
- ionic 提供了强大的命令行工具。
- ionic 性能优越&＃xff0c;运行速度快。
- ionic提供很多
css组件和Javascript UI库。 - ionic可以支持定制android和ios的插件&＃xff0c;也支持服务端REST的敏捷开发。
Ionic 和 Cordova/PhoneGap 的关系
Ionic是一个用来开发混合手机应用的、开源的、免费的代码库&＃xff0c;这个框架的目的是从web的角度开发手机应用&＃xff0c;基于PhoneGap的编译平台&＃xff0c;可以实现编译成各个平台的应用程序。
PhoneGap是一个采用HTML&＃xff0c;CSS和Javascript的技术&＃xff0c;创建移动跨平台移动应用程序的快速开发平台。它使开发者能够在网页中调用IOS&＃xff0c;Android等智能手机的核心功能&＃xff0c;包括地理定位&＃xff0c;加速器&＃xff0c;联系人&＃xff0c;声音和振动等&＃xff0c;此外PhoneGap拥有丰富的插件可以调用。
ionic是一个用来解决开发跨平台应用的方案。他是建立在Cordova的基础之上的&＃xff0c;内部实现跨平台是由Cordova来实现的。相对于Cordova而言&＃xff0c;他多了一些东西&＃xff0c;例如的他的样式&＃xff0c;例如AngularJS。
通俗的讲&＃xff1a;
- Ionic是一款
H5混合移动app开发框架(HTML5 Hybrid Mobile App Framework) - Phonegap是一款可以
打包并且可以让JS调用原生功能的移动app框架
至于为什么Ionic也可以打包&＃xff0c;这是因为Ionic的打包插件是基于Phonegap/Cordova的。
关于他们之间的关系&＃xff0c;首先我们需要明确以下概念&＃xff1a;
- 即使我们将移动端web页面做得和原生应用及其相似&＃xff0c;在我们的页面中也无法像原生应用那样调用原生的能力&＃xff0c;当然通过输入框触发键盘、图库、拍照等操作不在这里“调用原生能力”的范畴。
- 单纯的web页面不能提交到应用商店被用户使用。
Ionic和Angular
首先要明确的是Ionic是Angular的衍生品&＃xff0c;Angular是单独的JS库&＃xff0c;和jQuery一样能够独立用于开发应用&＃xff0c;而Ionic只是对Angular进行了扩展&＃xff0c;利用Angular实现了很多符合移动端应用的组件&＃xff0c;并搭建了很完善的样式库&＃xff0c;是对Angular最成功的应用样例。即使不使用Ionic&＃xff0c;Angular也可与任意样式库&＃xff0c;如Bootstrap、Foundation等搭配使用&＃xff0c;得到想要的页面效果。
Ionic/Angular和Cordova
可能会有人被问道&＃xff1a;Cordova比Ionic/Angular好吗&＃xff1f;这就很尴尬了&＃xff0c;根本是毫无意义的问题。它们在混合开发中扮演的是不同的角色&＃xff1a;Ionic/Angular负责页面的实现&＃xff0c;而Cordova负责将实现的页面包装成原生应用&＃xff08;Android:apk&＃xff1b;iOS:ipa&＃xff09;。包装完成之后我们的页面才有可能调用设备的原生能力&＃xff0c;最后才能上传到应用商店被用户使用。
Ionic/Angular和Cordova插件
- Cordova插件的作用是提供一个桥梁供页面和原生通信&＃xff0c;因为我们的页面不能直接调用设备能力&＃xff0c;所以需要与能够调用设备能力的原生代码&＃xff08;android:Java&＃xff1b;ios:OC&＃xff09;通信&＃xff0c;此时就需要Cordova插件了。
- Cordova插件能够在任何Cordova工程中使用&＃xff0c;和使用什么前端框架&＃xff08;如Ionic&＃xff09;无关。
- Ionic2 中封装了
Ionic Native&＃xff0c;方便了Cordova插件的使用&＃xff0c;但在 Ionic2 中仍然可以像 Ionic1 中一样使用Cordova插件&＃xff0c;Ionic Native 不是必须的。 - 即使在 Ionic2 中使用了 Ionic Native&＃xff0c;也首先需要手动添加插件&＃xff0c;如&＃xff1a;
cordova plugin add cordova-plugin-pluginName。
零基础案例 环境配置
下载
ionic 下载地址&＃xff1a;https://ionicframework.com/docs/v1/overview/#download
ionic-v1.3.3.zip
下载后解压压缩包&＃xff0c;包含以下目录&＃xff1a;
| 目录 | 作用 |
|---|---|
| css | 样式文件目录 |
| fonts | 字体文件目录 |
| js | Javascript文件目录 |
| version.json | 当前版本更新说明文件 |
淘宝镜像 cnpm
如果由于GFW导致插件下载不下来&＃xff0c;可以用淘宝镜像来解决这个问题。
方式一&＃xff1a;使用cnpm(China npm)代替npm&＃xff1a;
- 首先安装 cnpm&＃xff1a;
npm install -g cnpm --registry&＃61;https://registry.npm.taobao.org - 查看cnpm版本信息&＃xff1a;
cnpm -v - 安装完成后&＃xff0c;以后就可以使用cnpm这个命令来安装插件&＃xff1a;
cnpm install -g ionic
方式一&＃xff1a;通过更改访问地址&＃xff1a;
- 更改前的原始源地址为:
npm config set registry https://registry.npmjs.org/ - 更改为镜像淘宝源地址&＃xff1a;
npm config set registry https://registry.npm.taobao.org/ - 查证自己所切换的源路径&＃xff1a;
npm config get registry
安装 ionic
- 查看安装的 ionic 版本信息&＃xff1a;
ionic -v - 如果找不到&＃xff0c;执行以下命令安装 ionic&＃xff1a;
npm install -g ionic - 如果你已经安装&＃xff0c;可以执行以下命令来更新版本:
npm update -g ionic - 卸载ionic&＃xff1a;
npm uninstall -g ionic - 清除缓存&＃xff1a;
npm cache clean --force
查看 ionic 可以创建的模板
查看 ionic 可以创建的模板&＃xff1a;ionic start --list
| name | project type | description | 功能 |
|---|---|---|---|
| blank | angular | A blank starter project | 空白项目 |
| blank | ionic-angular | A blank starter project | 空白项目 |
| blank | ionic1 | A blank starter project for Ionic | 空白项目 |
| tabs | angular | A starting project with a simple tabbed interface | 包含底部分页 |
| tabs | ionic-angular | A starting project with a simple tabbed interface | 包含底部分页 |
| tabs | ionic1 | A starting project for Ionic using a simple tabbed interface | 包含底部分页 |
| sidemenu | angular | A starting project with a side menu with navigation in the content area | 包含滑动菜单 |
| sidemenu | ionic-angular | A starting project with a side menu with navigation in the content area | 包含滑动菜单 |
| sidemenu | ionic1 | A starting project for Ionic using a side menu with navigation in the content area | 包含滑动菜单 |
| super | ionic-angular | A starting project complete with pre-built pages, providers and best practices for Ionic development. | 包含推荐的开发实践的完整项目(页面,服务划分等) |
| tutorial | ionic-angular | A tutorial based project that goes along with the Ionic documentation | 教程项目 |
| aws | ionic-angular | AWS Mobile Hub Starter | Amazon 移动应用 |
| maps | ionic1 | An Ionic starter project using Google Maps and a side menu | 包含地图 |
tabs 工程&＃xff1a;这是一个包含3个页面的应用程序&＃xff0c;每个页面有标题、内容。
项目编写
创建 ionic 应用
使用 ionic 提供的模板创建一个应用&＃xff1a;ionic start projectName [templateName]
例如&＃xff1a;ionic start ionicTest tabs
使用此命令时会提示让你用 ionic4 创建应用&＃xff1a;
You are about to create an Ionic 3 app. Would you like to try Ionic 4 (beta)?
Ionic 4 uses the power of the modern Web and embraces拥抱 the Angular CLI and Angular Router to bring you the best version of Ionic ever.
然后会提示你是否集成 ** &＃xff0c;选择 Y 之后会下载大量的东西&＃xff0c;如果不使用淘宝镜像&＃xff0c;根本不可能下载成功&＃xff1a;
? Integrate your new app with Cordova to target native iOS and Android?
Yes> ionic integrations enable cordova --quiet
[INFO] Downloading integration cordova
[INFO] Copying integrations files to project
[OK] Integration cordova added!Installing dependencies may take several minutes.* IONIC DEVAPP *Speed up development with the Ionic DevApp, our fast, on-device testing mobile app- Test on iOS and Android without Native SDKs- LiveReload for instant style and JS updates--> Install DevApp: https://bit.ly/ionic-dev-app <--
────────────────────────────────────────────────────────────────────────────────────
> npm i
npm WARN deprecated browserslist&＃64;2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated hoek&＃64;2.16.3: The major version is no longer supported. Please update to 4.x or newer> node-sass&＃64;4.9.0 install C:\_Web\node.js\_workplace\testAndroid\ionicTest\node_modules\node-sass
> node scripts/install.jsDownloading binary from https://github.com/sass/node-sass/releases/download/v4.9.0/win32-x64-64_binding.node
Download complete ] - :
Binary saved to C:\_Web\node.js\_workplace\testAndroid\ionicTest\node_modules\node-sass\vendor\win32-x64-64\binding.node
Caching binary to C:\_Web\node.js\node_cache\node-sass\4.9.0\win32-x64-64_binding.node> uglifyjs-webpack-plugin&＃64;0.4.6 postinstall C:\_Web\node.js\_workplace\testAndroid\ionicTest\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.js> node-sass&＃64;4.9.0 postinstall C:\_Web\node.js\_workplace\testAndroid\ionicTest\node_modules\node-sass
> node scripts/build.jsBinary found at C:\_Web\node.js\_workplace\testAndroid\ionicTest\node_modules\node-sass\vendor\win32-x64-64\binding.node
Testing binary
Binary is fine
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents&＃64;1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents&＃64;1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})added 709 packages from 634 contributors in 426.888s
> git init
Initialized empty Git repository in C:/_Web/node.js/_workplace/testAndroid/ionicTest/.git/* IONIC PRO *Supercharge your Ionic development with the Ionic Pro SDK- Track runtime errors in real-time, back to your original TypeScript- Push remote updates and skip the app store queueLearn more about Ionic Pro: https://ionicframework.com/pro
────────────────────────────────────────────────────────────────────────────────────
废了九牛二虎之力才下载完&＃xff0c;下的东西基本都在项目的 node_modules 文件夹中&＃xff01; 
添加Android平台&＃xff1a;
添加Android平台&＃xff1a;ionic cordova platform add android
卧槽&＃xff0c;输入命令后又是一顿猛操作&＃xff0c;噼里啪啦的给我下载了一堆东西&＃xff0c;耗时也至少有5分钟。
√ Creating .\www directory for you - done!
cordova platform add android --save
Using cordova-fetch for cordova-android&＃64;~7.1.1
Adding android project...
Creating Cordova project for the Android platform:Path: platforms\androidPackage: io.ionic.starterName: ionicTestActivity: MainActivityAndroid target: android-27
Android project created with cordova-android&＃64;7.1.1
Android Studio project detected
Android Studio project detected
Discovered plugin "cordova-plugin-whitelist" in config.xml. Adding it to the project
Installing "cordova-plugin-whitelist" for androidThis plugin is only applicable for versions of cordova-android greater than 4.0. If you have a previous platform version, you do *not* need this plugin since the whitelist will be built in.Adding cordova-plugin-whitelist to package.json
Saved plugin info for "cordova-plugin-whitelist" to config.xml
Discovered plugin "cordova-plugin-statusbar" in config.xml. Adding it to the project
Installing "cordova-plugin-statusbar" for android
Adding cordova-plugin-statusbar to package.json
Saved plugin info for "cordova-plugin-statusbar" to config.xml
Discovered plugin "cordova-plugin-device" in config.xml. Adding it to the project
Installing "cordova-plugin-device" for android
Adding cordova-plugin-device to package.json
Saved plugin info for "cordova-plugin-device" to config.xml
Discovered plugin "cordova-plugin-splashscreen" in config.xml. Adding it to the project
Installing "cordova-plugin-splashscreen" for android
又是废了九牛二虎之力才下载完。
构建应用
构建Android项目&＃xff1a;ionic cordova build android
构建后直接运行&＃xff1a;ionic cordova run android
应该之前 cordova 的命令他也都能用
这玩意可真是费劲&＃xff0c;构建一次应用竟然也要一分钟&＃xff01;
BUILD SUCCESSFUL in 55s
48 actionable tasks: 48 executed
Built the following apk(s):...\ionicTest\platforms\android\app\build\outputs\apk\debug\app-debug.apk
首页源码
注意&＃xff0c;和使用cordova创建的项目不同&＃xff0c;ionic项目的www目录并不是源码目录&＃xff0c;而是运行时候生成的目录&＃xff0c;源码是在src目录下的&＃xff0c;要修改index.html&＃xff0c;只有修改src目录下的index.html才有效&＃xff0c;修改www目录下的index.html没有任何意义。
应用的目录结构
|-- resources/ * 资源文件,分为Android和Ios
|
|-- src/
| |-- app/
| | |── app.component.ts * 入口组件
| | |── app.module.ts * 主模块
| | |── app.html * 主组件页面布局
| | |── app.scss * 全局Sass
| | |── main.ts * 主程序
| |
| |-- assets/
| | |── icon/
| | | |── favicon.ico * 页面图标
| | |
| | |── imgs/
| | |── logo.png * 程序logo
| |
| |-- pages/ * 包含所有的页面
| | |── about/ * 关于页面 page
| | | |── about.html * 关于页面 template
| | | |── about.ts * 关于页面 code
| | | |── about.scss * 关于页面 stylesheet
| | |
| | |── contact/ * 联系人页面 page
| | | |── contact.html * 联系人页面 template
| | | |── contact.ts * 联系人页面 code
| | | |── contact.scss * 联系人页面stylesheet
| | |
| | |── home/ * 主页面 page
| | | |── home.html * 主页面 template
| | | |── home.ts * 主页面 code
| | | |── home.scss * 主页面 stylesheet
| | |
| | |
| | |── tabs/ * 分页 page
| | | |── tabs.html * 分页 template
| | | |── tabs.ts * 分页 code
| |
| |── providers/ * 包含所有的可注入服务
| |
| |── theme/ * 应用主题文件
| | |── variables.scss * 应用scss变量
| |
| |-- index.html
|
|-- typings/ * Javascript 类型声明
| |── cordova-typings.d.ts
|
|-- www/ * ionic serve 运行时候生成站点目录
| |── assets/
| | |── data/
| | |
| | |── fonts/
| | |
| | |── img/
| |
| |── build/
| |
| |── index.html
| |
| |── manifest.json
| |
| |── service-worker.js
|
|── .editorconfig * 代码风格
|── .gitignore * git忽略文件
|── LICENSE * License 文件
|── README.md * Readme
|── config.xml * Cordova 配置文件
|── ionic.config.json * Ionic 配置文件
|── package.json * Javascript 工程文件
|── tsconfig.json * typescript 编译配置文件
|── tslint.json * TypeScript 书写规范规则文件
Ionic Lab
Ionic Lab 是桌面版的开发环境&＃xff0c;如果你不喜欢使用命令行操作&＃xff0c;Ionic Lab 将会满足你的需求。
Ionic Lab 为开发者提供了一个更简单的方法来开始&＃xff0c;编译&＃xff0c;运行&＃xff0c;和模拟运行Ionic的应用程序。
下载地址&＃xff0c;貌似已经关闭了&＃xff0c;无法访问了&＃xff0c;可以通过这里 直接下载。
通过以上界面你可以完成以下操作&＃xff1a;
- 创建应用
- 预览应用
- 编译应用
- 运行应用
- 上传应用
- 运行日志查看
Ionic Lab 目前已停止更新。
2018-10-21
京公网安备 11010802041100号