来源 | HaaS技术社区
1、前言
当前HaaS EDU K1已经支持通过JS轻应用方式进行开发调试了，这块开发板带着OLED屏，而底层的AliOS Things已经支持图形库，所以可以通过轻应用的开发方式，尝试进行GUI相应的开发。
2、下载代码及环境准备
2.1、下载代码
从以下地方下载AliOS3.3版本代码：
Gitee: https://gitee.com/alios-things
Github: https://github.com/alibaba/AliOS-Things
Code China: https://codechina.csdn.net/alios-things/AliOS-Things
2.2、代码配置
在solutions/amp_demo/package.yaml中，对AMP_ADVANCED_ADDON_UI进行配置，配置如下：
AMP_ADVANCED_ADDON_UI: 12.3、添加轻应用代码
在solutions/javascript_demo/board/haas-edu-k1目录里面，有轻应用的示例代码：
入口文件app.json
{
"version": "1.0.0",
"io": {
"KEY1": {
"type": "GPIO",
"port": 23,
"dir": "irq",
"pull": "pullup",
"intMode":"falling"
},
"KEY2": {
"type": "GPIO",
"port": 20,
"dir": "irq",
"pull": "pullup",
"intMode":"falling"
},
"KEY3": {
"type": "GPIO",
"port": 21,
"dir": "irq",
"pull": "pullup",
"intMode":"falling"
},
"KEY4": {
"type": "GPIO",
"port": 26,
"dir": "irq",
"pull": "pullup",
"intMode":"falling"
},
"L1":{
"type":"GPIO",
"port":36,
"dir":"output",
"pull":"pulldown"
},
"L2":{
"type":"GPIO",
"port":35,
"dir":"output",
"pull":"pulldown"
},
"L3":{
"type":"GPIO",
"port":34,
"dir":"output",
"pull":"pulldown"
},
"P04":{
"type":"GPIO",
"port":4,
"dir":"output",
"pull":"pulldown"
},
"P05":{
"type":"GPIO",
"port":5,
"dir":"output",
"pull":"pulldown"
},
"P06":{
"type":"GPIO",
"port":6,
"dir":"output",
"pull":"pulldown"
},
"P07":{
"type":"GPIO",
"port":7,
"dir":"output",
"pull":"pulldown"
},
"oled_dc": {
"type": "GPIO",
"port": 28,
"dir": "output",
"pull": "pulldown"
},
"oled_res": {
"type": "GPIO",
"port": 30,
"dir": "output",
"pull": "pulldown"
},
"oled_spi": {
"type": "SPI",
"port": 1,
"mode": "mode3",
"freq": 26000000
},
"SPI0":{
"type": "SPI",
"port": 0,
"mode": "mode1",
"freq": 26000000
},
"serial": {
"type": "UART",
"port": 2,
"dataWidth": 8,
"baudRate": 115200,
"stopBits": 1,
"flowControl": "disable",
"parity": "none"
},
"sensor": {
"type": "I2C",
"port": 1,
"addrWidth": 7,
"freq": 400000,
"mode": "master",
"devAddr": 64
},
"ADC0":{
"type": "ADC",
"port": 0,
"sampling": 12000000
},
"ADC1":{
"type": "ADC",
"port": 1,
"sampling": 12000000
},
"ADC2":{
"type": "ADC",
"port": 2,
"sampling": 12000000
},
"pwm1": {
"type": "PWM",
"port": 1
},
"PWM2":{
"type":"PWM",
"port":2
},
"PWM3":{
"type":"PWM",
"port":3
},
"timer1": {
"type": "TIMER",
"port": 1
}
},
"pages": [
"data/jsamp/uipages/page/waring"
],
"debugLevel": "DEBUG",
"repl":"enable"
}
{
"version": "1.0.0",
"io": {
"KEY1": {
"type": "GPIO",
"port": 23,
"dir": "irq",
"pull": "pullup",
"intMode":"falling"
},
"KEY2": {
"type": "GPIO",
"port": 20,
"dir": "irq",
"pull": "pullup",
"intMode":"falling"
},
"KEY3": {
"type": "GPIO",
"port": 21,
"dir": "irq",
"pull": "pullup",
"intMode":"falling"
},
"KEY4": {
"type": "GPIO",
"port": 26,
"dir": "irq",
"pull": "pullup",
"intMode":"falling"
},
"L1":{
"type":"GPIO",
"port":36,
"dir":"output",
"pull":"pulldown"
},
"L2":{
"type":"GPIO",
"port":35,
"dir":"output",
"pull":"pulldown"
},
"L3":{
"type":"GPIO",
"port":34,
"dir":"output",
"pull":"pulldown"
},
"P04":{
"type":"GPIO",
"port":4,
"dir":"output",
"pull":"pulldown"
},
"P05":{
"type":"GPIO",
"port":5,
"dir":"output",
"pull":"pulldown"
},
"P06":{
"type":"GPIO",
"port":6,
"dir":"output",
"pull":"pulldown"
},
"P07":{
"type":"GPIO",
"port":7,
"dir":"output",
"pull":"pulldown"
},
"oled_dc": {
"type": "GPIO",
"port": 28,
"dir": "output",
"pull": "pulldown"
},
"oled_res": {
"type": "GPIO",
"port": 30,
"dir": "output",
"pull": "pulldown"
},
"oled_spi": {
"type": "SPI",
"port": 1,
"mode": "mode3",
"freq": 26000000
},
"SPI0":{
"type": "SPI",
"port": 0,
"mode": "mode1",
"freq": 26000000
},
"serial": {
"type": "UART",
"port": 2,
"dataWidth": 8,
"baudRate": 115200,
"stopBits": 1,
"flowControl": "disable",
"parity": "none"
},
"sensor": {
"type": "I2C",
"port": 1,
"addrWidth": 7,
"freq": 400000,
"mode": "master",
"devAddr": 64
},
"ADC0":{
"type": "ADC",
"port": 0,
"sampling": 12000000
},
"ADC1":{
"type": "ADC",
"port": 1,
"sampling": 12000000
},
"ADC2":{
"type": "ADC",
"port": 2,
"sampling": 12000000
},
"pwm1": {
"type": "PWM",
"port": 1
},
"PWM2":{
"type":"PWM",
"port":2
},
"PWM3":{
"type":"PWM",
"port":3
},
"timer1": {
"type": "TIMER",
"port": 1
}
},
"pages": [
"data/jsamp/uipages/page/waring"
],
"debugLevel": "DEBUG",
"repl":"enable"
}在solutions/javascript_demo/board/haas-edu-k1/uipages/page目录里面，有轻应用的界面显示示例代码：
waring.css是配置文字的颜色，字号大小的样式示例
#waring {
font-color: #ffffff;
font-size: 16px;
}waring.js是逻辑交互的示例代码，目前暂时没有特殊逻辑实现，只是一些打印
var ui = require('ui');
if (!(ui && ui.redirectTo)) {
throw new Error("ui: [failed] require(\'ui\')");
}
Page({
onShow: function() {
console.log('enter page onShow');
},
onExit: function() {
console.log('enter page onExit');
},
onUpdate: function() {
console.log('enter page onUpdate');
}
});waring.xml是界面开发的示例代码，目前是想要显示文本“boss coming”
<?xml version="1.0" encoding="utf-8"?>
<page>
<text id="waring" class="textClass" >boss coming</text>
</page>2.4、 编译下载
> 选择解决方案: “javascript_demo”
> 选择开发板: HaaS EDU K1
– 参考 HaaS100_Quick_Start (3.1 编译工程章节)，点击 ✅ 即可完成编译固件。
– 参考 HaaS100_Quick_Start (3.2 烧录镜像章节)，点击 "⚡️" 即可完成烧录固件。
3、结果展示
开发者支持
如需更多技术支持，可加入钉钉开发者群，或者关注微信公众号。
更多技术与解决方案介绍，请访问HaaS官方网站https://haas.iot.aliyun.com。