EVM嵌入式虚拟机初体验
-
一、前言
我是一名物联网爱好者,同时也是一位前端开发学习者,在物联网和前端的道路上执着的走着脚下的路,不知疲倦。最近新结实了武汉市字节码科技EVM团队的万里大神,给我做出了诸多指引,在此深表谢意。接下来,可以开始我的EVM嵌入式虚拟机初体验之旅了。
• 武汉市字节码科技有限公司官网
• EVM物联网虚拟机
• EVM是什么
• EVUE是什么二、准备
1.参考文档
按照文档,根据文档说明,结合视频,写出5个页面,分别是:电话(带拨号盘),股市,设置,支付宝,微信。
2.实现目标
每个页面写两个子页,最后能够在evue模拟器运行起来。
三、起步
1.开发环境
• EVUE模拟器,点击下载压缩包,内含模拟器和资源文件
• VS Code2.开始项目
(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; }
效果图
五、完整预览