Ionic4概述与demo练习
1.什么是Ionic Framework？
Ionic Framework是一个开源UI工具包，用于使用Web技术（HTML，CSS和JavaScript）构建高性能的高质量移动和桌面应用程序。
2.Ionic 核心概念
平台连续性：Platform Continuity是Ionic Framework的内置功能，允许应用程序开发人员在多个平台上使用相同的代码库。每个Ionic组件都会将其外观调整为运行应用程序的平台。例如，Apple设备（如iPhone和iPad）使用Apple自己的iOS设计语言。同样，Android设备使用Google的设计语言Material Design。通过在平台之间进行细微的设计更改，用户可以获得熟悉的应用体验。从Apple的App Store下载的Ionic应用程序将获得iOS主题，而从Android Play商店下载的Ionic应用程序将获得Material Design主题。对于从浏览器中被视为渐进式Web应用程序（PWA）的应用程序，Ionic将默认使用Material Design主题。此外，决定在某些场景中使用哪个平台是完全可配置的。
导航：传统的网络应用程序使用线性历史记录，这意味着用户可以向前导航到某个页面，并可以点击后退按钮进行导航。相比之下，移动应用程序通常使用并行的“非线性”导航。例如，选项卡式界面可以为每个选项卡分别设置导航堆栈，确保用户在导航和切换选项卡时不会失去位置。离子应用程序采用这种移动导航方法，支持也可以嵌套的并行导航历史，同时保持Web开发人员熟悉的熟悉的浏览器式导航概念。Ionic的早期版本附带我们自己的定制路由器，但为了提供最佳的工具和开发人员体验，已经转向使用框架推荐的路由器。
本机访问：Ionic应用程序的相同代码库可以在许多平台上运行，因为它基于Web标准和跨这些平台共享的通用API。Ionic最常见的用例之一是构建一个可以从App Store和Play Store下载的应用程序。iOS和Android软件开发工具包（SDK）均提供“webview”它可以渲染任何Ionic应用程序，同时仍允许完整的Native SDK访问。像Capacitor和Cordova（API在这两个官网里）这样的项目通常用于为Ionic应用程序提供对Native SDK的访问权限。这意味着开发人员可以使用常见的Web开发工具快速构建应用程序，并且仍然可以访问本机功能，例如设备的加速计，摄像头，GPS等。
主题化：Ionic Framework是使用CSS构建的，它允许我们利用CSS属性（变量）提供的灵活性。这使得设计一个看起来很棒的应用程序非常容易，同时遵循Web标准。Ionic提供一组颜色，以便开发人员可以拥有一些很棒的默认值，但Ionic鼓励覆盖它们以创建与品牌，公司或所需调色板相匹配的设计。从应用程序的背景颜色到文本颜色的所有内容都可以完全自定义。
3浏览器支持
移动端：
- Android 4.4+
- iOS 10+
pc端：
- chrome
- safari
- Edge
- firefox
4.Ionic3与4的对比
image.png
5.demo练习(JS+Ionic)
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My Courses</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@4.7.4/css/ionic.bundle.css"/>
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@4.7.4/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@4.7.4/dist/ionic/ionic.js"></script>
</head>
<body>
<ion-app>
<ion-header>
<ion-toolbar color="primary">
<ion-title>
My Courses
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-grid>
<ion-row>
<ion-col size-md="6" sizeoff-md="3">
<ion-item>
<ion-label position="floating">Course Name</ion-label>
<ion-input type="text" id="courseNameInput"></ion-input>
</ion-item>
</ion-col>
</ion-row>
<ion-row>
<ion-col size-md="6" sizeoff-md="3">
<ion-item>
<ion-label position="floating">Couese Rating(1-5)</ion-label>
<ion-input type="text" id="courseRatingInput"></ion-input>
</ion-item>
</ion-col>
</ion-row>
<ion-button id="btn-add" margin>Add</ion-button>
<ion-row>
<ion-col size-md="6" sizeoff-md="3">
<ion-list id="course-list"></ion-list>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
<ion-alert-controller></ion-alert-controller>
</ion-app>
<script src="app.js"></script>
</body>
</html>
app.js
const courseNameInput = document.querySelector('#courseNameInput');
const courseRatingInput = document.querySelector('#courseRatingInput');
const addBtn = document.querySelector('#btn-add');
const courseList = document.querySelector('#course-list');
const alertCtrl = document.querySelector('ion-alert-controller');
addBtn.addEventListener('click', () => {
const enteredCourseName = courseNameInput.value;
const enteredCourseRating = courseRatingInput.value;
if(
enteredCourseName.trim().length <= 0 ||
enteredCourseRating.trim().length <=0||
enteredCourseRating < 1 ||
enteredCourseRating > 5
){
alertCtrl.create({
header: 'Invalid Input',
message: 'Please enter a valid course name and rating',
buttons: ['Okay']
})
.then(alertEl => alertEl.present());
return;
}
const newItem = document.createElement('ion-item');
newItem.innerHTML = `<strong>${enteredCourseName}:</strong> ${enteredCourseRating}/5`
courseList.appendChild(newItem);
courseNameInput.value = '';
courseRatingInput.value = '';
})
网友评论