來源 | HaaS技術社群
1、前言
目前HaaS EDU K1已經支援通過JS輕應用方式進行開發調試了，這塊開發闆帶着OLED屏，而底層的AliOS Things已經支援圖形庫，是以可以通過輕應用的開發方式，嘗試進行GUI相應的開發。
2、下載下傳代碼及環境準備
2.1、下載下傳代碼
從以下地方下載下傳AliOS3.3版本代碼：
Gitee:
https://gitee.com/alios-thingsGithub:
https://github.com/alibaba/AliOS-ThingsCode China:
https://codechina.csdn.net/alios-things/AliOS-Things2.2、代碼配置
在solutions/amp_demo/package.yaml中，對AMP_ADVANCED_ADDON_UI進行配置，配置如下：
AMP_ADVANCED_ADDON_UI: 1 2.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。