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

先安装 AWTK Designer

用 AWTK Designer 新建一个应用程序

2.1. 新建应用程序

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

  • 在窗口上放置一个按钮
  • 将按钮的名称改为 “close”
  • 将按钮的文本改为 “关闭”

在这里插入图片描述

2.2. 为按钮编写代码

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

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

  • 添加 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;
}

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

在这里插入图片描述

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

在这里插入图片描述

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

3. 编写配置文件

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

这里给出一个例子,可以在此基础上进行修改(该文件位于 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 等平台,可以自行删除相应的配置。

4. 编译 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

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

5 运行

  • 正常启动
./start_web.sh
  • 调试启动
start_web_debug.sh
  • 用浏览器打开 URL:http://localhost:8080/AwtkApplicationC

可以看到

在这里插入图片描述

  • 用浏览器打开 http://localhost:8080/AwtkApplicationC/simulator.html

可以看到

在这里插入图片描述

  • 用浏览器打开 http://localhost:8080/AwtkApplicationC/app.html

可以看到

在这里插入图片描述

6、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 函数并不能退出应用程序。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/60574.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

客户流失分析综述

引言 客户流失这个术语通常用来描述在特定时间或合同期内停止与公司进行业务往来的客户倾向性[1]。传统上,关于客户流失的研究始于客户关系管理(CRM)[2]。在运营服务时,防止客户流失至关重要。过去,客户获取相对于流失…

PDF内容提取,MinerU使用

准备环境 # python 3.10 python3 -m pip install huggingface_hub python3 -m pip install modelscope python3 -m pip install -U magic-pdf[full] --extra-index-url https://wheels.myhloli.com下载需要的模型 import json import osimport requests from huggingface_hub…

Kafka 分区分配及再平衡策略深度解析与消费者事务和数据积压的简单介绍

Kafka:分布式消息系统的核心原理与安装部署-CSDN博客 自定义 Kafka 脚本 kf-use.sh 的解析与功能与应用示例-CSDN博客 Kafka 生产者全面解析:从基础原理到高级实践-CSDN博客 Kafka 生产者优化与数据处理经验-CSDN博客 Kafka 工作流程解析&#xff1a…

【2024APMCM亚太赛A题】完整参考论文与代码分享

A题 一、问题重述二、问题分析问题一:水下图像分类问题二:退化原因建模问题三:针对单一退化的图像增强方法问题四:复杂场景的综合增强模型问题五:针对性增强与综合增强的比较 三、问题假设退化特征独立性假设物理模型普…

数据结构(初阶6)---二叉树(遍历——递归的艺术)(详解)

二叉树的遍历与练习 一.二叉树的基本遍历形式1.前序遍历(深度优先遍历)2.中序遍历(深度优先遍历)3.后序遍历(深度优先遍历)4.层序遍历!!(广度优先遍历) 二.二叉树的leetcode小练习1.判断平衡二叉树1)正常解法2)优化解法 2.对称二叉…

ChatGPT 与其他 AI 技术在短视频营销中的技术应用与协同策略

摘要: 本文深入探讨了 ChatGPT 及其他 AI 技术在短视频营销中的应用。从技术层面剖析了这些技术如何助力短视频内容创作、个性化推荐、用户互动以及营销效果评估等多方面,通过具体方法分析、数据引用与大模型工具介绍,旨在为短视频营销领域提…

先安装Ubuntu20.04,再安装win10实现双系统

准备 一个刻录好Ubuntu20.04系统u盘一个刻录了Ventory的U盘,其中有Windows10的iso系统文件。Ventory参考Gparted分区软件,用于腾出一块硬盘空间安装Win10 过程 给win10腾出一块硬盘空间,设置为NTFS格式 Ubuntu系统中其实已经有GParted软件…

数据结构------树(Java语言描述)

一、树的基本概念 树是一种非线性的数据结构,它由节点组成,有一个特定的节点称为根节点,其余节点可以分为多个互不相交的子树。 树中的节点具有以下特点: 1.每个节点有零个或多个子节点。 2.除了根节点外,每个节点…

查看浏览器的请求头

爬虫时用到了请求头,虽然可以用网上公开的,但是还是想了解一下本机浏览器的。以 Edge 为例,其余浏览器通用。 打开浏览器任一网页,按F12打开DevTools;或鼠标右键,选择“检查”。首次打开界面应该显示在网页…

如何在Python中进行数学建模?

数学建模是数据科学中使用的强大工具,通过数学方程和算法来表示真实世界的系统和现象。Python拥有丰富的库生态系统,为开发和实现数学模型提供了一个很好的平台。本文将指导您完成Python中的数学建模过程,重点关注数据科学中的应用。 数学建…

前后端分离,解决vue+axios跨域和proxyTable不生效等问题

看到我这篇文章前可能你以前看过很多类似的文章。至少我是这样的,因为一直没有很好的解决问题。 正文 当我们通过webstorm等IDE开发工具启动项目的时候,通过命令控制台可以观察到启动项目的命令 如下: webpack-dev-server --inline --prog…

ES6 、ESNext 规范、编译工具babel

ES6 、ESNext 规范、编译工具简介 ES6ES(ECMAScript) vs JS常量进一步探讨 obj对象的扩展面试:使对象属性也不能更改——Object.freeze(obj) 解构deconstruction变量的解构赋值:数组解构赋值:对象解构赋值:…

阿里数字人工作 Emote Portrait Alive (EMO):基于 Diffusion 直接生成视频的数字人方案

TL;DR 2024 年 ECCV 阿里智能计算研究所的数字人工作,基于 diffusion 方法来直接的从音频到视频合成数字人,避免了中间的三维模型或面部 landmark 的需求,效果很好。 Paper name EMO: Emote Portrait Alive - Generating Expressive Portra…

candence: 如何快速设置SUBCLASS 的颜色

如何快速设置SUBCLASS 的颜色 一、一般操作 正常情况下修改SUBCLASS,需要如下步骤进行设置: 二、快速操作 右键,选择一个颜色即可

多目标优化算法:多目标海星优化算法(MOSFOA)求解ZDT1、ZDT2、ZDT3、ZDT4、ZDT6,提供完整MATLAB代码

一、海星优化算法 海星优化算法(Starfish Optimization Algorithm ,SFOA)是2024年提出的一种元启发式算法,该算法模拟了海星的行为,包括探索、捕食和再生。 算法灵感: SFOA的灵感来源于海星的捕食行为&…

实时质检-静音检测分析流程(运维人员使用)

前言 用户在实时质检时,开启了主叫或被叫静音检测功能,但是听录音时,主叫或被叫明明没有任何声音,但是通话没有被挂断。 说明主叫或被叫的静音阈值太低,导致系统没有把很小的声音认定为静音;或者检测非静音…

了解Redis(第一篇)

目录 Redis基础 什么事Redis Redis为什么这么快 除了 Redis,你还知道其他分布式缓存方案吗? 说-下 Redis 和 Memcached 的区别和共同点 为什么要用Redis? 什么是 Redis Module?有什么用? Redis基础 什么事Redis Redis (REmote DIctionary S…

D77【 python 接口自动化学习】- python基础之HTTP

day77 postman接口请求 学习日期:20241123 学习目标:http 定义及实战﹣﹣postman接口请求 学习笔记: get请求 post请求 总结 get请求用于查询数据post请求用于添加数据

Element-Ui组件(icon组件)

一、前言 本篇文章主要是对官网的Icon组件进行总结归纳Icon 图标 | Element Plus 在现代Web应用开发中,图标是用户界面设计中不可或缺的一部分。它们不仅提升了用户体验,还使得信息的传达更加直观和高效。本文主要对Element Plus 官方提供的Icon组件进行…

SpringMVC——简介及入门

SpringMVC简介 看到SpringMVC这个名字,我们会发现其中包含Spring,那么SpringMVC和Spring之间有怎样的关系呢? SpringMVC隶属于Spring,是Spring技术中的一部分。 那么SpringMVC是用来做什么的呢? 回想web阶段&#x…