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

XMLHttpRequest 改变了 Web 应用程序与服务器交换数据的方式,fetch 是 XMLHttpRequest 继任者,具有更简洁的语法和更好的 Promise 集成。本文介绍一下如何使用 JS 语言开发 AWTK-WEB 应用程序,并用 fetch 访问远程数据。

用 AWTK Designer 新建一个应用程序

先安装 AWTK Designer

2.1. 新建应用程序

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

在这里插入图片描述

2.2. 为按钮编写代码

  • 删除 src 目录下全部文件(留着也可以,只是看起来比较乱),在 src 目录创建 js 目录。

  • 在 src/js 下创建 application.js ,内容如下

function applicationInit() {home_page_open();
}applicationInit()
  • 在 src/js 下创建 home_page.js,内容如下
async function on_update_clicked(evt) {var e = TPointerEvent.cast(evt);var widget = TButton.cast(e.target); const win = widget.getWindow();const url = "http://localhost:8080/AwtkApplicationJSHttp/res/assets/default/raw/data/weather.json";try {const response = await fetch(url);if (!response.ok) {throw new Error("Network response was not ok " + response.statusText);}const json = await response.json();win.setChildText("city", json.cityInfo.city);win.setChildText("wendu", json.data.wendu);win.setChildText("ganmao", json.data.ganmao);win.setChildText("quality", json.data.quality);win.setChildText("shidu", json.data.shidu);win.setChildTextWithDouble("pm25", "%.0f", json.data.pm25);} catch (error) {console.error("There was a problem with the fetch operation:", error);}
}function home_page_open() {var win = TWindow.open("home_page");var update = win.lookup("update", true);update.on(TEventType.CLICK, on_update_clicked);win.layout();
}

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

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

在这里插入图片描述

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

在这里插入图片描述

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

3. 编写配置文件

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

这里给出一个例子,可以在此基础上进行修改(该文件位于 examples/AwtkApplicationJSHttp/build.json ):

{"name": "AwtkApplicationJSHttp","version": "1.0","app_type":"js","author": "xianjimli@hotmail.com","copyright": "Guangzhou ZHIYUAN Electronics Co.,Ltd.","themes":["default"],"sources": ["src/js/*.js"]
}

4. 编译 WEB 应用程序

进入 awtk-web 目录,不同平台使用不同的脚本编译:

  • Windows 平台
./build_win32.sh examples/AwtkApplicationJSHttp/build.json release
  • Linux 平台
./build_linux.sh examples/AwtkApplicationJSHttp/build.json release
  • MacOS 平台
./build_mac.sh examples/AwtkApplicationJSHttp/build.json release

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

5 运行

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

在这里插入图片描述

点击 “更新” 按钮,可以看到数据更新。

在这里插入图片描述

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

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

相关文章

餐饮油烟在线监测仪,守护蓝天的隐形卫士

在城市化的快速发展中,餐饮业作为人们日常生活不可或缺的一部分,带来了便捷与美味的同时,也产生了大量餐饮油烟污染问题。据研究表明,长期暴露于高浓度油烟环境中不仅影响人体健康,还对空气质量造成严重破坏。为了有效…

从Sora到有言:3D视频生成技术的突破与应用

近年来,AIGC领域飞速发展,这个词也越来越高频地出现在了大家的生活中。AIGC 能完成的任务也越来越多,大模型的能力飞速增长 —— 从Deepseek生成文字,到StableDiffusion生成图像,再到Sora可以生成视频。 而现在&#x…

xiao单栏/网格布局typecho主题模板源码

源码介绍 xiao单栏/网格布局typecho主题模板源码 一款基于 bootstrap5.3.3 开发的 typecho 单栏主题 效果预览 源码获取 xiao单栏/网格布局typecho主题模板源码

如何运用边缘计算控制器提升智能工厂的竞争力?

制造业正经历一场深刻的变革。其中,边缘计算作为一项关键技术,在提升生产效率、降低成本以及实现智能制造方面发挥着至关重要的作用。本文将探讨边缘计算在智能工厂中的应用场景及其带来的价值。 边缘计算简介 边缘计算是一种分布式计算范式&#xff0…

今日学习总结

复习了dfs的相关内容&#xff0c;完成了一道dfs相关的题目。 P2371挑战算周长 #include <stdio.h> // 定义一个二维字符数组 map 用于存储地图信息&#xff0c;大小为 25x25 char map[25][25]; // 定义一个常量二维数组 d 作为方向增量数组&#xff0c;用于表示 8 个不同…

SpringMVC学习使用

一、SpringMVC简单理解 1.1 Spring与Web环境集成 1.1.1 ApplicationContext应用上下文获取方式 应用上下文对象是通过new ClasspathXmlApplicationContext(spring配置文件) 方式获取的&#xff0c;但是每次从容器中获得Bean时都要编写new ClasspathXmlApplicationContext(sp…

HCIA项目实践---OSPF的知识和原理总结

9.5 OSPF 9.5.1 从哪些角度评判一个动态路由协议的好坏&#xff1f; &#xff08;1&#xff09;选路佳&#xff08;是否会出环&#xff09; OSPF 协议采用链路状态算法&#xff0c;通过收集网络拓扑信息来计算最短路径&#xff0c;从根本上避免了路由环路的产生。 &#xff08…

算法题(67):最长连续序列

审题&#xff1a; 需要我们在O&#xff08;n&#xff09;的时间复杂度下找到最长的连续序列长度 思路&#xff1a; 我们可以用两层for循环&#xff1a; 第一层是依次对每个数据遍历&#xff0c;让他们当序列的首元素。 第二层是访问除了该元素的其他元素 但是此时时间复杂度来到…

2021年全国研究生数学建模竞赛华为杯E题信号干扰下的超宽带(UWB)精确定位问题求解全过程文档及程序

2021年全国研究生数学建模竞赛华为杯 E题 信号干扰下的超宽带(UWB)精确定位问题 原题再现&#xff1a; 一、背景   UWB&#xff08;Ultra-Wideband&#xff09;技术也被称之为“超宽带”&#xff0c;又称之为脉冲无线电技术。这是一种无需任何载波&#xff0c;通过发送纳秒…

Vue3折线图,柱状图,饼图,各种图表,适用于所有全平台

开发工具&#xff1a;HBuilderX编译器&#xff0c;uniapp&#xff0c;Vue3&#xff1b; 目标&#xff1a;全平台适用&#xff0c;Web端&#xff0c;小程序端&#xff0c;Android端&#xff0c;ios端&#xff0c;快应用等所有平台&#xff0c;鸿蒙app&#xff0c;前端&#xff…

联想电脑如何进入BIOS?

打开设置 下滑找到更新与安全 点击恢复和立即重新启动 选择疑难解答 选择UEFI固件设置 然后如果有重启点击重启 重启开机时一直点击FNF10进入BIOS界面

ICIR2025 | CubeDiff:重新利用基于扩散的图像模型来生成360°全景图

CubeDiff是一种使用基于扩散的图像模型生成 360 全景图的新型框架。通过利用立方体图表示和微调预训练的文本到图像模型&#xff0c;CubeDiff 简化了全景图生成过程&#xff0c;提供了高质量、一致的全景图。 CubeDiff 利用立方体图来表示 360 全景图&#xff0c;并在一次传递中…

YOLO11网络结构以及改进1

YOLO11 1.YOLO11网络结构图在哪里&#xff1f;2.对应的网络结构图3.每一个模块详解3.1 Conv模块3.2关于卷积模块3.3 关于给各个模块指定参数的细节 4.加入CBAM 1.YOLO11网络结构图在哪里&#xff1f; 2.对应的网络结构图 3.每一个模块详解 3.1 Conv模块 位置&#xff1a;ultr…

兔兔答题应用于微信考试、付费考试、社会调查问卷、明星知识问答、员工培训考核、模拟自测、企业面试、试题库等多种场景。

“兔兔答题系统”是一个面向教育、培训和在线测评场景的智能化答题平台&#xff08;兔兔答题官网地址&#xff09;。其设计目标是帮助用户高效完成题目练习、考试组织及学习效果分析&#xff0c;通常具备以下核心功能和特色&#xff1a; 一、核心功能 题库管理 支持多题型录入&…

网络安全防范

实践内容 学习总结 PDR&#xff0c;$$P^2$$DR安全模型。 防火墙&#xff08;Firewall&#xff09;&#xff1a; 网络访问控制机制&#xff0c;布置在网际间通信的唯一通道上。 不足&#xff1a;无法防护内部威胁&#xff0c;无法阻止非网络传播形式的病毒&#xff0c;安全策略…

Java 设计模式之组合模式

文章目录 Java 设计模式之组合模式概述UML代码实现 Java 设计模式之组合模式 概述 组合模式(Composite)&#xff1a;将对象组合成树形结构以表示’部分-整体’的层次结构。组合模式使得用户对单个对象和组合对象的使用具有一致性。优点&#xff1a;客户端可以统一处理单个对象…

基于VS2022在Windows上首次尝试开发C++ gRPC服务端和客户端的详细步骤

文章目录 **1. 创建解决方案与项目****2. 编写proto文件****3. 生成gRPC代码****4. 配置项目属性****服务端项目&#xff08;gRPCServer&#xff09;****客户端项目&#xff08;gRPCClient&#xff09;** **5. 实现服务端代码****6. 实现客户端代码****7. 编译与运行****注意事…

云创智城充电系统:基于 SpringCloud 的高可用、可扩展架构详解-多租户、多协议兼容、分账与互联互通功能实现

在新能源汽车越来越普及的今天&#xff0c;充电基础设施的管理和运营变得越来越重要。云创智城充电系统&#xff0c;就像一个超级智能管家&#xff0c;为新能源充电带来了全新的解决方案&#xff0c;让充电这件事变得更方便、更高效、更安全。 一、厉害的技术架构&#xff0c;让…

【第2章:神经网络基础与实现——2.4 实战案例:使用TensorFlow或PyTorch实现简单的MLP模型】

一、神经网络基础 咱先聊聊神经网络的基础概念。神经网络,简单来说,就是模仿人类大脑神经元结构构建的计算模型。它由大量的节点(也就是神经元)和连接这些节点的边组成。这些节点就像大脑里的一个个小处理器,而边则负责传递信息。 神经元 神经元是神经网络的基本单元。…

【Uniapp】关于实现下拉刷新的三种方式

在小程序、h5等地方中&#xff0c;常常会用到下拉刷新这个功能&#xff0c;今天来讲解实现这个功能的三种方式&#xff1a;全局下拉刷新&#xff0c;组件局部下拉刷新&#xff0c;嵌套组件下拉刷新。 全局下拉刷新 这个方式简单&#xff0c;性能佳&#xff0c;最推荐&#xf…