HarmonyOS开发-router路由-数据传输

鸿蒙时代

发布于 2022-3-31 10:19

浏览

0收藏

效果展示：
HarmonyOS开发-router路由-数据传输-鸿蒙开发者社区

1.建立项目包
2.创建文件
HarmonyOS开发-router路由-数据传输-鸿蒙开发者社区
3.代码部分：
4.显示部分：

Index.hml

<div class="container">
    <text class="title">
        <span>记录</span>
    </text>
    <div class="boxs">
        <text class="text"><span>时间：{{ time }}</span></text>
        <text class="text"><span>地点：{{ address }}</span></text>
        <text class="text"><span>人员：{{ personal }}</span></text>
    </div>
    <input type="button" value="上传" onclick="click"></input>
</div>

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

Index.css

.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
.title{
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
}
.boxs{
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
}
.text {
    font-size: 20px;
    color: #333;
    opacity: 0.9;
    margin-bottom: 10px;
    margin-left: 20px;
}

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.

Index.js

import router from '@system.router';
export default {
    data:{
        time: "2022.03.27",
        address:"广东省深圳市*****",
        personal:"*****",
    },
    click(){
        router.push({
            uri:"pages/touter/touter"
        })
    }
}

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

输入记录部分：
Tuoter.hml

<div class="container">
    <text class="title">
        <span>输入记录</span>
    </text>
    <div class="box">
        <input id="1" type="text" value="{{ time }}" placeholder="输入时间" onchange="getChange"></input>
        <input id="2" type="text" value="{{ address }}" placeholder="输入地点" onchange="getChange"></input>
        <input id="3" type="text" value="{{ personal }}" placeholder="输入人员" onchange="getChange"></input>
        <input type="button" value="提交" onclick="btnClick"></input>
    </div>
</div>

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

Touter.css

.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.title {
    font-size: 30px;
    text-align: center;
    width: 200px;
    height: 100px;
}
.box{
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 200px;
    width: 100%;
}

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.

Touter.js

import router from '@system.router';
export default {
    data:{
        time:"",
        address:"",
        personal:"",
    },
    getChange(e){
        let idName = e.target.id
        if (idName === "1") {
            this.time = e.value
        }else if (idName === "2") {
            this.address = e.value
        }else if (idName === "3") {
            this.personal = e.value
        }
    },
    btnClick(){
        router.push({
            uri:"pages/index/index",
            params:{
                time:this.time,
                address:this.address,
                personal:this.personal,
            }
        })
    }
}

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.