当前位置：首页 > news >正文

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

news 来源：原创 2025/7/6 3:07:48

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

在这里插入图片描述

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

在这里插入图片描述

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

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

编程日记 2025/7/6 3:07:48

github不翻墙就可以访问

目录简介资料准备windows平台设置下载运行git设置firefox设置 ubuntu平台设置下载启动服务设置系统代理git设置firefox设置证书注意事项简介由于github访问不稳定,严重影响了国内软件开发,在网上搜索并验证了一些方法.现在整理出来一个可以正常使用的方法, 在windows和Lin…...

编程日记 2025/7/2 1:26:29

【AI-32】浅显易懂地说一下LangChain

好的！我来用最通俗的方式解释一下 LangChain 是什么，以及它为什么在 AI 开发中如此重要。一句话理解 LangChain LangChain 是一个帮你快速搭建AI应用的工具箱，它把大型语言模型（如 GPT）和外部数据、计算工具、业务流…...

编程日记 2025/7/4 1:13:32

使用 Nginx 搭建代理服务器（正向代理 HTTPS 网站）指南

在网络应用中，代理服务器是用于中转用户请求和服务端响应的工具。正向代理主要用于客户端与外部服务器之间的访问代理，帮助客户端隐藏其 IP 地址或访问受限资源。本文将详细介绍如何使用 Nginx 搭建正向代理服务器，特别是针对 HTTPS 网站的代…...

编程日记 2025/6/30 20:17:05

Linux学习笔记之进程

进程进程的定义进程是计算机中的程序关于某数据集合上的一次运行活动，是系统进行资源分配的基本单位，也是操作系统结构的基础。例如当QQ程序运行的时候，计算机会先从磁盘读取QQ程序到内存，然后OS管理这个程序，…...

编程日记 2025/7/3 7:07:22

win11 终端乱码导致IDE 各种输出也乱码

因为 win11 终端乱码导致IDE 各种输出也乱码导致作者对此十分头大。所以研究了各种方法。单独设置终端编码对 HKEY_CURRENT_USER\Console 注册表进行修改对 HKEY_LOCAL_MACHINE\Software\Microsoft\Command Processo 注册表进行修改使用命令[Console]::OutputEncoding [Syst…...

编程日记 2025/7/6 2:15:50

iOS主要知识点梳理回顾-5-运行时方法交换

方法交换可以放在 load 或 initialize 方法中，也可以自己根据时机来空，比如开启某个开关后才需要交换方法。如果是在load中调用，交换工作会在类加载时（程序启动）自动调用；如果是在initialize中调用&#xf…...

编程日记 2025/7/2 14:41:08

python后端调用Deep Seek API

python后端调用Deep Seek API 需要依次下载 ●Ollama ●Deepseek R1 LLM模型 ●嵌入模型nomic-embed-text / bge-m3 ●AnythingLLM 参考教程： Deepseek R1打造本地化RAG知识库:安装部署使用详细教程手把手教你：deepseek R1基于 AnythingLLM API 调用本地…...

编程日记 2025/7/4 13:17:08

Unity开发播放视频

Unity开发播放视频介绍VideoPlayer原理步骤VideoPlayer动态加载总结介绍原生Unity播放视频VideoPlayer播放视频，这里我没有选择使用插件，还有一个播放视频的插件也可以AVPro Video，这里不过多介绍就说一下原生VideoPlayer的基础用法。 …...

编程日记 2025/7/2 22:41:45

F. Friendly Group 图中选择一个点-1 边两端点都选择1 边一个端点选择-1 添加链接描述 #include<iostream> using namespace std; #include<vector> #include<cstring> const int N300010; int n,m; vector<int> G[N]; int temp1,temp2; bool vis[N…...

编程日记 2025/7/2 8:46:05

gis风场加载

https://gitee.com/openGPL json数据格式使用v1 “sakitam-gis/mapbox-wind”: “1.1.2” import { WindLayer } from "sakitam-gis/mapbox-wind"; windLayer new WindLayer("wind", res.data, {windOptions: {// colorScale: (m) > {// // consol…...

编程日记 2025/7/1 22:49:18

大疆无人机需要的kml文件如何制作kml导出（大疆KML文件）

大疆无人机需要的轨迹kml文件，是一种专门的格式，这个kml里面只有轨迹点，其它的属性信息都不需要。 BigemapPro提供了专门的大疆格式输出， 软件这里下载 www.bigemap.com 安装后，kml导入如下图： 然后选择…...

编程日记 2025/7/4 15:55:31

【CXX】2 CXX blobstore客户端说明

本示例演示了一个调用blobstore服务的C客户端的Rust应用程序。事实上，我们会看到两个方向的调用：Rust到C以及C到Rust。对于您自己的用例，您可能只需要其中一个方向。示例中涉及的所有代码都显示在此页面上，但它也以可运行的形式提…...

编程日记 2025/7/3 8:01:24

图数据库neo4j进阶(一):csv文件导入节点及关系

CSV 一、load csv二、neo4j-admin import<一>、导入入口<二>、文件准备<三>、命令详解一、load csv 在neo4j Browser中使用Cypher语句LOAD CSV,对于数据量比较大的情况,建议先运行create constraint语句来生成约束 create constraint for (s:Student) req…...

编程日记 2025/7/2 5:10:30

3.3 学习UVM中的uvm_driver 类分为几步？

文章目录前言1. 定义2. 核心功能3. 适用场景4. 使用方法5. 完整代码示例5.1 事务类定义5.2 Driver 类定义5.3 Sequencer 类定义5.4 测试平台 6. 代码说明7. 总结前言以下是关于 UVM 中 uvm_driver 的详细解释、核心功能、适用场景、使用方法以及一个完整的代码示例&#xff…...

编程日记 2025/7/3 1:10:20

Docker 常用命令基础详解（一）

一、Docker 初相识在当今数字化时代，软件开发和部署的效率与灵活性成为了关键因素。Docker，作为一款开源的应用容器引擎，犹如一颗璀璨的明星，照亮了软件开发与部署的道路，为开发者们带来了前所未有的便利。它就像是一…...

编程日记 2025/7/3 4:59:45

机器学习之AAE（Adversarial Autoencoder，对抗自编码器）生成数据样本

对抗自编码器（Adversarial Autoencoder，AAE）是一种结合了自编码器（Autoencoder）和生成对抗网络（GAN）的方法，用于生成新数据样本。它的目标是学习到数据的潜在分布，并通过生成对抗训练来优化潜在空间，使其接近一个已知的简单分布（例如，高斯分布）。 AAE的结构和训练…...

编程日记 2025/7/4 20:02:39

用大模型学大模型03-数学基础概率论最大似然估计（MLE）最大后验估计（MAP）

https://metaso.cn/s/r4kq4Ni 什么是最大似然估计（MLE）最大后验估计（MAP）？深度学习中如何应用，举例说明。好的，我现在需要回答关于最大似然估计（MLE）和最大后验估计&…...

编程日记 2025/6/30 9:40:47

名词解释：npm，cnpm，yarn，vite，vue，electron

1. npm (Node Package Manager) 读音: “N-P-M” 或者直接读作 “npm”。 npm 是 Node.js 的官方包管理器，用于安装、发布和管理 JavaScript 软件包。它允许开发者轻松地共享代码，并且可以通过命令行工具来管理依赖关系。通过 npm init 命令可以交互式…...

编程日记 2025/7/3 16:48:33

ESXi安装【真机和虚拟机】（超详细）

项目简介： ESXi（Elastic Sky X Integrated）是VMware公司开发的一种裸机虚拟化管理程序，允许用户在单一物理服务器上运行多个虚拟机（VM）。它直接安装在服务器硬件上，而不是操作系统之上&#xff…...

编程日记 2025/7/2 13:03:04

每日一题——矩阵最长递增路径

矩阵最长递增路径问题题目描述数据范围：进阶要求：示例示例 1示例 2 题解思路算法步骤：代码实现代码解释复杂度分析总结题目描述给定一个 n 行 m 列的矩阵 matrix，矩阵内所有数均为非负整数。你需要在矩阵中找到一条最长路径&a…...

编程日记 2025/6/30 1:28:11

设置ollama接口能外部访问

为了配置Ollama以允许外网访问，你可以按照以下步骤进行操作： ‌确认Ollama服务已正确安装并运行‌： 使用以下命令检查Ollama服务的状态： bash Copy Code systemctl status ollama如果服务未运行，使用以下命令启动它&…...

编程日记 2025/7/1 11:47:05

TOML介绍

0 Preface/Foreword TOML，一种配置文件格式。Toms Obvious Minimal Language. 1 介绍 TOML: Toms Obvious Minimal Language，“显而易见的最小化语言 ” JSON：不支持注释 YAML：过于复杂...

编程日记 2025/6/28 11:36:27

macOS部署DeepSeek-r1

好奇，跟着网友们的操作试了一下网上方案很多，主要参考的是这篇 DeepSeek 接入 PyCharm，轻松助力编程_pycharm deepseek-CSDN博客方案是：PyCharm CodeGPT插件 DeepSeek-r1:1.5b 假设已经安装好了PyCharm PyCharm: the Pyth…...

编程日记 2025/6/30 18:22:00

从云原生到 AI 原生，谈谈我经历的网关发展历程和趋势

作者：谢吉宝（唐三） 编者按： 云原生 API 网关系列教程即将推出，欢迎文末查看教程内容。本文整理自阿里云智能集团资深技术专家，云原生产品线中间件负责人谢吉宝（唐三） 在云栖大会的精…...

编程日记 2025/7/1 18:00:29

京东旋转验证码分析

声明: 本文章中所有内容仅供学习交流使用，不用于其他任何目的，抓包内容、敏感网址、数据接口等均已做脱敏处理，严禁用于商业用途和非法用途，否则由此产生的一切后果均与作者无关！ 逆向分析使用的第三方接码平台识别…...

编程日记 2025/7/2 21:15:03

R18 XR L1 enhancement

这篇是R18 XR的最后一部分，主要是L1方面的增强。这部分增强大概的背景如下。一些 XR 应用（例如增强现实）不仅在 DL 方向需要高数据速率，在 UL 方向也需要高数据速率。如果应用需要在 UL 方向传输视频流量，则 UL 中支持的 XR 用户数量可能非常有限。因此，增加有限的时间…...

编程日记 2025/7/2 21:16:40

利用Java爬虫按图搜索1688商品（拍立淘）：实战案例指南

在电商领域，按图搜索功能（如1688的“拍立淘”）为用户提供了更直观、便捷的购物体验。通过上传图片，用户可以快速找到与图片相似的商品。本文将详细介绍如何利用Java爬虫技术实现按图搜索1688商品，并获取其详情数据。 …...

编程日记 2025/6/30 17:50:29

算法-计算字符的最短距离

力扣题目：821. 字符的最短距离 - 力扣（LeetCode） 给你一个字符串 s 和一个字符 c ，且 c 是 s 中出现过的字符。返回一个整数数组 answer ，其中 answer.length s.length 且 answer[i] 是 s 中从下标 i 到离它最近 …...

编程日记 2025/7/2 1:18:27

sqlilabs--小实验

一、先盲注判断 ?id1 and sleep(2)-- 如果发现页面存在注点，使用时间盲注脚本进行注入 import requestsdef inject_database(url):name for i in range(1, 20): # 假设数据库名称长度不超过20low 48 # 0high 122 # zmiddle (low high) // 2while low &l…...

编程日记 2025/7/4 18:04:45

【JavaScript爬虫记录】记录一下使用JavaScript爬取m4s流视频过程(内含ffmpeg合并)

前言前段时间发现了一个很喜欢的视频,可惜网站不让下载,简单看了一下视频是被切片成m4s格式的流文件,初步想法是将所有的流文件下载下来然后使用ffmpeg合并成一个完整的mp4,于是写了一段脚本来实现一下,电脑没有配python环境,所以使用JavaScript实现,合并功能需要安装ffmpeg,…...

编程日记 2025/7/2 14:22:05

腿足机器人之一- 机械与电子组件概览

腿足机器人之一机械与电子组件概览引言机械组件骨架材料关节设计关节机械组件轴承（ings）连杆（Linkages）齿轮（Gears） 电气组件电机控制器传感器四足机器人设计双足机器人设计波士顿Atlas机器人引言腿足…...

编程日记 2025/7/2 13:02:00

利用二分法+布尔盲注、时间盲注进行sql注入

一、布尔盲注： import requestsdef binary_search_character(url, query, index, low32, high127):while low < high:mid (low high 1) // 2payload f"1 AND ASCII(SUBSTRING(({query}),{index},1)) > {mid} -- "res {"id": payloa…...

编程日记 2025/7/3 13:54:52

本地部署DeepSeek Nodejs版

目录 1.下载 Ollama 2.下载DeepSeek模型 3.下载 ollama.js 1.下载 Ollama https://ollama.com/ 下载之后点击安装，等待安装成功后，打开cmd窗口，输入以下指令： ollama -v 如果显示了版本号，则代表已经下载成功了。…...

编程日记 2025/7/3 12:51:45

mapbox进阶，添加绘图扩展插件，绘制任意方向矩形

👨‍⚕️ 主页： gis分享者 👨‍⚕️ 感谢各位大佬点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍⚕️ 收录于专栏：mapbox 从入门到精通文章目录一、🍀前言1.1 ☘️mapboxgl.Map 地图对象1.2 ☘️mapboxgl.Map style属性1.3 ☘️MapboxDraw 绘图控件二、🍀添加绘图扩…...

编程日记 2025/6/28 5:19:16

哈希槽算法与一致性哈希算法比较

Redis 集群模式使用的哈希槽（Hash Slot） 算法与传统的一致性哈希（Consistent Hashing） 算法在数据分布和节点管理上有显著的区别。以下是两者的详细比较： 1. Redis 哈希槽算法 1.1 基本原理 Redis 集群将整个数据集…...

编程日记 2025/7/2 15:49:20

DeepSeek+Excel 效率翻倍

2025年初，DeepSeek以惊人的效率突破技术壁垒，用极低的成本实现了与行业顶尖AI相媲美的性能，瞬间成为全球科技领域的热门话题。那么AI工具的普及将如何改变我们的工作方式？Excel会被取代吗？ 今天，珠珠带你…...

编程日记 2025/6/30 1:27:14

【个人开发】cuda12.6安装vllm安装实践【内含踩坑经验】

1. 背景 vLLM是一个快速且易于使用的LLM推理和服务库。企业级应用比较普遍，尝试安装相关环境，尝试使用。 2. 环境模块版本python3.10CUDA12.6torch2.5.1xformers0.0.28.post3flash_attn2.7.4vllm0.6.4.post1 2.1 安装flash_attn 具体选择什么版本&…...

编程日记 2025/7/3 7:24:06

Prompt通用技巧

Prompt 的典型构成角色:给 AI定义一个最匹配任务的角色，比如:「你是一位软件工程师」「你是一位小学老师」指示:对任务进行描述上下文: 给出与任务相关的其它背景信息(尤其在多轮交互中)。例子 : 必要时给出举例，学术中称为 one-shot learning,few-sho…...

编程日记 2025/7/2 15:45:19

【R语言】方差分析

一、基本术语在R语言以及更广泛的统计学领域中，方差分析（ANOVA，即Analysis of Variance）是一种用于比较两个或更多组数据的均值是否存在显著差异的统计方法。可以使用aov()函数或其他相关函数（如anova()）…...

编程日记 2025/7/3 7:26:25

XSS 常用标签及绕过姿势总结

XSS 常用标签及绕过姿势总结一、xss 常见标签语句 0x01. 标签 <a href"javascript:alert(1)">test</a> <a href"x" onfocus"alert(xss);" autofocus"">xss</a> <a href"x" onclickeval(&quo…...

编程日记 2025/7/6 2:43:20

haproxy详解笔记

一、概述 HAProxy（High Availability Proxy）是一款开源的高性能 TCP/HTTP 负载均衡器和代理服务器，用于将大量并发连接分发到多个服务器上，从而提高系统的可用性和负载能力。它支持多种负载均衡算法，能够根据服务器的…...

编程日记 2025/7/3 17:41:27

「软件设计模式」工厂方法模式 vs 抽象工厂模式

前言在软件工程领域，设计模式是解决常见问题的经典方案。本文将深入探讨两种创建型模式：工厂方法模式和抽象工厂模式，通过理论解析与实战代码示例，帮助开发者掌握这两种模式的精髓。一、工厂方法模式（Factory Metho…...

编程日记 2025/7/1 3:07:50

Flutter_学习记录_数据更新的学习

Flutter 如果界面上有数据更新时，目前学习到的有3种： 第一种： 直接用 StatefulWidget组件，然后当数据更新时，调用setState的方法更新数据，页面上的数据会直接更新；第二种： 用 State…...

编程日记 2025/7/1 3:10:19

淘宝订单列表Fragment转场动画卡顿解决方案

如何应对产品形态与产品节奏相对确定情况下转变为『在业务需求与产品形态高度不确定性的情况下，如何实现业务交付时间与交付质量的确定性』。我们希望通过混合架构（Native 业务容器 Weex 2.0）作为未来交易终端架构的重要演进方向&#xff0c…...

编程日记 2025/7/1 1:21:22

【状态空间方程】对于状态空间方程矩阵D≠0时的状态反馈与滑模控制

又到新的一年啦，2025新年快乐~。前几个月都没更新，主要还是因为不能把项目上的私密工作写进去，所以暂时没啥可写的。最近在山里实习，突然想起年前遗留了个问题一直没解决，没想到这两天在deepseek的加持下很快解决了&am…...

编程日记 2025/7/5 15:07:16

优雅的git log输出内容更加醒目

执行命令 git config --global alias.lg "log --graph --prettyformat:%C(red)%h%C(reset) - %C(yellow)%d%C(reset) %C(magenta)<%an>%C(reset) %C(cyan)(%ad)%C(reset) %C(green)%s%C(reset) (%cr) --abbrev-commit --dateformat:%Y-%m-%d %H:%M:%S"...

编程日记 2025/7/3 20:33:39

PySide（PyQT）使用场景（QGraphicsScene）进行动态标注的一个demo

用以标注图像的一个基本框架demo import sys from PySide6.QtWidgets import QApplication, QGraphicsView, QGraphicsScene, QMainWindow, QLabel, QGraphicsPixmapItem from PySide6.QtGui import QPixmap, QPainter, QTransform from PySide6.QtCore import Qt, QPointF, S…...

编程日记 2025/7/5 20:39:57

LeetCode每日精进：876.链表的中间结点

题目链接：876.链表的中间结点题目描述： 给你单链表的头结点 head ，请你找出并返回链表的中间结点。如果有两个中间结点，则返回第二个中间结点。示例 1： 输入：head [1,2,3,4,5] 输出：[3,4,5…...

编程日记 2025/7/4 12:36:11

ollama实践笔记

目录一、linux安装文件命令： 二、启动ollama 三、linux 如何把ollama serve做为服务方式启动四、安装deepseek-r1 五、如何在网页中使用ollama？ ‌5.1 安装Open WebUI【不推荐】 5.2 安装ollama-webui-lite 六、Ubuntu安装docker、只需要一句话…...

编程日记 2025/7/2 10:06:19

用 AWTK Designer 新建一个应用程序

2.1. 新建应用程序

2.2. 为按钮编写代码

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

3. 编写配置文件

4. 编译 WEB 应用程序

5 运行

相关文章：