鸿蒙应用开发实战-人民邮电出版社

鸿蒙应用开发实战 张荣超老师

 

新建项目

 

 

 项目参数

 

 

 

 调出previewer

 

 

 

 

放上一张图片

<image src="../../common/images/plantpot.png" />

image{
    width: 100px;
    height: 100px;
}

 

两个页面的转跳和传参

 

index.hml

<div class="container">
    <div class="rowline">
        <picker-view  range="{{range1}}" class="range1" type="text" selected="1" @change="getpicker1"  />
        <image src="../../common/images/plantpot.png" />
        <picker-view  range="{{range2}}" type="text" selected="1" @change="getpicker2"  />
    </div>
    <input value="开始" type="button" @click="gotraining"  />
</div>

 

index.css

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

image{
    width: 100px;
    height: 100px;
}

.rowline{
    margin-top: 20px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 60%;
}

picker-view{
    color: azure;
    width: 40px;
    height: 200px;
}

input{
    margin-top: 10px;
    width: 100px;
    height: 30px;
}

 

index.js

import router from '@system.router';
export default {
    data: {
        range1:['1分','2分','3分'],
        range2:["较慢","舒缓","较快"],
        totalTime:120,keepTime:4
    },
    gotraining(){
        router.replace({
            uri:"pages/training/training",
            params:{totalTime:this.totalTime,keepTime:this.keepTime}
        })
    },
    getpicker1(e){
        console.log(e.newValue)
        if (e.newValue=="1分") {this.totalTime=60}
        if (e.newValue=="2分") {this.totalTime=120}
        if (e.newValue=="3分") {this.totalTime=180}
    },
    getpicker2(e){
        console.log(e.newValue)
        if (e.newValue=="较慢") {this.keepTime=6}
        if (e.newValue=="舒缓") {this.keepTime=4}
        if (e.newValue=="较快") {this.keepTime=2}
    }
}

 

training.hml

<div class="container">
    <text class="title">
        totalTime {{ totalTime }} , keepTime {{ keepTime }}
    </text>
    <input value="返回" type="button" @click="gohome"  />
</div>

 

training.css

.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.title {
    font-size: 30px;
    text-align: center;
    width: 200px;
    height: 100px;
}

input{
    margin-top: 10px;
    width: 100px;
    height: 30px;
}

 

training.js

import router from '@system.router';
export default {
    data: {
        title: 'World'
    },
    gohome(){
        router.replace({
            uri:"pages/index/index"
        })
    }
}

 

 预览

 

 

 改善一下训练页的显示效果

training.css

 

.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.ltitle {
    font-size: 20px;
    text-align: center;
    width: 200px;
    height: 30px;
    color: red;
}

.title {
    font-size: 15px;
    text-align: center;
    width: 150px;
    height: 20px;
}

input{
    margin-top: 10px;
    width: 100px;
    height: 30px;
}

image{
    width: 100px;
    height: 100px;
    animation-name: imgan;
}

@keyframes imgan {
    from{transform: rotate(0deg);}to{transform: rotate(360deg)}
}

 

 

training.hml

<div class="container">
    <image src="../../common/images/plantpot.png"
    style="animation-duration: {{keepTime+'s'}};animation-timing-function: ease-in-out;
    animation-iteration-count: {{turnTime}};" />
    <text class="ltitle" if="{{!timeout}}" style="color: {{colorS}};"  >
        {{action}} {{count}}秒
    </text>
    <text class="title" if="{{!timeout}}" >
        训练剩余 {{ totalTime }} 秒
    </text>
    <text class="ltitle" style="height: 50px;" else>
        训练结束
    </text>
    <input value="返回" type="button" @click="gohome"  />
</div>

 

training.js

import router from '@system.router';
export default {
    data: {
        timeout:false,
        action:"吸气",
        colorS:"red",
        count:1
    },
    gohome(){
        router.replace({
            uri:"pages/index/index"
        })
    },
    onInit(){
        this.turnTime = (this.totalTime / this.keepTime).toString()
        console.log("trunTime-->"+this.turnTime)
        var that = this
        var time1=setInterval(function(){
            that.totalTime--
            if (that.totalTime<0){
                clearInterval(time1)
                that.timeout = true
            }
            that.count++
            if(that.count>that.keepTime){
                that.count=1
                if(that.action=="吸气"){that.action="呼气";that.colorS="green";}
                else{that.action="吸气";that.colorS="red";}
            }
        },1000)
    }
}

 

效果

 

 

 

 

加一个过渡的countdown页

css

.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;

}

.ltitle {
    font-size: 100px;
    text-align: center;
    width: 200px;
    height: 100px;
    color: yellow;
}

.title {
    font-size: 18px;
    text-align: center;
    width: 200px;
    height: 30px;
}

 

hml

<div class="container">
    <text class="ltitle">{{count}}</text>
    <text class="title">请保持静止</text>
    <text class="title">{{count}}秒后跟随训练指引</text>
    <text class="title">进行吸气和呼气</text>
</div>

 

js

import router from '@system.router';
export default {
    data: {
        count:3
    },
    onShow(){
        var that = this
        var time1=setInterval(function(){
            that.count--
            if(that.count<0){
                clearInterval(time1)
                router.replace({
                    uri:"pages/training/training",
                    params:{totalTime:that.totalTime,keepTime:that.keepTime}
                })
            }
        },1000)
    }
}

 

效果