AWTK-WEB快速入门(2)-JS应用程序

原创 ZLG致远电子 2024-12-04 11:34

导读

AWTK 可以使用相同的技术栈开发各种平台的应用程序。有时我们需要使用 Web 界面与设备进行交互,本文介绍一下如何使用 JS 语言开发 AWTK-WEB 应用程序。


用 AWTK Designer 新建一个应用程序

先安装 AWTK Designer:

https://awtk.zlg.cn/web/index.html

1. 新建应用程序

这里假设应用程序的名称为 AwtkApplicationJS,后面会用到,如果使用其它名称,后面要做相应修改。

  • 在窗口上放置一个按钮;

  • 将按钮的名称改为 “close”;

  • 将按钮的文本改为 “关闭”。

2. 为按钮编写代码

2.1 删除 src 目录下全部文件(留着也可以,只是看起来比较乱),在 src 目录创建 js 目录。
2.2 在 src/js 下创建 application.js ,内容如下:
function applicationInit() {  home_page_open();}
applicationInit()
2.3 在 src/js 下创建 home_page.js,内容如下:
function home_page_open() {  var win = TWindow.open('home_page');  var close = win.lookup("close", true);
 close.on(TEventType.CLICK, function(evt) {    var e = TPointerEvent.cast(evt);    var target = TButton.cast(e.target);
   console.log("click at " + e.x + " " + e.y + " on " + target.name);    console.log("global: " + TGlobal.getPointerX() + " " + TGlobal.getPointerY() + " " + TGlobal.isPointerPressed());    return TRet.OK;  });
 win.layout();}

注意:控件的名称一定要和 home_page.xml 保持一致。

3. 在 AWTK Designer 中,执行“打包” “编译” “模拟运行”

正常情况下可以看到如下界面:
点击“关闭”按钮,退出应用程序。

编写配置文件

具体格式请参考,特殊平台编译配置:

https://github.com/zlgopen/awtk/blob/master/docs/build_config.md

这里给出一个例子,可以在此基础上进行修改,该文件位于:

examples/AwtkApplicationJS/build.json
{  "name": "AwtkApplicationJS",  "version": "1.0",  "app_type":"js",  "copyright": "Guangzhou ZHIYUAN Electronics Co.,Ltd.",  "themes":["default"],  "sources": [     "src/js/*.js"  ]}


编译 WEB 应用程序

进入 awtk-web 目录,不同平台使用不同的脚本编译:
  • Windows 平台
./build_win32.sh examples/AwtkApplicationJS/build.json release
  • Linux 平台
./build_linux.sh examples/AwtkApplicationJS/build.json release
  • MacOS 平台
./build_mac.sh examples/AwtkApplicationJS/build.json release

请根据应用程序所在目录,修改配置文件的路径。


运行

1. 正常启动
./start_web.sh
2. 调试启动
start_web_debug.sh

3. 用浏览器打开 URL:http://localhost:8080/AwtkApplicationJS,可以看到:

4. 用浏览器打开 http://localhost:8080/AwtkApplicationJS/simulator.html,可以看到:

5. 用浏览器打开 http://localhost:8080/AwtkApplicationJS/app.html,可以看到:


AWTK-WEB-JS 和 AWTK-JS 不同

两者在 API 上基本上是一样的,但是由于浏览器和 Jerryscript 的差异,导致少量功能无法做到完全一致,需要应用程序自行规避。

  1. AWTK-WEB-JS 不支持模态对话框。
  2. AWTK-WEB-JS 中的 print 函数是打印。请使用 console.log 输出调试信息。
  3. AWTK-WEB-JS 不支持自动回收在 wasm 中分配的对象(如:color/rect/value 等)。如果希望两者通用,请避免使用这类函数。

图像显示应用芯片ZMP110X

  • 硬件高集成化

  • 丰富的多媒体特性

  • 广泛的应用场景

参考价格:45元起

长按购买



评论 (0)
  • 本文介绍瑞芯微RK356X系列复用接口配置的方法,基于触觉智能RK3562开发板演示,搭载4核A53处理器,主频高达2.0GHz;内置独立1Tops算力NPU,可应用于物联网网关、平板电脑、智能家居、教育电子、工业显示与控制等行业。复用接口介绍由下图可知,红圈内容当前引脚可配置为SPI0或者PWM0功能。由标准系统固件以及相关系统手册可得,当前接口默认配置为SPI0功能:console:/ # ls dev/spidev0.0dev/spidev0.0再由原理图可知当前GPIO为GPIO0_C3
    Industio_触觉智能 2025-03-28 18:14 163浏览
  • 一、真空容器的定义与工作原理真空容器是一种能够创造并保持一定真空度的密闭容器。其工作原理通常涉及抽气系统,该系统能够逐渐抽出容器内部的气体分子,从而降低容器内的气压,形成真空环境。在这个过程中,容器的体积并不会因抽气而改变,但容器内的压力会随着气体的抽出而逐渐降低。二、真空容器并非恒压系统真空容器并非一个恒压系统。恒压系统指的是在外部环境变化时,系统内部压力能够保持相对稳定。然而,在真空容器中,随着气体的不断抽出,内部压力会持续降低,直至达到所需的真空度。因此,真空容器内部的压力是变化的,而非恒
    锦正茂科技 2025-03-29 10:23 152浏览
  • 本文介绍OpenHarmony5.0 DevEco Studio开发工具安装与配置,鸿蒙北向开发入门必备!鸿蒙北向开发主要侧重于应用层的开发,如APP开发、用户界面设计等,更多地关注用户体验、应用性能优化、上层业务逻辑的实现,需要开发者具备基本的编程知识、对操作系统原理的简单理解,以及一定的UI设计感。由触觉智能Purple Pi OH鸿蒙开发板演示。搭载了瑞芯微RK3566四核处理器,支持开源鸿蒙OpenHarmony3.2至5.0系统,适合鸿蒙开发入门学习。下载与安装开发工具点下面链接下载:
    Industio_触觉智能 2025-03-28 18:16 228浏览
  • 在智能语音设备开发中,高音量输出是许多场景的核心需求,例如安防警报、工业设备提示、户外广播等。 WT588F02BP-14S 和 WTN6040FP-14S 两款语音芯片,凭借其内置的 D类功放 和 3W大功率输出 能力,成为高音量场景的理想选择。本文将从 性能参数、应用场景、设计要点 三大维度,全面解析这两款芯片的选型策略。一、核心参数对比与选型决策参数WT588F02BP-14SWTN6040FP-14S输出功率3W@4Ω(THD<1%)3W@4Ω(THD<0.8%)功
    广州唯创电子 2025-03-28 09:15 129浏览
  • 你还记得,那些年疯狂追捧的淘宝网红店吗?它们曾是时尚的风向标,是很多人购物车里的常客,承载着无数年轻人的创业梦想。然而,最近这股网红店闭店潮,却如同一记重锤,敲醒了所有人。 从初代网红张大奕关闭“吾欢喜的衣橱”,到周扬青告别“GRACE CHOW”,再到拥有 190 万社交平台粉丝的“李大米 Lidami”宣布关闭淘宝店铺,以及“Ff5 official”“MAKI STUDIO”等大批网红店纷纷发出闭店通告,曾经风光无限的淘宝网红店,正在以惊人的速度消失。这一波闭店潮,涉及的店铺数量
    用户1742991715177 2025-03-27 23:22 70浏览
  •        随着智能驾驶向L3级及以上迈进,系统对实时性的要求已逼近极限。例如,自动紧急制动(AEB)需在50毫秒内完成感知、决策到执行的全链路响应,多传感器数据同步误差需小于10微秒。然而,传统基于Linux-RT的方案在混合任务处理中存在天然缺陷——其最大中断延迟高达200微秒,且多任务并发时易引发优先级反转问题。据《2024年智能汽车电子架构白皮书》统计,超60%的车企因实时性不足被迫推迟舱驾一体化项目落地。为旌电子给出的破局之道,是采用R5F(实
    中科领创 2025-03-29 11:55 257浏览
  • 在智能语音交互设备开发中,系统响应速度直接影响用户体验。WT588F系列语音芯片凭借其灵活的架构设计,在响应效率方面表现出色。本文将深入解析该芯片从接收指令到音频输出的全过程,并揭示不同工作模式下的时间性能差异。一、核心处理流程与时序分解1.1 典型指令执行路径指令接收 → 协议解析 → 存储寻址 → 数据读取 → 数模转换 → 音频输出1.2 关键阶段时间分布(典型值)处理阶段PWM模式耗时DAC模式耗时外挂Flash模式耗时指令解析2-3ms2-3ms3-5ms存储寻址1ms1ms5-10m
    广州唯创电子 2025-03-31 09:26 104浏览
  • 真空容器的材料选择取决于其应用场景(如科研、工业、医疗)、真空等级(低真空、高真空、超高真空)以及环境条件(温度、压力、化学腐蚀等)。以下是常见材料及其优缺点分析:1. 不锈钢(如304、316L)优点:耐腐蚀性强:316L含钼,耐酸碱和高温氧化,适合高真空和腐蚀性环境。高强度:机械性能稳定,可承受高压差和外部冲击。低放气率:经电解抛光或镀镍处理后,表面放气率极低,适合超高真空系统(如粒子加速器、半导体镀膜设备)。易加工:可焊接、铸造,适合复杂结构设计。缺点:重量大:大型容器运输和安装成本高。磁
    锦正茂科技 2025-03-29 10:52 49浏览
  • Shinco音响拆解 一年一次的面包板社区的拆解活动拉开帷幕了。板友们开始大显身手了,拆解各种闲置的宝贝。把各自的设计原理和拆解的感悟一一向电子爱好者展示。产品使用了什么方案,用了什么芯片,能否有更优的方案等等。不仅让拆解的人员了解和深入探索在其中。还可以让网友们学习电子方面的相关知识。今天我也向各位拆解一个产品--- Shinco音响(如下图)。 当产品连接上电脑的耳机孔和USB孔时,它会发出“开机,音频输入模式”的语音播报,。告诉用户它已经进入音响外放模式。3.5mm耳机扣接收电脑音频信号。
    zhusx123 2025-03-30 15:42 84浏览
  • 3月27日,长虹中玖闪光超高剂量率电子射线放射治疗系统(e-Flash)临床试验项目在四川大学华西医院正式启动,标志着该项目正式进入临床试验阶段。这不仅是我国医学技术领域的一项重大突破,更是我国在高端医疗设备研发和应用方面的重要里程碑。e-Flash放射治疗系统适用于哪些病症,治疗周期为多久?会不会产生副作用?治疗费用高不高……随着超高剂量率电子射线放射治疗系统(e-Flash)正式进入临床试验阶段,社会各界对该项目的实施情况尤为关注。对此,中国工程院院士范国滨,以及四川大学华西医院、四川省肿瘤
    华尔街科技眼 2025-03-28 20:26 327浏览
  • 语音芯片在播放音频时出现电流声是嵌入式音频系统开发中的常见问题,直接影响用户体验。唯创电子WT系列语音芯片在智能家居、工业控制等领域广泛应用,本文将从PWM直推输出与DAC+功放输出两类典型电路架构出发,系统化分析电流声成因并提供工程级解决方案。一、PWM直推输出电路电流声诊断1.1 现象特征高频"滋滋"声(8kHz-20kHz)声音随系统负载变化波动静音状态下仍存在底噪1.2 核心成因分析(1) 电源干扰开关电源纹波超标:实测案例显示,当12V转3.3V的DC-DC电源纹波>80mVpp时,P
    广州唯创电子 2025-03-28 08:47 125浏览
  • 真空容器内部并非wan全没有压强,而是压强极低,接近于零。真空状态下的压强与容器内外气体的分子数量、温度以及容器本身的性质有关。一、真空与压强的基本概念真空指的是一个空间内不存在物质或物质极少的状态,通常用于描述容器或系统中气体的稀薄程度。压强则是单位面积上所受正压力的大小,常用于描述气体、液体等流体对容器壁的作用力。二、真空状态下的压强特点在真空状态下,容器内部的气体分子数量极少,因此它们对容器壁的作用力也相应减小。这导致真空容器内部的压强远低于大气压强,甚至接近于零。然而,由于技术限制和物理
    锦正茂科技 2025-03-29 10:16 164浏览
  • 文/杜杰编辑/cc孙聪颖‍3月11日,美国总统特朗普,将自费8万美元购买的特斯拉Model S,开进了白宫。特朗普此举,绝非偶然随性,而是有着鲜明的主观意图,处处彰显出一种刻意托举的姿态 。特朗普也毫不讳言,希望他的购买能推动特斯拉的发展。作为全球电动车鼻祖,特斯拉曾凭借创新理念与先进技术,开辟电动汽车新时代,引领行业发展潮流。然而当下,这家行业先驱正深陷困境,面临着前所未有的挑战。就连“钢铁侠”马斯克自己都在采访时表示“非常困难”,的确是需要美国总统伸手拉一把了。马斯克踏入白宫的那一刻,特斯拉
    华尔街科技眼 2025-03-28 20:44 179浏览
  • 在智能家居领域,无线门铃正朝着高集成度、低功耗、强抗干扰的方向发展。 WTN6040F 和 WT588F02B 两款语音芯片,凭借其 内置EV1527编解码协议 和 免MCU设计 的独特优势,为无线门铃开发提供了革命性解决方案。本文将深入解析这两款芯片的技术特性、应用场景及落地价值。一、无线门铃市场痛点与芯片方案优势1.1 行业核心痛点系统复杂:传统方案需MCU+射频模块+语音芯片组合,BOM成本高功耗瓶颈:待机电流
    广州唯创电子 2025-03-31 09:06 66浏览
  • 在工业控制与数据采集领域,高精度的AD采集和实时显示至关重要。今天,我们就来基于瑞芯微RK3568J + FPGA国产平台深入探讨以下,它是如何实现该功能的。适用开发环境如下:Windows开发环境:Windows 7 64bit、Windows 10 64bitLinux开发环境:Ubuntu18.04.4 64bit、VMware15.5.5U-Boot:U-Boot-2017.09Kernel:Linux-4.19.232、Linux-RT-4.19.232LinuxSDK:LinuxSD
    Tronlong 2025-03-28 10:14 196浏览
我要评论
0
0
点击右上角,分享到朋友圈 我知道啦
请使用浏览器分享功能 我知道啦