EVM嵌入式虚拟机初体验

博客
Log in to reply
  • 古

    一、前言

      我是一名物联网爱好者，同时也是一位前端开发学习者，在物联网和前端的道路上执着的走着脚下的路，不知疲倦。最近新结实了武汉市字节码科技EVM团队的万里大神，给我做出了诸多指引，在此深表谢意。接下来，可以开始我的EVM嵌入式虚拟机初体验之旅了。

    • 武汉市字节码科技有限公司官网
    • EVM物联网虚拟机
    • EVM是什么
    • EVUE是什么

    二、准备

    1.参考文档

     按照文档，根据文档说明，结合视频，写出5个页面，分别是：电话（带拨号盘），股市，设置，支付宝，微信。

    2.实现目标

     每个页面写两个子页，最后能够在evue模拟器运行起来。

    三、起步

    1.开发环境

    • EVUE模拟器，点击下载压缩包，内含模拟器和资源文件
    • VS Code

    2.开始项目

    （1）文件目录

    C:\Users\wanna\Desktop\EVM模拟器\test\LiteWearable

    ├── app.js
    ├── common
    │ └── images
    │ ├── appbar.camera.flash.auto.selected.bin
    │ ├── appbar.chevron.right.bin
    │ ├── appbar.control.fastforward.bin
    │ ├── appbar.control.pause.bin
    │ ├── appbar.control.rewind.bin
    │ ├── appbar.fingerprint.bin
    │ ├── appbar.foot.bin
    │ ├── appbar.forest.bin
    │ ├── appbar.new.window.bin
    │ ├── appbar.repeat.bin
    │ ├── appbar.return.bin
    │ ├── appbar.smiley.angry.bin
    │ ├── appbar.smiley.cry.bin
    │ ├── appbar.smiley.frown.bin
    │ ├── appbar.smiley.glasses.bin
    │ ├── appbar.smiley.grin.bin
    │ ├── appbar.smiley.kiki.bin
    │ ├── appbar.smiley.squint.bin
    │ ├── appbar.smiley.tounge.bin
    │ ├── appbar.smiley.what.bin
    │ ├── appbar.sound.3.bin
    │ ├── distance.bin
    │ ├── dribbble.bin
    │ ├── evernote.bin
    │ ├── flipboard.bin
    │ ├── girl-128×128.bin
    │ ├── girl-150×150.bin
    │ ├── hotpower.bin
    │ ├── instagram.bin
    │ ├── microphone-64×64.bin
    │ ├── microphone.bin
    │ ├── phone-64×64.bin
    │ ├── pingfanzhilu.bin
    │ ├── pocket.bin
    │ ├── rss.bin
    │ ├── speed.bin
    │ ├── sun.bin
    │ ├── time.bin
    │ ├── twitter.bin
    │ ├── voice-64×64.bin
    │ ├── voice.bin
    │ ├── whatsapp.bin
    │ ├── youtube.bin
    │ └── yuyin.bin
    ├── pages
    │ ├── call
    │ │ ├── index.css
    │ │ ├── index.hml
    │ │ └── index.js
    │ ├── chart
    │ │ ├── index.css
    │ │ ├── index.hml
    │ │ └── index.js
    │ ├── index
    │ │ ├── index.css
    │ │ ├── index.hml
    │ │ └── index.js
    │ ├── list
    │ │ ├── index.css
    │ │ ├── index.hml
    │ │ └── index.js
    │ ├── music
    │ │ ├── index.css
    │ │ ├── index.hml
    │ │ └── index.js
    │ ├── progress
    │ │ ├── index.css
    │ │ ├── index.hml
    │ │ └── index.js
    │ ├── ring
    │ │ ├── index.css
    │ │ ├── index.hml
    │ │ └── index.js
    │ └── weather
    │ ├── index.css
    │ ├── index.hml
    │ └── index.js
    └── viewmodel
    ├── framework.js
    └── viewmodel.js
    pages/index/index.hml：此文件定义了index页面的布局，在index页面中用到的组件，以及这些组件的层级关系。该页面是智能手表应用的菜单首页。

    （2）编写代码

    • 启动图

    用VS Code 打开index.hml文件，得到官方示例如下所示代码：

    <div class="container">
    <image src="./common/images/evue-logo.bin" style="top: 70px;left: 150px;">
    </image>
    <marquee scrollamount="50" style="top: 240px;left: 104px;width: 240px;height: 35px;text-align: center;color: white;font-size: 30px;">Hello Developer!
    </marquee>
    <text style="top: 280px;color: white;font-size: 20px;width: 454px;height: 25px;text-align: center;">Power by EVM
    </text>
    <progress type="horizontal" percent="30" class="out-layer-ring" style="top: 320px;left: 130px;">
    </progress>
</div>

    分析：
    一个页面由组件声明（.hml）、css样式(.css)和script脚本(.js)三部分构成。组件声明是在pages/index/index.hml文件中实现。首先，分析要显示Welcome!需要用到哪些组件，注意整个启动页面由一对<div><div>标签包裹。显示文字使用<text>组件，显示启动logo使用<image>组件,显示流动的文字使用<marquee>组件，显示页面加载的进度条使用<progress>组件。index.hml文件中代码示例如下：

    <div class="container">
  
    <!-- 模拟器启动logo图标 -->
    <image src="./common/images/evue-logo.bin" style="top: 70px;left: 150px;"></image>
  
    <!-- 模拟器启动时流动的文字，需要英文，中文不显示图标 -->
    <marquee scrollamount="50" style="top: 240px;left: 104px;width: 240px;height: 35px;text-align: center;color: white;font-size: 30px;">Welcome!</marquee>
  
    <!-- 模拟器启动时版权信息 -->
    <text style="top: 280px;color: white;font-size: 20px;width: 454px;height: 25px;text-align: center;">Power by Cloud-cola</text>

    <!-- 页面加载的进度条 -->
    <progress type="horizontal" percent="60" class="out-layer-ring" style="top: 320px;left: 130px;"></progress>

</div>

    最终启动图效果是这样的：
    替代文字
    替代文字

    这里有一点，在pages/index/index.js 文件中定义了路由和各种状态，包括onInit 、onReady 、onShow 、onHide 、 onDestroy 等，具体含义可参考EVUE文档。其中onShow:function()这个方法控制着启动图响应完毕后进入系统首页，定时器setTimeout(function()) 中设置了2S后进入 uri: “pages/dock/index” 这个首页的路由。

    onShow: function () {
        print("==========onShow index==========")
        setTimeout(function(){
            router.push({ uri: "pages/dock/index" })
        }, 2000)
    },

    • 系统首页
    系统首页在\test\LiteWearable\pages\dock目录下,dock\index.hml是首页结构，现在分别显示电话（带拨号盘），股市，微信，设置，支付宝，代码如下：

    <div class="container">
    <text style="top: 30px;color: white;width: 454px;height: 35px;text-align: center;font-family: simsun;font-size: 30px;">古德猫</text>
    <list class="list-container">
        
        <list-item class="list-item" url="pages/call/index" onclick="onPageRedirect">
            <image src="./common/images/whatsapp.bin" class="app-icon"></image>
            <text class="maintitle">电话</text>
            <image src="./common/images/appbar.chevron.right.bin" class="arrow-icon"></image>
        </list-item>
        <list-item class="list-item" url="pages/chart/index" onclick="onPageRedirect">
            <image src="./common/images/flipboard.bin" class="app-icon"></image>
            <text class="maintitle">股市</text>
            <image src="./common/images/appbar.chevron.right.bin" class="arrow-icon"></image>
        </list-item>      
       
        <list-item class="list-item" url="pages/about-djf/index" onclick="onPageRedirect">
            <image src="./common/images/dribbble.bin" class="app-icon"></image>
            <text class="maintitle">微信</text>         
            <image src="./common/images/appbar.chevron.right.bin" class="arrow-icon"></image>
        </list-item>
        <list-item class="list-item" url="pages/about-qq/index" onclick="onPageRedirect">
            <image src="./common/images/evernote.bin" class="app-icon"></image>
            <text class="maintitle">支付宝</text>          
            <image src="./common/images/appbar.chevron.right.bin" class="arrow-icon"></image>
        </list-item>
        <list-item class="list-item" url="pages/about-gzh/index" onclick="onPageRedirect">
            <image src="./common/images/flipboard.bin" class="app-icon"></image>
            <text class="maintitle">设置</text>          
            <image src="./common/images/appbar.chevron.right.bin" class="arrow-icon"></image>
        </list-item>
    </list>
</div>

    分析：
    每一对<list-item>、</list-item> 标签为列表中的一员，url=“pages/call/index” 是点击对应列表成员后跳转的路由， onclick=“onPageRedirect” 是点击事件，对应在dock\index.js中的onPageRedirect 方法。首页运行图如下：
    现在已经介绍完了开发环境、文件目录以及如何开始一个项目，接下来开发具体的需求。
    四、开始
    1.电话页面
    需求：实现电话页面子列表页面，其中拨号键盘项要点击后显示拨号键盘，其他项用“暂无记录”代替。
    （1）子列表页面
    包含通讯录、拨号盘、通话列表、语音留言。HML代码如下，其样式.css和行为.js在对应文件中。

    <div class="container">
<text style="top: 40px;color: white;width: 454px;height: 35px;text-align: center;font-family: simsun;font-size: 30px;">电话</text>
  <list class="list-container">  
        <list-item class="list-item" url="pages/call/note/index" onclick="onPageRedirect">
            <image src="./common/images/appbar.smiley.kiki.bin" class="app-icon"></image>
            <text class="maintitle">通讯录</text>          
        </list-item>
         <list-item class="list-item" url="pages/call/keyboard/index" onclick="onPageRedirect">
            <image src="./common/images/appbar.smiley.tounge.bin" class="app-icon"></image>
            <text class="maintitle">拨号键盘</text>                   
        </list-item>
         <list-item class="list-item" url="pages/call/list/index" onclick="onPageRedirect">
            <image src="./common/images/appbar.foot.bin" class="app-icon"></image>
            <text class="maintitle">通话列表</text>                    
        </list-item>
         <list-item class="list-item" url="pages/call/voice/index" onclick="onPageRedirect">
            <image src="./common/images/appbar.fingerprint.bin" class="app-icon"></image>
            <text class="maintitle">语音留言</text>                    
        </list-item>
  </list>
    <image src="./common/images/appbar.return.bin" style="top: 180px;left: 10px;" onclick="onReturn"></image>
</div>

    效果图
    （2）拨号键盘
    根据拨号键盘的路由url=“pages/call/keyboard/index” 可知，需要在call目录下新建keyboard文件夹，里面分别是index.hml 、index.css 、index.js ，这三个子文件名字需要保持一致，模拟器才可以识别。通讯录、通话列表和语音留言原理与拨号键盘类似。

    HTML代码：

    <div class="container">
<text style="top: 40px;color: white;width: 454px;height: 35px;text-align: center;font-family: simsun;font-size: 30px;">拨号键盘</text>
 <div class="list-container">
      <div class="list-item1"><text class="maintitle1">1</text></div>
      <div class="list-item2"><text class="maintitle2">2</text></div>
      <div class="list-item3"><text class="maintitle3">3</text></div>
      <div class="list-item4"><text class="maintitle4">4</text></div>
      <div class="list-item5"><text class="maintitle5">5</text></div>
      <div class="list-item6"><text class="maintitle6">6</text></div>
      <div class="list-item7"><text class="maintitle7">7</text></div>
      <div class="list-item8"><text class="maintitle8">8</text></div>
      <div class="list-item9"><text class="maintitle9">9</text></div>
      <div class="list-itema"><text class="maintitlea">+</text></div>
      <div class="list-item0"><text class="maintitle0">0</text></div>
      <div class="list-itemb"><text class="maintitleb">呼叫</text></div>
      </div>
    <image src="./common/images/appbar.return.bin" style="top: 180px;left: 10px;" onclick="onReturn"></image>
</div>

    CSS代码：

    .container {
    display: flex;
    /* align-items: center;
    justify-content: center; */
    width: 454px;
    height: 454px;
    margin: 0px;
    padding: 0px;
    background-color: black;
}
.list-container {
    width: 300px;
    height: 250px;
    left: 75px;
    top: 140px;
    border-width: 0px;
    background-color: black;
}
.list-item1 {
    width: 90px;
    height: 50px;
    left: 10px;
    top:10px;
    background-color: gray;
    border-width: 1px;
    border-radius: 10px;
    
}
.list-item2 {
    width: 90px;
    height: 50px;
    left: 105px;
    top:10px;
    background-color: gray;
    border-width: 1px;
    border-radius: 10px;
    
}
.list-item3 {
    width: 90px;
    height: 50px;
    left: 200px;
    top:10px;
    background-color: gray;
    border-width: 1px;
    border-radius: 10px;
    
}
.list-item4 {
    width: 90px;
    height: 50px;
    left: 10px;
    top:65px;
    background-color: gray;
    border-width: 1px;
    border-radius: 10px;
    
}
.list-item5 {
    width: 90px;
    height: 50px;
    left: 105px;
    top:65px;
    background-color: gray;
    border-width: 1px;
    border-radius: 10px;
    
}
.list-item6 {
    width: 90px;
    height: 50px;
    left: 200px;
    top:65px;
    background-color: gray;
    border-width: 1px;
    border-radius: 10px;
    
}
.list-item7 {
    width: 90px;
    height: 50px;
    left: 10px;
    top:120px;
    background-color: gray;
    border-width: 1px;
    border-radius: 10px;
    
}
.list-item8 {
    width: 90px;
    height: 50px;
    left: 105px;
    top:120px;
    background-color: gray;
    border-width: 1px;
    border-radius: 10px;
    
}
.list-item9 {
    width: 90px;
    height: 50px;
    left: 200px;
    top:120px;
    background-color: gray;
    border-width: 1px;
    border-radius: 10px;
    
}
.list-itema {
    width: 90px;
    height: 50px;
    left: 10px;
    top:175px;
    background-color: gray;
    border-width: 1px;
    border-radius: 10px;
    
}
.list-item0 {
    width: 90px;
    height: 50px;
    left: 105px;
    top:175px;
    background-color: gray;
    border-width: 1px;
    border-radius: 10px;
    
}
.list-itemb {
    width: 90px;
    height: 50px;
    left: 200px;
    top:175px;
    background-color: gray;
    border-width: 1px;
    border-radius: 10px;
    
}
.maintitle1 {
    top: 10px;
    left: 30px;
    color: white;
    font-family: simsun;
    font-size: 30px;
   
}
.maintitle2 {
    top: 10px;
    left: 30px;
    color: white;
    font-family: simsun;
    font-size: 30px;
    
}
.maintitle3 {
    top: 10px;
    left: 30px;
    color: white;
    font-family: simsun;
    font-size: 30px;
   
}
.maintitle4 {
    top: 10px;
    left: 30px;
    color: white;
    font-family: simsun;
    font-size: 30px;
   
}
.maintitle5 {
    top: 10px;
    left: 30px;
    color: white;
    font-family: simsun;
    font-size: 30px;
    
}
.maintitle6 {
    top: 10px;
    left: 30px;
    color: white;
    font-family: simsun;
    font-size: 30px;
   
}
.maintitle7 {
    top: 20px;
    left: 30px;
    color: white;
    font-family: simsun;
    font-size: 30px;
   
}
.maintitle8 {
    top: 10px;
    left: 30px;
    color: white;
    font-family: simsun;
    font-size: 30px;
    
}
.maintitle9 {
    top: 10px;
    left: 30px;
    color: white;
    font-family: simsun;
    font-size: 30px;
   
}
.maintitlea {
    top: 10px;
    left: 30px;
    color: white;
    font-family: simsun;
    font-size: 30px;
   
}
.maintitle0 {
    top: 10px;
    left: 30px;
    color: white;
    font-family: simsun;
    font-size: 30px;
    
}
.maintitleb {
    top: 10px;
    left: 30px;
    color: white;
    font-family: simsun;
    font-size: 30px;
   
}

    效果图：

    替代文字
    2.股市页面
    股市页面的路由url=“pages/market/index” 可知，需要在pages目录下新建market文件夹，里面分别是index.hml 、index.css 、index.js ，这三个子文件名字需要保持一致。

    HTML代码

    <div class="container">
 <text style="top: 30px;color: white;width: 454px;height: 35px;text-align: center;font-family: simsun;font-size: 30px;">股市</text>
    <list class="list-container">
        
        <list-item class="list-item">
            <text style="top: 20px;left:20px;color: white;width: 280px;height: 25px;text-align: left;font-family: simsun;font-size: 20px;">中国移动</text>
            <text style="top: 100px;left:20px;color: red;width: 280px;height: 25px;text-align: left;font-family: simsun;font-size: 50px;">0.00</text>
            <text style="top: 160px;left:20px;color: red;width: 280px;height: 25px;text-align: left;font-family: simsun;font-size: 20px;">0.00(一)</text>
            <text style="top: 200px;left:20px;color: white;width: 280px;height: 25px;text-align:left;font-family: simsun;font-size: 20px;">无可用走势图</text>
        </list-item>
        <list-item class="list-item">
            <text style="top: 20px;left:20px;color: white;width: 280px;height: 25px;text-align: left;font-family: simsun;font-size: 20px;">中国联通</text>
            <text style="top: 100px;left:20px;color: red;width: 280px;height: 25px;text-align: left;font-family: simsun;font-size: 50px;">0.00</text>
            <text style="top: 160px;left:20px;color: red;width: 280px;height: 25px;text-align: left;font-family: simsun;font-size: 20px;">0.00(一)</text>
            <text style="top: 200px;left:20px;color: white;width: 280px;height: 25px;text-align:left;font-family: simsun;font-size: 20px;">无可用走势图</text>
           
        </list-item>      
       
        <list-item class="list-item">       
            <text style="top: 20px;left:20px;color: white;width: 280px;height: 25px;text-align: left;font-family: simsun;font-size: 20px;">中国电信</text>
            <text style="top: 100px;left:20px;color: red;width: 280px;height: 25px;text-align: left;font-family: simsun;font-size: 50px;">0.00</text>
            <text style="top: 160px;left:20px;color: red;width: 280px;height: 25px;text-align: left;font-family: simsun;font-size: 20px;">0.00(一)</text>
            <text style="top: 200px;left:20px;color: white;width: 280px;height: 25px;text-align:left;font-family: simsun;font-size: 20px;">无可用走势图</text>              
        </list-item>
       
    </list>
     <image src="./common/images/appbar.return.bin" style="top: 180px;left: 10px;" onclick="onReturn"></image>
</div>

    CSS代码

    .container {
    display: flex;
    /* align-items: center;
    justify-content: center; */
    width: 454px;
    height: 454px;
    margin: 0px;
    padding: 0px;
    background-color: black;
}
.list-container {
    width: 300px;
    height: 300px;
    left: 75px;
    top: 100px;
    border-width: 0px;
    background-color: black;
    border-radius: 10px;
}
.list-item {
    width: 300px;
    height: 300px;
    left: 10px;
    top:10px;
    background-color: black;
    border-width: 0px;
}

    效果图

    3.微信页面

    替代文字
    微信页面的路由url=“pages/weichat/index” 可知，需要在pages目录下新建weichat文件夹，里面分别是index.hml 、index.css 、index.js ，这三个子文件名字需要保持一致。

    HTML代码

    <div class="container">
 <text style="top: 30px;color: green;width: 454px;height: 35px;text-align: center;font-family: simsun;font-size: 30px;">微信</text>
    <list class="list-container">
        
        <list-item class="list-item">
            <text style="top: 20px;left:20px;color: white;width: 280px;height: 25px;text-align: left;font-family: simsun;font-size: 20px;">狗蛋儿</text>
            <text style="top: 40px;left:20px;color: green;width: 280px;height: 25px;text-align: left;font-family: simsun;font-size: 20px;">晚上好</text>  
        </list-item>
        <list-item class="list-item">
            <text style="top: 20px;left:20px;color: white;width: 280px;height: 25px;text-align: left;font-family: simsun;font-size: 20px;">王大锤</text>
            <text style="top: 45px;left:20px;color: green;width: 280px;height: 25px;text-align: left;font-family: simsun;font-size: 20px;">吃香蕉</text>  
        </list-item>
        <list-item class="list-item">
            <text style="top: 20px;left:20px;color: white;width: 280px;height: 25px;text-align: left;font-family: simsun;font-size: 20px;">小福贵</text>
            <text style="top: 45px;left:20px;color: green;width: 280px;height: 25px;text-align: left;font-family: simsun;font-size: 20px;">今天天气不错</text>  
        </list-item>
        <list-item class="list-item">
            <text style="top: 20px;left:20px;color: white;width: 280px;height: 25px;text-align: left;font-family: simsun;font-size: 20px;">二憨子</text>
            <text style="top: 45px;left:20px;color: green;width: 280px;height: 25px;text-align: left;font-family: simsun;font-size: 20px;">明早吃早点</text>  
        </list-item>
        
        <list-item class="list-item">
            <text style="top: 20px;left:20px;color: white;width: 280px;height: 25px;text-align: left;font-family: simsun;font-size: 20px;">隔壁老王</text>
            <text style="top: 45px;left:20px;color: green;width: 280px;height: 25px;text-align: left;font-family: simsun;font-size: 20px;">明早吃早点</text>  
        </list-item>
        <list-item class="list-item">
            <text style="top: 20px;left:20px;color: white;width: 280px;height: 25px;text-align: left;font-family: simsun;font-size: 20px;">李元霸</text>
            <text style="top: 45px;left:20px;color: green;width: 280px;height: 25px;text-align: left;font-family: simsun;font-size: 20px;">明早吃早点</text>  
        </list-item>
        <list-item class="list-item">
            <text style="top: 20px;left:20px;color: white;width: 280px;height: 25px;text-align: left;font-family: simsun;font-size: 20px;">提兜</text>
            <text style="top: 45px;left:20px;color: green;width: 280px;height: 25px;text-align: left;font-family: simsun;font-size: 20px;">明早吃早点</text>  
        </list-item>
    </list>
     <image src="./common/images/appbar.return.bin" style="top: 180px;left: 10px;" onclick="onReturn"></image>
</div>

    CSS代码

    .container {
    display: flex;
    /* align-items: center;
    justify-content: center; */
    width: 454px;
    height: 454px;
    margin: 0px;
    padding: 0px;
    background-color: black;
}
.list-container {
    width: 300px;
    height: 300px;
    left: 75px;
    top: 100px;
    border-width: 0px;
    background-color: black;
    border-radius: 10px;
}
.list-item {
    width: 300px;
    height: 70px;
    left: 10px;
    top:10px;
    border-width: 0px;
    background-color: black;
   
}

    效果图

    替代文字
    替代文字

    4.支付宝页面

    支付宝面的路由url=“pages/alipay/index” 可知，需要在pages目录下新建alipay文件夹，里面分别是index.hml 、index.css 、index.js ，这三个子文件名字需要保持一致。

    HTML代码

    <div class="container">
    <text style="top: 30px;color: white;width: 454px;height: 35px;text-align: center;font-family: simsun;font-size: 30px;">设置</text>
    <list class="list-container">
        
        <list-item class="list-item" url="pages/alipay/qrode/index" onclick="onPageRedirect">
            <image src="./common/images/flipboard.bin" class="app-icon"></image>
            <text class="maintitle">付款码</text>
            
        </list-item>      
       
        <list-item class="list-item" url="pages/alipay/qrode/index" onclick="onPageRedirect">
            <image src="./common/images/dribbble.bin" class="app-icon"></image>
            <text class="maintitle">收款码</text>         
            
        </list-item>
        <list-item class="list-item" url="" onclick="onPageRedirect">
            <image src="./common/images/evernote.bin" class="app-icon"></image>
            <text class="maintitle">收能量</text>          
           
        </list-item>
        <list-item class="list-item" url="" onclick="onPageRedirect">
            <image src="./common/images/flipboard.bin" class="app-icon"></image>
            <text class="maintitle">查收益</text>          
            
        </list-item>
        <list-item class="list-item" url="" onclick="onPageRedirect">
            <image src="./common/images/flipboard.bin" class="app-icon"></image>
            <text class="maintitle">查汇率</text>          
            
        </list-item>
        <list-item class="list-item" url="" onclick="onPageRedirect">
            <image src="./common/images/flipboard.bin" class="app-icon"></image>
            <text class="maintitle">支付设置</text>          
            
        </list-item>
    </list>
        <image src="./common/images/appbar.return.bin" style="top: 180px;left: 10px;" onclick="onReturn"></image>
</div>

    CSS代码

    .container {
    display: flex;
    /* align-items: center;
    justify-content: center; */
    width: 454px;
    height: 454px;
    margin: 0px;
    padding: 0px;
    background-color: black;
}
.list-container {
    width: 300px;
    height: 300px;
    left: 75px;
    top: 90px;
    border-width: 0px;
    background-color: black;
}
.list-item {
    width: 454px;
    height: 80px;
    left: 0px;
    background-color: black;
    border-width: 0px;
    border-color: red;
}
.app-icon {
    top: 20px;
    left: 100px;
}
.maintitle {
    top: 40px;
    left: 180px;
    color: white;
    width: 130px;
    height: 35px;
    font-family: simsun;
    font-size: 20px;
}

    效果图

    替代文字
    替代文字

    5.设置页面

    设置页面的路由url=“pages/settings/index” 可知，需要在pages目录下新建settings文件夹，里面分别是index.hml 、index.css 、index.js ，这三个子文件名字需要保持一致。

    HTML代码

    <div class="container">
    <text style="top: 30px;color: white;width: 454px;height: 35px;text-align: center;font-family: simsun;font-size: 30px;">设置</text>
    <list class="list-container">
        
        <list-item class="list-item">
            <image src="./common/images/whatsapp.bin" class="app-icon"></image>
            <text class="maintitle">无线和网络</text>
           
        </list-item>
        <list-item class="list-item" url="" onclick="onPageRedirect">
            <image src="./common/images/flipboard.bin" class="app-icon"></image>
            <text class="maintitle">设备连接</text>
            
        </list-item>      
       
        <list-item class="list-item" url="" onclick="onPageRedirect">
            <image src="./common/images/dribbble.bin" class="app-icon"></image>
            <text class="maintitle">桌面和壁纸</text>         
            
        </list-item>
        <list-item class="list-item" url="" onclick="onPageRedirect">
            <image src="./common/images/evernote.bin" class="app-icon"></image>
            <text class="maintitle">显示</text>          
           
        </list-item>
        <list-item class="list-item" url="" onclick="onPageRedirect">
            <image src="./common/images/flipboard.bin" class="app-icon"></image>
            <text class="maintitle">通知</text>          
            
        </list-item>
    </list>
        <image src="./common/images/appbar.return.bin" style="top: 180px;left: 10px;" onclick="onReturn"></image>
</div>

    CSS代码

    .container {
    display: flex;
    /* align-items: center;
    justify-content: center; */
    width: 454px;
    height: 454px;
    margin: 0px;
    padding: 0px;
    background-color: black;
}
.list-container {
    width: 300px;
    height: 300px;
    left: 75px;
    top: 90px;
    border-width: 0px;
    background-color: black;
}
.list-item {
    width: 454px;
    height: 80px;
    left: 0px;
    background-color: black;
    border-width: 0px;
    border-color: red;
}
.app-icon {
    top: 20px;
    left: 100px;
}
.maintitle {
    top: 40px;
    left: 180px;
    color: white;
    width: 130px;
    height: 35px;
    font-family: simsun;
    font-size: 20px;
}

    效果图

    替代文字

    五、完整预览

    替代文字

    0