搭建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

相关文章
|
4月前
|
JSON 小程序 JavaScript
微信小程序之项目基本结构、页面的基础及宿主环境
微信小程序之项目基本结构、页面的基础及宿主环境
|
18天前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中PWA技术的应用,PWA结合Web的开放性和原生应用的性能,提供离线访问、后台运行、桌面图标和原生体验。开发者可利用Service Worker实现离线访问,Worker处理后台运行,Web App Manifest添加桌面图标,CSS和JavaScript提升原生体验。实践中需注意兼容性、性能优化和用户体验。PWA技术能提升小程序的性能和用户体验,助力开发者打造优质小程序。
|
3月前
|
小程序
探索大模型与小程序的应用创新——产品面对面系列直播第一期
探索大模型与小程序的应用创新——产品面对面系列直播第一期
31 0
|
2月前
|
开发框架 移动开发 小程序
【微信小程序】-- 配置uni-app的开发环境(四十八)
【微信小程序】-- 配置uni-app的开发环境(四十八)
|
4月前
|
Web App开发 小程序 Android开发
Appium微信小程序自动化环境准备
Appium微信小程序自动化环境准备
86 1
|
5月前
|
小程序 API 开发者
微信小程序授权登录流程以及应用到的API
微信小程序授权登录流程以及应用到的API
204 0
|
18天前
|
存储 弹性计算 小程序
小程序全栈开发中的云函数应用实践
【4月更文挑战第12天】本文探讨了小程序全栈开发中云函数的应用实践,云函数作为轻量级后端服务,具备弹性伸缩、安全可靠和跨平台支持等特点。开发者可利用云函数实现用户认证、数据存储、文件上传下载、第三方服务集成及定时任务等功能。实践中需注意性能优化、安全性及成本控制,以提升小程序性能和用户体验。通过云函数,开发者能更高效地进行全栈开发。
|
23天前
|
存储 小程序 开发者
如何提升微信小程序的应用速度
如何提升微信小程序的应用速度
|
2月前
|
关系型数据库 Serverless 分布式数据库
Serverless 应用引擎常见问题之在抖音快手小程序上使用如何解决
Serverless 应用引擎(Serverless Application Engine, SAE)是一种完全托管的应用平台,它允许开发者无需管理服务器即可构建和部署应用。以下是Serverless 应用引擎使用过程中的一些常见问题及其答案的汇总:
22 3
|
2月前
|
JSON 小程序 JavaScript
【微信小程序】-- 宿主环境 & 通信模型 & 运行机制介绍(五)
【微信小程序】-- 宿主环境 & 通信模型 & 运行机制介绍(五)