AWTK-WEB快速入门(1)-C语言应用程序

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

导读

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


用 AWTK Designer 新建一个应用程序

先安装 AWTK Designer:

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

1. 新建应用程序

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

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

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

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

2. 为按钮编写代码

2.1 用VSCode打开目录AwtkApplicationC,并打开文件 src/pages/home_page.c

使用其它文本编辑器或 IDE 也可以,推荐使用 VSCode,并开启 Copilot,将大幅提升开发效率。

2.2 添加 close 按钮的事件处理函数。可以参考下面的代码:

static ret_t on_close(void* ctx, event_t* evt) {  return tk_quit();}
/** * 初始化窗口的子控件 */static ret_t visit_init_child(void* ctx, const void* iter) {  widget_t* win = WIDGET(ctx);  widget_t* widget = WIDGET(iter);  const char* name = widget->name;
 // 初始化指定名称的控件(设置属性或注册事件),请保证控件名称在窗口上唯一  if (name != NULL && *name != '\0') {    if (tk_str_ieq(name, "close")) {      widget_on(widget, EVT_CLICK, on_close, win);    }  }
 return RET_OK;}


正常情况下可以看到如下界面:


点击“关闭”按钮,退出应用程序。


编写配置文件

具体格式请参考:

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

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

examples/AwtkApplicationC/build.json
{  "name": "AwtkApplicationC",  "version": "1.0",  "assets": "res/assets",  "vendor": "zlgopen",  "app_name": "org.zlgopen.AwtkApplicationC",  "author": "xianjimli@hotmail.com",  "copyright": "Guangzhou ZHIYUAN Electronics Co.,Ltd.",  "themes":["default"],  "sources": [     "src/*.c",     "src/common/*.c",     "src/pages/*.c",     "src/*.h",     "src/common/*.h",     "src/pages/*.h"  ],  "web": {    "app_type": "c",    "assets": "design",    "config": {      "fontScale": "0.8",      "defaultFont": "sans"    }  },  "harmonyos": {    "icon": "design/default/images/xx/app_icon.png",    "title": {      "en_US": "MyApp",      "zh_CN": "AwtkApp"    },    "config": {      "defaultFont": "default_full"    },    "sources": [       "res/assets.inc",       "res/assets/__assets_default.inc"    ]  },  "android": {    "sources": [       "res/assets.inc",       "res/assets/__assets_default.inc"    ]  },  "ios": {    "sources": [       "res/assets.inc",       "res/assets/__assets_default.inc"    ]  }}

如果不需要 android/harmonyos/ios 等平台,可以自行删除相应的配置。


编译 WEB 应用程序

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

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


运行

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

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

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

5. 用浏览器打开 http://localhost:8080/AwtkApplicationC/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 等)。如果希望两者通用,请避免使用这类函数。
  4. tk_quit 函数并不能退出应用程序。

图像显示应用芯片ZMP110X

  • 硬件高集成化

  • 丰富的多媒体特性

  • 广泛的应用场景

参考价格:45元起

长按购买



评论
  • 根据环洋市场咨询(Global Info Research)项目团队最新调研,预计2030年全球无人机锂电池产值达到2457百万美元,2024-2030年期间年复合增长率CAGR为9.6%。 无人机锂电池是无人机动力系统中存储并释放能量的部分。无人机使用的动力电池,大多数是锂聚合物电池,相较其他电池,锂聚合物电池具有较高的能量密度,较长寿命,同时也具有良好的放电特性和安全性。 全球无人机锂电池核心厂商有宁德新能源科技、欣旺达、鹏辉能源、深圳格瑞普和EaglePicher等,前五大厂商占有全球
    GIRtina 2025-01-07 11:02 124浏览
  • 大模型的赋能是指利用大型机器学习模型(如深度学习模型)来增强或改进各种应用和服务。这种技术在许多领域都显示出了巨大的潜力,包括但不限于以下几个方面: 1. 企业服务:大模型可以用于构建智能客服系统、知识库问答系统等,提升企业的服务质量和运营效率。 2. 教育服务:在教育领域,大模型被应用于个性化学习、智能辅导、作业批改等,帮助教师减轻工作负担,提高教学质量。 3. 工业智能化:大模型有助于解决工业领域的复杂性和不确定性问题,尽管在认知能力方面尚未完全具备专家级的复杂决策能力。 4. 消费
    丙丁先生 2025-01-07 09:25 117浏览
  • By Toradex 秦海1). 简介嵌入式平台设备基于Yocto Linux 在开发后期量产前期,为了安全以及提高启动速度等考虑,希望将 ARM 处理器平台的 Debug Console 输出关闭,本文就基于 NXP i.MX8MP ARM 处理器平台来演示相关流程。 本文所示例的平台来自于 Toradex Verdin i.MX8MP 嵌入式平台。  2. 准备a). Verdin i.MX8MP ARM核心版配合Dahlia载板并
    hai.qin_651820742 2025-01-07 14:52 108浏览
  • 故障现象一辆2017款东风风神AX7车,搭载DFMA14T发动机,累计行驶里程约为13.7万km。该车冷起动后怠速运转正常,热机后怠速运转不稳,组合仪表上的发动机转速表指针上下轻微抖动。 故障诊断 用故障检测仪检测,发动机控制单元中无故障代码存储;读取发动机数据流,发现进气歧管绝对压力波动明显,有时能达到69 kPa,明显偏高,推断可能的原因有:进气系统漏气;进气歧管绝对压力传感器信号失真;发动机机械故障。首先从节气门处打烟雾,没有发现进气管周围有漏气的地方;接着拔下进气管上的两个真空
    虹科Pico汽车示波器 2025-01-08 16:51 70浏览
  •  在全球能源结构加速向清洁、可再生方向转型的今天,风力发电作为一种绿色能源,已成为各国新能源发展的重要组成部分。然而,风力发电系统在复杂的环境中长时间运行,对系统的安全性、稳定性和抗干扰能力提出了极高要求。光耦(光电耦合器)作为一种电气隔离与信号传输器件,凭借其优秀的隔离保护性能和信号传输能力,已成为风力发电系统中不可或缺的关键组件。 风力发电系统对隔离与控制的需求风力发电系统中,包括发电机、变流器、变压器和控制系统等多个部分,通常工作在高压、大功率的环境中。光耦在这里扮演了
    晶台光耦 2025-01-08 16:03 61浏览
  • 「他明明跟我同梯进来,为什么就是升得比我快?」许多人都有这样的疑问:明明就战绩也不比隔壁同事差,升迁之路却比别人苦。其实,之间的差异就在于「领导力」。並非必须当管理者才需要「领导力」,而是散发领导力特质的人,才更容易被晓明。许多领导力和特质,都可以通过努力和学习获得,因此就算不是天生的领导者,也能成为一个具备领导魅力的人,进而被老板看见,向你伸出升迁的橘子枝。领导力是什么?领导力是一种能力或特质,甚至可以说是一种「影响力」。好的领导者通常具备影响和鼓励他人的能力,并导引他们朝着共同的目标和愿景前
    优思学院 2025-01-08 14:54 66浏览
  • 每日可见的315MHz和433MHz遥控模块,你能分清楚吗?众所周知,一套遥控设备主要由发射部分和接收部分组成,发射器可以将控制者的控制按键经过编码,调制到射频信号上面,然后经天线发射出无线信号。而接收器是将天线接收到的无线信号进行解码,从而得到与控制按键相对应的信号,然后再去控制相应的设备工作。当前,常见的遥控设备主要分为红外遥控与无线电遥控两大类,其主要区别为所采用的载波频率及其应用场景不一致。红外遥控设备所采用的射频信号频率一般为38kHz,通常应用在电视、投影仪等设备中;而无线电遥控设备
    华普微HOPERF 2025-01-06 15:29 164浏览
  • 在智能家居领域中,Wi-Fi、蓝牙、Zigbee、Thread与Z-Wave等无线通信协议是构建短距物联局域网的关键手段,它们常在实际应用中交叉运用,以满足智能家居生态系统多样化的功能需求。然而,这些协议之间并未遵循统一的互通标准,缺乏直接的互操作性,在进行组网时需要引入额外的网关作为“翻译桥梁”,极大地增加了系统的复杂性。 同时,Apple HomeKit、SamSung SmartThings、Amazon Alexa、Google Home等主流智能家居平台为了提升市占率与消费者
    华普微HOPERF 2025-01-06 17:23 204浏览
  • 村田是目前全球量产硅电容的领先企业,其在2016年收购了法国IPDiA头部硅电容器公司,并于2023年6月宣布投资约100亿日元将硅电容产能提升两倍。以下内容主要来自村田官网信息整理,村田高密度硅电容器采用半导体MOS工艺开发,并使用3D结构来大幅增加电极表面,因此在给定的占位面积内增加了静电容量。村田的硅技术以嵌入非结晶基板的单片结构为基础(单层MIM和多层MIM—MIM是指金属 / 绝缘体/ 金属) 村田硅电容采用先进3D拓扑结构在100um内,使开发的有效静电容量面积相当于80个
    知白 2025-01-07 15:02 144浏览
  • 这篇内容主要讨论三个基本问题,硅电容是什么,为什么要使用硅电容,如何正确使用硅电容?1.  硅电容是什么首先我们需要了解电容是什么?物理学上电容的概念指的是给定电位差下自由电荷的储藏量,记为C,单位是F,指的是容纳电荷的能力,C=εS/d=ε0εrS/4πkd(真空)=Q/U。百度百科上电容器的概念指的是两个相互靠近的导体,中间夹一层不导电的绝缘介质。通过观察电容本身的定义公式中可以看到,在各个变量中比较能够改变的就是εr,S和d,也就是介质的介电常数,金属板有效相对面积以及距离。当前
    知白 2025-01-06 12:04 223浏览
  • 本文介绍编译Android13 ROOT权限固件的方法,触觉智能RK3562开发板演示,搭载4核A53处理器,主频高达2.0GHz;内置独立1Tops算力NPU,可应用于物联网网关、平板电脑、智能家居、教育电子、工业显示与控制等行业。关闭selinux修改此文件("+"号为修改内容)device/rockchip/common/BoardConfig.mkBOARD_BOOT_HEADER_VERSION ?= 2BOARD_MKBOOTIMG_ARGS :=BOARD_PREBUILT_DTB
    Industio_触觉智能 2025-01-08 00:06 92浏览
我要评论
0
点击右上角,分享到朋友圈 我知道啦
请使用浏览器分享功能 我知道啦