华为HarmonyOS之Watch系列APP开发(6)

实现效果:点击主页面的按钮跳转到训练页面,同时将选择器的选择值传递到训练页面,在训练页面获取到传递的值并打印log。

index.js

import router from '@system.router' // 从system的routrt中导入router

// 在点击主页面按钮之前只要触发了选择器的onchange事件就将选中项的值保存到变量中,声明两个变量picker1value和picker2value
var picker1value = null; // 设置初始值null
var picker2value = null;

export default {
    data: {
        picker1range:["1","2","3"],
        picker2range:["较慢","舒缓","较快"]
    }, // 注意 :data 右花括号和clickAction 之间必须加上,
    clickAction() { //定义一个名为clickaction的函数
        router.replace({
            uri: 'pages/train/train', // 当跳转到训练页面时可以将两个选择器的值存放在字典中
            params:{"data1":picker1value, "data2":picker2value}
        }); // 添加一条页面跳转语句
    },

// 添加一个自定义函数changeAction1,响应左边选择器的onchange事件,同时定义一个名为pv的形参
    changeAction1(pv) {
        console.log("左边的选中项:" + pv.newValue); // 通过pv.newValue获取选中的值
        picker1value = pv.newValue; //将选中心的值赋值给变量picker1value
    },

//同理,添加 changeAction2,响应右边选择器的onchange事件
    changeAction2(pv) {
        console.log("右边的选中项:" + pv.newValue);
        picker2value = pv.newValue;
    },

// 实现页面的四个生命周期事件
    onInit() {
        console.log("主页面的onInit()被调用"); //在回调函数中打印log

        console.log("接收到的左边选择器的值:" + this.data1); // 因为两个选择器的值都存放在一个字典中,对应的key分别是data1和data2,所以在训练页面中我们可以通过this.data1、this.data1获取传递过来的左右边选择器的值
        console.log("接收到的右边选择器的值:" + this.data2);
    },

    onReady() {
        console.log("主页面的onReady()被调用"); //在回调函数中打印log
    },

    onShow() {
        console.log("主页面的onShow()被调用"); //在回调函数中打印log
    },

    onDestroy() {
        console.log("主页面的onDestroy()被调用"); //在回调函数中打印log
    }
}

在点击主页面中按钮进行页面跳转时不仅要通过uri制定目标页面还要通过params指定传递的数据,所有传递的数据都作为value存放在字典中,当跳转到训练页面时可以将两个选择器的值存放在字典中。

train.js


import router from '@system.router' // 从system的routrt中导入router

export default {
    data: {

    }, // 注意 :data 右花括号和clickAction 之间必须加上,
    clickAction() { //定义一个名为clickaction的函数
        router.replace({
            uri:'pages/index/index' // 项目的config.json中对主页面的rui进行了定义,可以看到因在项目的子目录pages右键新增js page后在config.json中有新增训练页面的uri定义
        }); // 添加一条页面跳转语句,此处有下划线报错提醒:这个需要需要从system的routrt中导入router,且需要在一对花括号中指定主页面uri地址
    },
// 实现页面的四个生命周期事件
    onInit() {
// 获取主页面传递过来的值并打印

        console.log("训练页面的onInit()被调用"); //在回调函数中打印log
        console.log("接收到的左边选择器的值:" + this.data1); // 因为两个选择器的值都存放在一个字典中,对应的key分别是data1和data2,所以在训练页面中我们可以通过this.data1、this.data1获取传递过来的左右边选择器的值
        console.log("接收到的右边选择器的值:" + this.data2);
    },
    onReady() {
        console.log("训练页面的onReady()被调用"); //在回调函数中打印log
    },
    onShow() {
        console.log("训练页面的onShow()被调用"); //在回调函数中打印log
    },
    onDestroy() {
        console.log("训练页面的onDestroy()被调用"); //在回调函数中打印log
    }
}

上一篇
下一篇