混合开发HybirdIonicAngularCordovaweb跨平台MD

作者：Lala88童鞋_619 | 来源：互联网 | 2023-08-27 17:18

Markdown版本笔记我的GitHub首页我的博客我的微信我的邮箱MyAndroidBlogsbaiqiantaobaiqiantaobqt20094baiqiantaosina

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
官网
文档
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;
mark

添加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没有任何意义。

应用的目录结构

mark

Ionic Lab

Ionic Lab 是桌面版的开发环境&＃xff0c;如果你不喜欢使用命令行操作&＃xff0c;Ionic Lab 将会满足你的需求。
Ionic Lab 为开发者提供了一个更简单的方法来开始&＃xff0c;编译&＃xff0c;运行&＃xff0c;和模拟运行Ionic的应用程序。
下载地址&＃xff0c;貌似已经关闭了&＃xff0c;无法访问了&＃xff0c;可以通过这里直接下载。

通过以上界面你可以完成以下操作&＃xff1a;

创建应用
预览应用
编译应用
运行应用
上传应用
运行日志查看