创建一个包含基本元素的HTML页面:
创建一个文件夹ionic-javascript-template
,然后在它内部创建文件index.html
,并添加以下内容:
<html>
<head>
<title>Ionic 4 JavaScript Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body>
<script src="src/index.js"></script>
</body>
</html>
在项目的文件夹中创建一个package.json
,然后添加以下内容:
{
"name": "ionic-javascript-template",
"version": "1.0.0",
"description": "Simple Ionic 4 Web Components Template",
"main": "index.html",
"scripts": {
"start": "serve"
}
,"dependencies":{
}
,"devDependencies":{"serve":""
}
}
接下来运行以下命令安装依赖项:
npm install
现在创建一个src
文件夹,你可以放置JavaScript文件,
document.body.innerHTML = `
<h1>Ionic 4 Web Components Template</h1>
<div>
Hello World
</div>
`;
有两个命令可用于npm start
和npm build
。
打开终端窗口,并运行npm start
以打开dev服务器,然后可以在浏览器中打开http://localhost:5000
,查看应用程序。
首先,你需要使用npm安装@ionic/core
软件包:
npm install --save @ionic/core
接下来,你需要包括 node_modules/@ionic/core/dist/ionic.js
index.html
文件中的文件:
<script src='node_modules/@ionic/core/dist/ionic.js'></script>
现在修改src/index.js
以使用一些Ionic核心web组件:
document.getElementById("app").innerHTML = `
<ion-app>
<ion-header>
<ion-toolbar color='primary'>
<ion-title>Ionic JavaScript Starter</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
Hello Ionic 4
</ion-content>
</ion-app>
`;
使用各种组件:
<ion-app>
:[App是Ionic应用程序的容器元素,每个项目只能有一个<ion-app>
元素,应用程序可以包含许多Ionic组件,包括菜单,页眉,内容和页脚,覆盖组件在呈现时被附加到<ion-app>
,]<ion-header>
<ion-toolbar>
<ion-title>
<ion-content>
对于按钮,你需要使用<ion-button>
组件,所以在上一页<ion-content>
中添加:
<ion-button id="printToConsole"> Print To Console
</ion-button>
现在,如何将操作附加到此按钮?
var printToConsoleBtn = document.querySelector("#printToConsole");
下一步使用addEventListener()
将click事件附加到打印到控制台的简单处理程序。
printToConsoleBtn.addEventListener('click',(e)=>{
console.log("Button clicked!");
}
);
相关文章