视频链接：技术胖-华为鸿蒙系统应用 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‘) },}成品：
免责声明：本网站内容主要来自原创、合作伙伴供稿和第三方自媒体作者投稿，凡在本网站出现的信息，均仅供参考。本网站将尽力确保所提供信息的准确性及可靠性，但不保证有关资料的准确性及可靠性，读者在使用前请进一步核实，并对任何自主决定的行为负责。本网站对有关资料所引致的错误、不确或遗漏，概不负任何法律责任。任何单位或个人认为本网站中的网页或链接内容可能涉嫌侵犯其知识产权或存在不实内容时，应及时向本网站提出书面权利通知或不实情况说明，并提供身份证明、权属证明及详细侵权或不实情况证明。本网站在收到上述法律文件后，将会依法尽快联系相关文章源头核实，沟通删除相关内容或断开相关链接。