混合开发 Hybird Ionic Angular Cordova web 跨平台 MD

时间  2019-11-11
标签 混合 开发 hybird ionic angular cordova web 跨平台 栏目 AngularJS 繁體版
原文   原文链接
Markdown版本笔记 个人GitHub首页 个人博客 个人微信 个人邮箱
MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina.com

混合开发 Hybird Ionic Angular Cordova web 跨平台 MDjavascript

目录

目录
Ionic
Ionic 简介
Ionic 和 Cordova/PhoneGap 的关系
零基础案例
环境配置
下载
淘宝镜像 cnpm
安装 ionic
查看 ionic 能够建立的模板
项目编写
建立 ionic 应用
添加Android平台：
构建应用
首页源码
应用的目录结构
Ionic Lab

Ionic

官网
文档
API
GitHub css

Ionic 简介

  • Build amazing apps in one codebase, for any platform, with the web. One app running on everything
  • Ionic让Web开发人员比以往更轻松地构建，测试，部署和监控跨平台应用程序。
  • Ionic是开源移动应用程序开发框架，可使用Web技术轻松构建高质量的原生和渐进式[progressive]的Web应用程序。
  • Ionic基于Web组件，与过去的版本相比，具备许多重要的性能、可用性和功能等方面的改进。

ionic是一个用来开发混合手机应用的、开源的、免费的代码库。能够优化html、css和js的性能，构建高效的应用程序，并且还能够用于构建Sass和AngularJS的优化。这个框架的目的是从web的角度开发手机应用，基于PhoneGap的编译平台，能够实现编译成各个平台的应用程序。html

使用 Ionic 须要掌握的技术：HTML、CSS、Javascript、Angular前端

  • ionic 是一个强大的 HTML5 应用程序开发框架(HTML5 Hybrid Mobile App Framework)。 能够帮助您使用 Web 技术，好比 HTML、CSS 和 Javascript 构建接近原生体验的移动应用程序。
  • ionic 主要关注外观和体验，以及和你的应用程序的 UI 交互，特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发。
  • ionic是一个轻量的手机UI库，具备速度快，界面现代化、美观等特色。为了解决其余一些UI库在手机上运行缓慢的问题，它直接放弃了IOS6和Android4.1如下的版本支持，来获取更好的使用体验。

Ionic主要工做内容:java

  • 在Angular的基础上提供了更适合移动开发的一系列组件(menu,nav,card等)。
  • 在cordova的基础上提供了cordova插件的Typescipt封装，使得调用cordova插件更容易。
  • 提供了一组图标和主题，是的生成的移动应用更美观。

特色：node

  • ionic 基于Angular语法，简单易学。
  • ionic 是一个轻量级框架。
  • ionic 完美的融合下一代移动框架，支持 Angularjs 的特性， MVVM ，代码易维护。
  • ionic 提供了漂亮的设计，经过 SASS 构建应用程序，它提供了不少 UI 组件来帮助开发者开发强大的应用。
  • ionic 专一原生，让你看不出混合应用和原生的区别
  • ionic 提供了强大的命令行工具。
  • ionic 性能优越，运行速度快。
  • ionic提供不少css组件和javascript UI库。
  • ionic能够支持定制android和ios的插件，也支持服务端REST的敏捷开发。

Ionic 和 Cordova/PhoneGap 的关系

Ionic是一个用来开发混合手机应用的、开源的、免费的代码库，这个框架的目的是从web的角度开发手机应用，基于PhoneGap的编译平台，能够实现编译成各个平台的应用程序。android

PhoneGap是一个采用HTML，CSS和JavaScript的技术，建立移动跨平台移动应用程序的快速开发平台。它使开发者可以在网页中调用IOS，Android等智能手机的核心功能，包括地理定位，加速器，联系人，声音和振动等，此外PhoneGap拥有丰富的插件能够调用。webpack

ionic是一个用来解决开发跨平台应用的方案。他是创建在Cordova的基础之上的，内部实现跨平台是由Cordova来实现的。相对于Cordova而言，他多了一些东西，例如的他的样式，例如AngularJS。ios

通俗的讲：git

  • Ionic是一款H5混合移动app开发框架(HTML5 Hybrid Mobile App Framework)
  • Phonegap是一款能够打包而且能够让JS调用原生功能的移动app框架

至于为何Ionic也能够打包，这是由于Ionic的打包插件是基于Phonegap/Cordova的。

关于他们之间的关系，首先咱们须要明确如下概念：

  • 即便咱们将移动端web页面作得和原生应用及其类似，在咱们的页面中也没法像原生应用那样调用原生的能力，固然经过输入框触发键盘、图库、拍照等操做不在这里“调用原生能力”的范畴。
  • 单纯的web页面不能提交到应用商店被用户使用。

Ionic和Angular
首先要明确的是Ionic是Angular的衍生品，Angular是单独的JS库，和jQuery同样可以独立用于开发应用，而Ionic只是对Angular进行了扩展，利用Angular实现了不少符合移动端应用的组件，并搭建了很完善的样式库，是对Angular最成功的应用样例。即便不使用Ionic，Angular也可与任意样式库，如Bootstrap、Foundation等搭配使用，获得想要的页面效果。

Ionic/Angular和Cordova
可能会有人被问道：Cordova比Ionic/Angular好吗？这就很尴尬了，根本是毫无心义的问题。它们在混合开发中扮演的是不一样的角色：Ionic/Angular负责页面的实现，而Cordova负责将实现的页面包装成原生应用（Android:apk；iOS:ipa）。包装完成以后咱们的页面才有可能调用设备的原生能力，最后才能上传到应用商店被用户使用。

Ionic/Angular和Cordova插件

  • Cordova插件的做用是提供一个桥梁供页面和原生通讯，由于咱们的页面不能直接调用设备能力，因此须要与可以调用设备能力的原生代码（android:Java；ios:OC）通讯，此时就须要Cordova插件了。
  • Cordova插件可以在任何Cordova工程中使用，和使用什么前端框架（如Ionic）无关。
  • Ionic2 中封装了Ionic Native，方便了Cordova插件的使用，但在 Ionic2 中仍然能够像 Ionic1 中同样使用Cordova插件，Ionic Native 不是必须的。
  • 即便在 Ionic2 中使用了 Ionic Native，也首先须要手动添加插件，如：cordova plugin add cordova-plugin-pluginName。

零基础案例

环境配置

下载

ionic 下载地址：https://ionicframework.com/docs/v1/overview/#download
ionic-v1.3.3.zip

下载后解压压缩包，包含如下目录：

目录 做用
css 样式文件目录
fonts 字体文件目录
js Javascript文件目录
version.json 当前版本更新说明文件

淘宝镜像 cnpm

若是因为GFW致使插件下载不下来，能够用淘宝镜像来解决这个问题。

方式一：使用cnpm(China npm)代替npm：

  • 首先安装 cnpm：npm install -g cnpm --registry=https://registry.npm.taobao.org
  • 查看cnpm版本信息：cnpm -v
  • 安装完成后，之后就可使用cnpm这个命令来安装插件：cnpm install -g ionic

方式一：经过更改访问地址：

  • 更改前的原始源地址为: npm config set registry https://registry.npmjs.org/
  • 更改成镜像淘宝源地址：npm config set registry https://registry.npm.taobao.org/
  • 查证本身所切换的源路径：npm config get registry

安装 ionic

  • 查看安装的 ionic 版本信息：ionic -v
  • 若是找不到，执行如下命令安装 ionic：npm install -g ionic
  • 若是你已经安装，能够执行如下命令来更新版本:npm update -g ionic
  • 卸载ionic：npm uninstall -g ionic
  • 清除缓存：npm cache clean --force

查看 ionic 能够建立的模板

查看 ionic 能够建立的模板：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 工程：这是一个包含3个页面的应用程序，每一个页面有标题、内容。

项目编写

建立 ionic 应用

使用 ionic 提供的模板建立一个应用：ionic start projectName [templateName]
例如：ionic start ionicTest tabs

使用此命令时会提示让你用 ionic4 建立应用：
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.

而后会提示你是否集成 ** ，选择 Y 以后会下载大量的东西，若是不使用淘宝镜像，根本不可能下载成功：

? 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@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated hoek@2.16.3: The major version is no longer supported. Please update to 4.x or newer

> node-sass@4.9.0 install C:\_Web\node.js\_workplace\testAndroid\ionicTest\node_modules\node-sass
> node scripts/install.js

Downloading 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@0.4.6 postinstall C:\_Web\node.js\_workplace\testAndroid\ionicTest\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.js

> node-sass@4.9.0 postinstall C:\_Web\node.js\_workplace\testAndroid\ionicTest\node_modules\node-sass
> node scripts/build.js

Binary 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@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@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 queue

 Learn more about Ionic Pro: https://ionicframework.com/pro
────────────────────────────────────────────────────────────────────────────────────

废了九牛二虎之力才下载完，下的东西基本都在项目的 node_modules 文件夹中！
mark

添加Android平台：

添加Android平台：ionic cordova platform add android
卧槽，输入命令后又是一顿猛操做，噼里啪啦的给我下载了一堆东西，耗时也至少有5分钟。

√ Creating .\www directory for you - done!
cordova platform add android --save
Using cordova-fetch for cordova-android@~7.1.1
Adding android project...
Creating Cordova project for the Android platform:
        Path: platforms\android
        Package: io.ionic.starter
        Name: ionicTest
        Activity: MainActivity
        Android target: android-27
Android project created with cordova-android@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 android

This 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项目：ionic cordova build android
构建后直接运行：ionic cordova run android

应该以前 cordova 的命令他也都能用

这玩意可真是费劲，构建一次应用居然也要一分钟！

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

首页源码

注意，和使用cordova建立的项目不一样，ionic项目的www目录并非源码目录，而是运行时候生成的目录，源码是在src目录下的，要修改index.html，只有修改src目录下的index.html才有效，修改www目录下的index.html没有任何意义。

<!DOCTYPE html>
<html lang="en" dir="ltr">

    <head>
        <script data-ionic="inject">
            (function(w) {
                var i = w.Ionic = w.Ionic || {};
                i.version = '3.9.2';
                i.angular = '5.2.11';
                i.staticDir = 'build/';
            })(window);
        </script>
        <meta charset="UTF-8">
        <title>Ionic App</title>
        <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">

        <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
        <link rel="manifest" href="manifest.json">
        <meta name="theme-color" content="#4e8ef7">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">

        <script src="cordova.js"></script>
        <link href="build/main.css" rel="stylesheet">
    </head>

    <body>
        <ion-app></ion-app>
        <script src="build/polyfills.js"></script>
        <script src="build/vendor.js"></script>
        <script src="build/main.js"></script>
    </body>

</html>

应用的目录结构

mark

|-- 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 是桌面版的开发环境，若是你不喜欢使用命令行操做，Ionic Lab 将会知足你的需求。
Ionic Lab 为开发者提供了一个更简单的方法来开始，编译，运行，和模拟运行Ionic的应用程序。
下载地址，貌似已经关闭了，没法访问了，能够经过这里 直接下载。

经过以上界面你能够完成如下操做：

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

mark

Ionic Lab 目前已中止更新。

2018-10-21

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程