【HarmonyOS之旅】基于ArkTS开发(三) -＞ 兼容JS的类Web开发(四) -＞ 构建用户界面(一)

<!-- test.hml -->
<div class="container">
  <text class="title-text">{
  
  {headTitle}}</text>
  <text class="paragraph-text">{
  
  {paragraphFirst}}</text>
  <text class="paragraph-text">{
  
  {paragraphSecond}}</text>
</div>

/* test.css */
.container {
  flex-direction: column;
  margin-top: 20px;
  margin-left: 30px;
}
.title-text {
  color: #1a1a1a;
  font-size: 50px;
  margin-top: 40px;
  margin-bottom: 20px;
}
.paragraph-text {
  color: #000000;
  font-size: 35px;
  line-height: 60px;
}

// test.js
export default {
  data: {
    headTitle: 'Capture the Beauty in This Moment',
    paragraphFirst: 'Capture the beauty of light during the transition and fusion of ice and water. At the instant of movement and stillness, softness and rigidity, force and beauty, condensing moving moments.',
    paragraphSecond: 'Reflecting the purity of nature, the innovative design upgrades your visual entertainment and ergonomic comfort. Effortlessly capture what you see and let it speak for what you feel.',
  },
}

<!-- test.hml -->
<image class="img" src="{
  
  {middleImage}}"></image>

/* test.css */
.img {  
  margin-top: 30px;
  margin-bottom: 30px;
  height: 385px;
}

// test.js
export default {
  data: {
    middleImage: '/common/ice.png',
  },
}

<!-- test.hml -->
<div class="container">
  <text class="comment-title">Comment</text>
  <div if="{
  
  {!commentText}}">
    <input class="comment" value="{
  
  {inputValue}}" onchange="updateValue()"></input>
    <text class="comment-key" onclick="update" focusable="true">Done</text>
  </div>
  <div if="{
  
  {commentText}}">
    <text class="comment-text" focusable="true">{
  
  {inputValue}}</text>
    <text class="comment-key" onclick="update" focusable="true">Delete</text>
  </div>
</div>

/* test.css */
.container {
  margin-top: 24px;
  background-color: #ffffff;
}
.comment-title {
  font-size: 40px;
  color: #1a1a1a;
  font-weight: bold;
  margin-top: 40px;
  margin-bottom: 10px;
}
.comment {
  width: 550px;
  height: 100px;
  background-color: lightgrey;
}
.comment-key {
  width: 150px;
  height: 100px;
  margin-left: 20px;
  font-size: 32px;
  color: #1a1a1a;
  font-weight: bold;
}
.comment-key:focus {
  color: #007dff;
}
.comment-text {
  width: 550px;
  height: 100px;
  text-align: left;
  line-height: 35px;
  font-size: 30px;
  color: #000000;
  border-bottom-color: #bcbcbc;
  border-bottom-width: 0.5px;
}

// test.js
export default {
  data: {
    inputValue: '',
    commentText: false,
  },
  update() {
    this.commentText = !this.commentText;
  },
  updateValue(e) {
    this.inputValue = e.text;
  },
}

<!-- test.hml -->
<list class="list">
  <list-item type="listItem" for="{
  
  {textList}}">
    <text class="desc-text">{
  
  {$item.value}}</text>
  </list-item>
</list>

/* test.css */
.desc-text {
  width: 683.3px;
  font-size: 35.4px;
}

// test.js
export default {
  data: {
    textList:  [{value: 'JS FA'}],
  },
}

<!-- test.hml -->
<tabs>
  <tab-bar>
    <text>Home</text>
    <text>Index</text>
    <text>Detail</text>
  </tab-bar>
  <tab-content>
    <image src="{
  
  {homeImage}}"></image>
    <image src="{
  
  {indexImage}}"></image>
    <image src="{
  
  {detailImage}}"></image>
  </tab-content>
</tabs>

// test.js
export default {
  data: {
    homeImage: '/common/home.png',
    indexImage: '/common/index.png',
    detailImage: '/common/detail.png',
  },
}