1. 選擇TV設備 列表模板（JS版本）
![]css
2. 生成後JS版本部分以下：
index.css 樣式控制和日常css沒啥兩樣前端
.container {
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
background-color: #000000;
}
.title {
line-height: 60px;
font-size: 48px;
margin-bottom: 16px;
color: #ffffff;
margin-left: 48px;
}
.content_box {
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
width: 516px;
margin-top: 24px;
}
.content-list {
width: 516px;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
flex-grow: 1;
}
.content-bar {
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 420px;
height: 48px;
margin-left: 48px;
margin-right: 48px;
background-color: #808080;
border-radius: 8px;
}
.content-bar-focus {
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 420px;
height: 48px;
margin-left: 48px;
margin-right: 48px;
background-color: #ffffff;
border-radius: 8px;
}
.bar-title {
color: #ffffff;
font-size: 24px;
margin-left: 15px;
}
.bar-title-focus {
color: #000000;
font-size: 24px;
margin-left: 15px;
}
.bar-more {
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-right: 15px;
width: 30px;
height: 24px;
}
.bar-img {
object-fit: contain;
}
.content_img {
width: 444px;
flex-direction: column;
justify-content: flex-start;
align-items: flex-end;
}
.img-box {
margin-top: 160px;
margin-right: 160px;
background-color: #808080;
width: 198px;
height: 198px;
}
.img-img {
object-fit: contain;
width: 198px;
height: 198px;
}
.text_box {
width: 272px;
justify-content: center;
margin-right: 123px;
margin-top: 12px;
}
.img-text {
font-size: 24px;
color: #ffffff;
}
index.hml 模板文件json
<div class="container">
<div class="content_box">
<text class="title">{{Title}}
</text>
<list class="content-list">
<list-item type="listItem" class="{{list_item_class1}}" onfocus="focusFunc1" onblur="blurFunc1">
<text class="{{text_class1}}">{{$t('strings.list')}} 1
</text>
<div class="bar-more">
<image class="bar-img" src="../../common/arrow.png"></image>
</div>
</list-item>
<list-item type="divider" style="height: 12px"></list-item>
<list-item type="listItem" class="{{list_item_class2}}" onfocus="focusFunc2" onblur="blurFunc2">
<text class="{{text_class2}}">{{$t('strings.list')}} 2
</text>
<div class="bar-more">
<image class="bar-img" src="../../common/arrow.png"></image>
</div>
</list-item>
<list-item type="divider" style="height: 12px"></list-item>
<list-item type="listItem" class="{{list_item_class3}}" onfocus="focusFunc3" onblur="blurFunc3">
<text class="{{text_class3}}">{{$t('strings.list')}} 3
</text>
<div class="bar-more">
<image class="bar-img" src="../../common/arrow.png"></image>
</div>
</list-item>
<list-item type="divider" style="height: 12px"></list-item>
<list-item type="listItem" class="{{list_item_class4}}" onfocus="focusFunc4" onblur="blurFunc4">
<text class="{{text_class4}}">{{$t('strings.list')}} 4
</text>
<div class="bar-more">
<image class="bar-img" src="../../common/arrow.png"></image>
</div>
</list-item>
<list-item type="divider" style="height: 12px"></list-item>
<list-item type="listItem" class="{{list_item_class5}}" onfocus="focusFunc5" onblur="blurFunc5">
<text class="{{text_class5}}">{{$t('strings.list')}} 5
</text>
<div class="bar-more">
<image class="bar-img" src="../../common/arrow.png"></image>
</div>
</list-item>
<list-item type="divider" style="height: 12px"></list-item>
<list-item type="listItem" class="{{list_item_class6}}" onfocus="focusFunc6" onblur="blurFunc6">
<text class="{{text_class6}}">{{$t('strings.list')}} 6
</text>
<div class="bar-more">
<image class="bar-img" src="../../common/arrow.png"></image>
</div>
</list-item>
</list>
</div>
<div class="content_img">
<div class="img-box">
<image class="img-img" src=""></image>
</div>
<div class="text_box">
<text class="img-text">{{$t('strings.img-text')}}
</text>
</div>
</div>
</div>
index.js 腳本控制部分ide
export default {
data: {
Title: "",
list_item_class1: "content-bar",
text_class1: "bar-title",
list_item_class2: "content-bar",
text_class2: "bar-title",
list_item_class3: "content-bar",
text_class3: "bar-title",
list_item_class4: "content-bar",
text_class4: "bar-title",
list_item_class5: "content-bar",
text_class5: "bar-title",
list_item_class6: "content-bar",
text_class6: "bar-title",
},
onInit (){
this.Title = this.$t('strings.title');
},
/* activated when the component has focus */
focusFunc1: function () {
this.list_item_class1 = "content-bar-focus";
this.text_class1 = "bar-title-focus";
},
/* activated when the component loses focus */
blurFunc1: function () {
this.list_item_class1 = "content-bar";
this.text_class1 = "bar-title";
},
focusFunc2: function () {
this.list_item_class2 = "content-bar-focus";
this.text_class2 = "bar-title-focus";
},
blurFunc2: function () {
this.list_item_class2 = "content-bar";
this.text_class2 = "bar-title";
},
focusFunc3: function () {
this.list_item_class3 = "content-bar-focus";
this.text_class3 = "bar-title-focus";
},
blurFunc3: function () {
this.list_item_class3 = "content-bar";
this.text_class3 = "bar-title";
},
focusFunc4: function () {
this.list_item_class4 = "content-bar-focus";
this.text_class4 = "bar-title-focus";
},
blurFunc4: function () {
this.list_item_class4 = "content-bar";
this.text_class4 = "bar-title";
},
focusFunc5: function () {
this.list_item_class5 = "content-bar-focus";
this.text_class5 = "bar-title-focus";
},
blurFunc5: function () {
this.list_item_class5 = "content-bar";
this.text_class5 = "bar-title";
},
focusFunc6: function () {
this.list_item_class6 = "content-bar-focus";
this.text_class6 = "bar-title-focus";
},
blurFunc6: function () {
this.list_item_class6 = "content-bar";
this.text_class6 = "bar-title";
}
}
國際化(i18n)的支持:flex
從觀看直播華爲應該是對這塊很重視幫助開發者「走出去」。this
zh-CN.jsonspa
{
"strings":{
"title":"標題",
"list": "欄目",
"img-text":"顯示圖片"
},
"Files":{
}
}
en-US.json3d
{
"strings":{
"title":"Title",
"list": "List",
"img-text":"Display Image"
},
"Files":{
}
}
3. 結尾
運行看效果： code
這個和混合APP開發沒啥太大區別（可能API，個別語法稍微不太同樣）前端開發者應該能很快上手。component