页面跳转
一、整体结构
二、代码
2.1 index
2.1.1 index.css
.container {
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.title {
font-size: 40px;
color: #000000;
opacity: 0.9;
}
.btu{
width: 500px;
}
@media screen and (device-type: tablet) and (orientation: landscape) {
.title {
font-size: 100px;
}
}
@media screen and (device-type: wearable) {
.title {
font-size: 28px;
color: #FFFFFF;
}
}
@media screen and (device-type: tv) {
.container {
background-image: url("/common/images/Wallpaper.png");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.title {
font-size: 100px;
color: #FFFFFF;
}
}
@media screen and (device-type: phone) and (orientation: landscape) {
.title {
font-size: 60px;
}
}
2.1.2 index.hml
<div class="container">
<text class="title">
{{harmony}}
</text>
<button @click="toSecPage()" class="btu">进入SecPage页面</button>
</div>
2.1.3 index.js
import router from '@system.router';
export default {
data: {
harmony: ""
},
onInit() {
this.harmony = "鸿蒙初生,连接万物";
},
toSecPage(){
router.push(
{
uri:"pages/secpage/secpage",//跳转网页的位置 在config.json中查找
params: {
harmony:this.harmony
}
}
);
}
}
2.2 secpage
2.2.1 secpage.css
.container {
display: flex;
justify-content: center;
align-items: center;
left: 0px;
top: 0px;
width: 454px;
height: 454px;
}
.title {
font-size: 30px;
text-align: center;
width: 200px;
height: 100px;
}
2.2.2 secpage.hml
<div class="container">
<button onclick="back">返回主页面</button>
</div>
2.2.3 secpage.js
import router from '@system.router';
export default {
data: {
title: 'World'
},
onInit(){
console.info(this.harmony);//打印传递过来的harmony
},
back(){
router.back();
}
}
三、拓展
3.1 onBackPress()
import router from '@system.router';
export default {
data: {
harmony: ""
},
onInit() {
this.harmony = "鸿蒙初生,连接万物";
},
toSecPage(){
router.push(
{
uri:"pages/secpage/secpage",//跳转网页的位置 在config.json中查找
params: {
harmony:this.harmony
}
}
);
},
onBackPress(){
console.info("ddd");
return false;
}
}
3.2 设置页面跳转次数(全局变量)
export default {
data:{
jumpCount:null
},
getJumpCount(){
return this.jumpCount;
},
setJumpCount(count){
this.jumpCount=count;
},
onCreate() {
this.jumpCount=0;
console.info('AceApplication onCreate');
},
onDestroy() {
console.info('AceApplication onDestroy');
}
};