混合开发 Hybird Ionic Angular Cordova web 跨平台
混合开发 Hybird Ionic Angular Cordova web 跨平台 目录
目录
Ionic Ionic 简介 Ionic 和 Cordova/PhoneGap 的关系 零基础案例 环境配置 下载 淘宝镜像 cnpm 安装 ionic 查看 ionic 可以创建的模板 项目编写 创建 ionic 应用 添加Android平台: 构建应用 首页源码 应用的目录结构 Ionic Lab Ionic官网 Ionic 简介
ionic是一个用来开发混合手机应用的、开源的、免费的 使用 Ionic 需要掌握的技术:HTML、CSS、Javascript、
Ionic主要工作内容:
特点:
Ionic 和 Cordova/PhoneGap 的关系Ionic是一个用来开发混合手机应用的、开源的、免费的 PhoneGap是一个采用 ionic是一个用来解决开发跨平台应用的方案。他是建立在Cordova的基础之上的,内部实现跨平台是由Cordova来实现的。相对于Cordova而言,他多了一些东西,例如的他的样式,例如AngularJS。 通俗的讲:
至于为什么Ionic也可以打包,这是因为Ionic的打包插件是基于Phonegap/Cordova的。 关于他们之间的关系,首先我们需要明确以下概念:
Ionic和Angular Ionic/Angular和Cordova Ionic/Angular和Cordova插件
零基础案例环境配置下载ionic 下载地址:https://ionicframework.com/docs/v1/overview/#download 下载后解压压缩包,包含以下目录:
淘宝镜像 cnpm如果由于GFW导致插件下载不下来,可以用淘宝镜像来解决这个问题。 方式一:使用cnpm(China npm)代替npm:
方式一:通过更改访问地址:
安装 ionic
查看 ionic 可以创建的模板查看 ionic 可以创建的模板:
tabs 工程:这是一个包含3个页面的应用程序,每个页面有标题、内容。 项目编写创建 ionic 应用使用 ionic 提供的模板创建一个应用:
然后会提示你是否集成 ** ,选择 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 [email?protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools. npm WARN deprecated [email?protected]: The major version is no longer supported. Please update to 4.x or newer > [email?protected] install C:_Webnode.js_workplacetestAndroidionicTestnode_modulesnode-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:_Webnode.js_workplacetestAndroidionicTestnode_modulesnode-sassvendorwin32-x64-64binding.node Caching binary to C:_Webnode.jsnode_cachenode-sass4.9.0win32-x64-64_binding.node > [email?protected] postinstall C:_Webnode.js_workplacetestAndroidionicTestnode_modulesuglifyjs-webpack-plugin > node lib/post_install.js > [email?protected] postinstall C:_Webnode.js_workplacetestAndroidionicTestnode_modulesnode-sass > node scripts/build.js Binary found at C:_Webnode.js_workplacetestAndroidionicTestnode_modulesnode-sassvendorwin32-x64-64binding.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: [email?protected] (node_modulesfsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email?protected]: 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 文件夹中! 添加Android平台:添加Android平台: √ Creating .www directory for you - done! cordova platform add android --save Using cordova-fetch for [email?protected]~7.1.1 Adding android project... Creating Cordova project for the Android platform: Path: platformsandroid Package: io.ionic.starter Name: ionicTest Activity: MainActivity Android target: android-27 Android project created with [email?protected] 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项目:
这玩意可真是费劲,构建一次应用竟然也要一分钟! BUILD SUCCESSFUL in 55s 48 actionable tasks: 48 executed Built the following apk(s):...ionicTestplatformsandroidappbuildoutputsapkdebugapp-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> 应用的目录结构|-- 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 LabIonic Lab 是桌面版的开发环境,如果你不喜欢使用命令行操作,Ionic Lab 将会满足你的需求。 通过以上界面你可以完成以下操作:
2018-10-21 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |