第一个鸿蒙(js)项目

下载deveco studio

https://developer.harmonyos.com/cn/develop/deveco-studio

安装完成后 创建项目

image.png

创建项目后再src/main/pages/index下 会有3个文件

image.png

index.hml

<div class="container1">
    <div class="container2">
        <picker-view class="pv1" range="{{packer1range}}" selected="0" on:change="changeAction1"></picker-view>
        <text class="txt">分</text>
        <image src="/common/hm.png" class="img"></image>
        <picker-view class="pv2" range="{{packer2range}}" selected="0" onchange="changeAction2"></picker-view>
    </div>

    <input type="button" value="点击开始" class="btn" onclick="clickAction"></input>
</div>

index.css

.container1 {
    width: 454px;
    height: 454px;
    justify-content: center;
    align-items: center;
    display: flex;
/*    按照column排列*/
    flex-direction: column;
}

.container2{
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
    width: 454px;
    height: 250px;
}
.pv1{
    width: 30px;
    height: 250px;
}
.pv2{
    width: 80px;
    height: 250px;
}
.txt{
    text-align: center;
    width: 50px;
    height: 36px;
}


.img{
    width: 208px;
    height: 208px;
    margin-left: 15px;
    margin-right: 15px;
}
.btn{
    width: 200px;
    height: 50px;
    font-size: 38px;
    background-color: #000000;
    border-color: #000000;
}

index.js

import router from '@system.router';
var picker1value = 1;
var picker2value = "较慢";
export default {
    data: {
        packer1range:[1,2,3],
        packer2range:["较慢","舒缓","较快"]
    },
    clickAction(){
        console.log("我被点击了")
        router.replace({
            uri:"pages/daojishi/daojishi",
            params:{
                "data1":picker1value,
                "data2":picker2value,
            },

        });
    },

    changeAction1(pv){
        console.log("左边的选中项:"+pv.newValue);
        picker1value = pv.newValue;
    },

    changeAction2(pv){
        console.log("右边选中项:"+pv.newValue);
        picker2value = pv.newValue;
    },

    onInit(){
        console.log("主页面onInit被调用");
    },
    onReady(){
        console.log("主页面onReady被调用");
    },
    onShow(){
        console.log("主页面onShow被调用");
    },
    onDestroy(){
        console.log("主页面onDestroy被调用");
    },
}