搭建IoT小程序开发环境,创建一个应用

简介: 通过实验,了解阿里云IoT小程序应用的开发调试环境,以及如何创建新的应用并在PC模拟器上进行预览调试。

搭建IoT小程序开发环境,创建一个应用

1. 安装IoT小程序开发环境

一、安装NodeJS

  1. 通过NodeJS官网在终端中安装NodeJS,建议版本v16及以上。

说明:安装后系统具有node/npm两个命令。

  1. 在终端中执行如下命令,查看nodejs版本号。
node -v
输出:nodejs版本号

二、安装IoT小程序脚手架

框架脚手架提供项目创建、构建Debug & Release包、运行模拟器等能力。

  1. 安装脚手架。
# Linux or MacOS
sudo npm i aiot-vue-cli -g
# Windows
npm i aiot-vue-cli -g
  1. 查看脚手架版本,是否安装成功。
aiot-cli -V

三、安装VSCode开发IDE

JS前端开发推荐安装VSCode。

  1. 推荐您在VSCode官网地址下载VSCode。
  1. 安装VSCode。

四、安装VSCode插件

在VS Code的插件市场中,搜索HaaS UI,单击安装即可。

2. 安装运行PC模拟器环境

下载安装PC端的IoT小程序框架模拟器,用于在PC端开发调试IoT小程序应用,分Windows、Ubuntu和MacOS三个操作系统:

  • Windows模拟器安装运行。
  1. 下载:https://hli.aliyuncs.com/o/config/haasui/simulator/windows_x64/haasui-simulator-windows-64.zip
  2. 解压到自定义目录。
  3. 双击运行安装目录下的appx.exe。
  • Ubuntu模拟器安装运行。
  1. 下载:https://hli.aliyuncs.com/o/config/miniapp/haas-ui-simulator-ubuntu.zip
  2. 解压到自定义目录。
  3. 终端中运行 安装目录下的 ./appx程序。
  • MacOS模拟器安装运行。
  1. 下载:https://hli.aliyuncs.com/o/config/simulator/haas-ui-simulator-mac-v2.zip
  2. 解压到自定义目录。
  3. 终端中运行 安装目录下的 ./appx程序。

注意:MacOS中如运行出现以下安全提示:

需要在系统偏好设置>安全性与隐私中单击同意打开

安装运行后显示如下界面:

3. 创建和运行一个新应用

前述开发调试环境搭建完成之后,开始第一个应用开发实践

  1. 创建应用。

1.1 在VSCode中,单击下面的+号图标创建工程。

1.2 输入工程名称和路径等信息.

返回如下图所示,表示创建完成。

  1. 编译打包。

2.1 编译Debug包(非混淆)。

2.2 编译Release包(混淆)。

返回结果如下,您可看到编译打包完成后的文件。

  1. 推送到模拟器运行。

3.1 应用编译之后,推送到设备上运行(模拟器)。

3.2 输入目标设备IP和端口。

返回如下页面,您可看到设备(模拟器)上显示效果。

实验链接:https://developer.aliyun.com/adc/scenario/b6d77a16f9674c7f9e5f701f2678323f

相关文章
|
10月前
|
传感器 运维 数据可视化
AR眼镜巡检系统在工业互联网的应用:AR+IoT
AR与IoT融合构建虚实闭环,IoT采集实时数据,AR直观呈现并交互,形成感知-分析-决策-行动高效闭环,提升运维效率。
|
人工智能 自然语言处理 小程序
蚂蚁百宝箱 3 分钟上手 MCP:6 步轻松构建 Qwen3 智能体应用并发布小程序
本文介绍如何用6个步骤、3分钟快速构建一个基于Qwen3与蚂蚁百宝箱MCP的智能体应用,并发布为支付宝小程序。通过结合Qwen3强大的语言理解和生成能力,以及支付宝MCP提供的支付功能,开发者可轻松打造具备商业价值的“数字员工”。案例以“全球智能导游助手”为例,支持119种语言,不仅提供旅行建议,还能收取用户打赏。文章详细说明了从登录百宝箱、创建应用、添加插件到配置角色、发布上架及手机端体验的完整流程,同时提醒当前支付功能仅适用于测试环境。适合希望探索AI应用变现潜力的开发者尝试。
1664 14
|
存储 缓存 开发框架
提高微信小程序的应用速度
【10月更文挑战第21天】提高微信小程序的应用速度需要从多个方面入手,综合运用各种优化手段。通过不断地优化和改进,能够显著提升小程序的性能,为用户带来更流畅、更高效的使用体验。
810 155
|
安全 物联网 物联网安全
揭秘区块链技术在物联网(IoT)安全中的革新应用
揭秘区块链技术在物联网(IoT)安全中的革新应用
|
JSON 小程序 UED
微信小程序 app.json 配置文件解析与应用
本文介绍了微信小程序中 `app.json` 配置文件的详细
2439 12
|
物联网 Linux C#
一键掌控未来!用 Uno Platform 打造跨平台 IoT 应用,轻松连接你的智能设备,让生活更智能!
微软的开源跨平台框架 Uno Platform 支持使用 C# 和 XAML 一次性编写代码并部署至多个平台,如 Windows、macOS、Linux、WebAssembly 及 iOS/Android,这使其成为 IoT 设备开发的理想选择。本文通过创建控制网络 LED 灯的应用,详细介绍了 Uno Platform 的环境搭建及 MQTT 客户端配置过程,实现了 LED 状态订阅与控制指令发送功能。该案例展示了 Uno Platform 在 IoT 领域的潜力及其跨平台优势,未来可扩展至更多设备类型,构建智能家居系统。
964 58
|
存储 安全 物联网
C# 在物联网 (IoT) 应用中的应用
本文介绍了C#在物联网(IoT)应用中的应用,涵盖基础概念、优势、常见问题及其解决方法。重点讨论了网络通信、数据处理和安全问题,并提供了相应的代码示例,旨在帮助开发者更好地利用C#进行IoT开发。
737 3
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【10月更文挑战第3天】微信小程序作为新兴应用形态,凭借便捷体验与社交传播能力,成为企业拓展业务的新渠道。本文探讨了微信小程序全栈开发中的PWA技术应用,包括离线访问、后台运行、桌面图标及原生体验等方面,助力开发者提升小程序性能与用户体验。PWA技术在不同平台的兼容性、性能优化及用户体验是实践中需注意的关键点。
430 5
|
小程序
浅谈提高微信小程序的应用速度
浅谈提高微信小程序的应用速度
301 2
|
小程序 Android开发 iOS开发
ISO钉钉小程序小程序webview打开nextjs应用异常
ISO钉钉小程序小程序webview打开nextjs应用异常
313 3