Harmony Os 学习笔记02

视频链接：技术胖-华为鸿蒙系统应用 OpenHarmony JS 前端开发 基础入门教程-完结

官方文档链接：技术胖-华为鸿蒙系统应用 OpenHarmony JS 前端开发 基础入门教程-完结

一、基础组件及chart组件的使用

（1）主要组件：

基础组件	text、image、progress、rating、span、marquee、image-animator、divider、search、menu、chart
容器组件	div、list、list-item、stack、swiper、tabs、tab-bar、tab-content、list-item-group、refresh、dialog
媒体组件	video
画布组件	canvas

（2）chart组件的使用

注意事项：

A、预览页面时，务必要注意打开当前需要预览的页面文件夹下 hml、css、js 任意一个文件。

B、切换页面进行预览，不需要重新启动预览器，直接点击右上角刷新按钮即可，出现错误提示。

C、pages.chart 文件夹下面的 hml、css、js 文件必须命名为 index，否则的话会出现预览错误。

D、出现预览错误修改后，刷新无效，必须重新启动预览器才能正常显示，点击右侧收起再展开即可。

（具体的代码及其他注意事项在最开始的链接中）

二、具体的实例

​

（1）布局

在构建页面布局时，需要对每个基本元素思考以下几个问题：

• 该元素的尺寸和排列位置
• 是否有重叠的元素
• 是否需要设置对齐、内间距或者边界
• 是否包含子元素及其排列位置
• 是否需要容器组件及其类型 

（2）组件

div:整个布局文件使用div组件将页面进行划分;

        flex-direction:flex容器主轴方向。

        column：垂直方向从上到下。

        row：水平方向从左到右

        justify-content: flex容器当前行的主轴对齐格式。

        center：项目位于容器的中心。

button:按钮

        text-color：按钮的文本颜色。

        font-style：按钮的字体样式。

        font-weight：按钮的字体粗细。

input:输入框

        type：默认值：text:定义一个单行的文本字段

        button：定义可点击的按钮；

        placeholder:设置提示文本的内容，仅在type为text|email|date|time|number|password时生                                  效果。

text:文本

             font-weight：设置文本的字体粗细，number类型取值[100, 900]，默认为400，取值越                                          大，字体越大，说明number取值必须为100的整数倍。

            text-align：设置文本的文本对齐方式。

（3）代码

HTML 

div class="container">
    <div class="input-form-1">
        <text class="form-text-1">阿里巴巴</text>
    </div>
    <div class="input-form-2">
        <text class="form-text-2">欢迎使用淘宝</text>
    </div>
    <div class="row">
            <div class="input-block">
                 <input id="username" class="input" type="text" maxlength="10" placeholder="请输入账号"/>
            </div>
    </div>
    <div class="row">
        <div class="input-block">
                <input id="password" class="input" type="password" maxlength="10" placeholder="请输入密码" />
        </div>
    </div>

    <div class="row">
        <div class="input-block">
            <input onchange="checkboxOnChange" checked="false" type="checkbox" value="0"></input>
            <label class="label">记住密码</label>
        </div>
    </div>

    <input class="button" type="button" value="立即登录" onclick="buttonClick" />

    <div class="row">
        <div class="input-form-3">
            <text class="form-text-3">没有账号？去注册</text>
            <text class="form-text-4">忘记密码？</text>
        </div>
    </div>
</div>

CSS 

.container {
    flex-direction: column; /* 垂直排列 */
    align-items: center; /* 水平居中 */
    background-color: #f1f5f8;/* 背景颜色 */
    width:100%;/* 容器宽度 */
    height: 100%;/* 容器高度 */
}
.input-form-1 {
    width: 100%;
    margin-top: 25%;/* 设置一个元素为25%的上部边距 */
    margin-bottom: 35px;
    margin-left: 30px;

}
.input-form-2 {
    width: 100%;
    margin-bottom: 20px;
    margin-left: 30px;/* 设置一个元素为30px的上部边距 */
}
.input-form-3 {
    width: 100%;
    margin-top: 15px;
    margin-left: 30px;
}
.form-text-1 {
    font-size: 60px; /* 字体大小 */
    font-weight: 300;
    color: #000000;/* 字体颜色 */

}
.form-text-2 {
    font-size: 25px; /* 字体大小 */
    font-weight: 200;
    color: #FF8800;
}
.form-text-3 {
    font-size: 13px; /* 字体大小 */
}
.form-text-4 {
    font-size: 12px; /* 字体大小 */
    text-align: right; /* 左对齐 */
    margin-left: 140px;
}
.row{
    width: 100%;
    margin-top: 5px;
    flex-direction: row; /* 水平排列 */
    align-items: center; /* 水平居中 */
}
.label {
    font-size: 16px; /* 字体大小 */
    width: 120px; /* 宽度 */
    text-align: left; /* 左对齐 */
}
.input-block {
    width: 100%;
    margin-left: 30px;
}
.input {
    width: 90%; /* 输入框宽度 */
    font-size: 15px; /* 字体大小 */
}
.button {
    margin-top: 10px;
    width: 150px;
    background-color: #FF8800;
    font-weight: 300;/* 设置文本的字体粗细，number类型取值[100, 900]
    ，默认为400，取值越大，字体越粗。说明number取值必须为100的整数倍。 */
    font-style: normal;
    font-size: 19px;
}

JS 

export default {
    checkboxOnChange(e) {
        console.info('checkboxOnChange')
    },
    onRadioChange(inputValue, e) {
        console.info('onRadioChange')
    },
    change(e){
        console.info('onRadioChange')
    },
}

成品：