EVM嵌入式虚拟机初体验


  • 一、前言

      我是一名物联网爱好者,同时也是一位前端开发学习者,在物联网和前端的道路上执着的走着脚下的路,不知疲倦。最近新结实了武汉市字节码科技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;
    }
    

    效果图

    替代文字

    五、完整预览

    替代文字