一、软件安装
二、掌握前端基础知识
视频学习教程:https://www.bilibili.com/video/BV1sf4y1k7dr?p=1
三、HelloWorld入门
打开软件以后,选择创建JS开发页面
新建成功后,会发现这个Project中有很多的文件,我们就简单的介绍一下文件的作用
index.html
<!-- index.hml -->
<div class="container">
<!-- 添加一个文本 -->
<text class="text">
Hello World
</text>
<!-- 添加一个按钮,按钮样式设置为胶囊型,文本显示为Next,绑定launch事件 -->
<button class="button" type="capsule" value="Next" onclick="launch"></button>
</div>
index.css
/* index.css */
.container {
flex-direction: column; /* 设置容器内的项目纵向排列 */
justify-content: center; /* 设置项目位于容器主轴的中心 */
align-items: center; /* 项目在交叉轴居中 */
width:100%;
height:100%;
}
/* 对class="text"的组件设置样式 */
.text{
font-size: 42px;
}
/* 对class="button"的组件设置样式 */
.button {
width: 240px;
height: 60px;
background-color: #007dff;
font-size: 30px;
text-color: white;
margin-top: 20px;
}
这样一个简单的HelloWorld页面就写好了,那么如何预览页面呢?
点击页面菜单栏中的View->Tool Windows->Previewer就可以实时监测你的页面布局了
四、实现页面之间的跳转
再创建另一个页面
在Project窗口,打开“entry > src > main > js > default”,右键点击“pages”文件夹,选择“New > JS Page”,命名为“details”,单击回车键。
创建完成后,可以看到“pages”文件夹下的文件目录结构如下:
打开“details.hml”文件,添加一个文本,示例代码如下:
<!-- details.hml -->
<div class="container">
<text class="text">
Hi there
</text>
<button class="button" type="capsule" value="Return" onclick="launch"></button>
</div>
打开“details.css”文件,设置文本的样式,示例代码如下:
/* details.css */
.container {
flex-direction: column;
justify-content: center;
align-items: center;
width:100%;
height:100%;
}
.text {
font-size: 42px;
text-align: center;
}
.button {
width: 240px;
height: 60px;
background-color: #007dff;
font-size: 30px;
text-color: white;
margin-top: 20px;
}
打开第一个页面的“index.js”文件,导入router模块,页面路由router根据页面的uri来找到目标页面,从而实现跳转。示例代码如下:
// index.js
import router from '@system.router';
export default {
launch() {
router.push ({
uri:'pages/details/details', // 指定要跳转的页面
})
}
}
同样,“details.js”文件,导入router模块,页面路由router根据页面的uri来找到目标页面,从而实现跳转。示例代码如下:
// details.js
import router from '@system.router';
export default {
launch() {
router.push ({
uri:'pages/index/index', // 指定要跳转的页面
})
}
}
这样就可以实现页面的双向跳转了