欢迎您访问 最编程 本站为您分享编程语言代码,编程技术文章!
您现在的位置是: 首页

五分钟入门物联网小程序

最编程 2024-03-20 16:50:54
...

IoT小程序框架

在上手操作IoT小程序之前,首先了解一下什么是IoT小程序框架,IoT是一套跨平台应用显示框架,它利用JS语言低门槛和API标准化大幅度降低了IoT应用的研发难度,全面拥抱JavaScript开源生态,且系统服务通过统一的JSAPI,实现一端开发,多端运行策略。官方说明文档地址:https://www.yuque.com/wcye0k/haasui下面话不多说,直接上手操作吧!

搭建开发环境

首先安装NodeJs

安装NodeJs

下载安装包

首先我们需要下载我们需要的开发环境的版本,下载地址:https://nodejs.org/zh-cn/download/,这里我选择windows 64bit版本的安装包,

网络异常,图片无法展示
|
下载完成之后找到对应的安装文件双击安装,点击【next】

网络异常,图片无法展示
|

勾选同意之后继续点击【next】

网络异常,图片无法展示
|

选择你想要安装的目录位置,继续点击【next】

网络异常,图片无法展示
|

再次点击【next】

网络异常,图片无法展示
|

这个页面的选项这里先不要选,继续点击【next】

网络异常,图片无法展示
|

点击按钮【install】

网络异常,图片无法展示
|

看到这个页面表示你已经安装成功了

网络异常,图片无法展示
|

验证安装成功

安装完成之后我们在windows开始菜单中找到node.js的命令行窗口,打开

网络异常,图片无法展示
|

输入命令

node -v
npm -v

验证一下是否安装成功

网络异常,图片无法展示
|

安装cnpm

安装完NodeJs之后再安装一下cnpm命令,命令行操作

npm install -g cnpm --registry=https://registry.npmmirror.com

执行结果如图

网络异常,图片无法展示
|

安装完cnpm之后我们继续安装开发ide

安装VSCode 开发IDE

下载开发IDE

找到下载开发IDE的官网地址:https://code.visualstudio.com/Download

网络异常,图片无法展示
|

选择windows版本的点击下载按钮,点击之后发现国外的网址下载的速度相当慢,这里按照IoT官方文档推荐的国内下载地址:https://vscode.cdn.azure.cn/stable/899d46d82c4c95423fb7e10e68eba52050e30ba3/VSCodeUserSetup-x64-1.63.2.exe 重新点击下载,下载完成后进入IDE安装步骤。

安装开发IDE

双击下载的VSCode IDE,出现弹框提示,点击【确定】,继续后面的安装

网络异常,图片无法展示
|

勾选同意协议,点击【下一步】

网络异常,图片无法展示
|

设置安装路径,点击【下一步】

网络异常,图片无法展示
|

继续点击【下一步】

网络异常,图片无法展示
|

勾选【创建桌面快捷方式】,其他的选项按默认即可,点击【下一步】

网络异常,图片无法展示
|

点击【安装】

网络异常,图片无法展示
|

安装成功可以看到页面,这里先不要直接运行,点击【完成】

image.png

安装框架脚手架

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

cnpm i aiot-vue-cli -g     //-g 表示全局安装,必须输入

安装完成如图

image.png

安装完成之后查看aiot-cli版本号

aiot-cli -V

可以看到如图效果

image.png

如果需要删除框架脚手架,可以执行如下命令

cnpm uninstall aiot-vue-cli

下载模拟器

模拟器下载地址:https://hli.aliyuncs.com/o/config/haasui/simulator/windows_x64/haasui-simulator-windows-64.zip 点击下载,下载成功之后直接解压

image.png

在当前文件夹下打开windows命令窗口,输入命令

./appx.exe

可以看到模拟器 运行成功后页面

image.png

这里我录了一个动态的模拟器图,如下

20230223_211738 00_00_00-00_00_30.gif

到此,整个一套IoT小程序从搭建环境到下载VSCode IDE以及下载模拟器的整体操作就完成了,下面将进入另一片天地,项目开发。

创建工程项目

我们通过命令行的方式创建工程项目,首先需要创建工程,输入命令,

# name为你的工程名称
aiot-cli create [name]
# 进入工程目录
cd [name]  
#安装应用依赖
cnpm install           

工程创建成功如图

image.png

下面我们进入工程目录安装应用依赖,可以看到依赖安装成功

image.png

应用编译(打包构建)

工程或者说应用创建成功之后,我们输入编译命令

#编译Debug测试应用包  或者
cnpm run build
#编译release 正式应用包
cnpm run build:prod   

执行编译命令,可以看到应用构建成功

image.png

在应用路径可以看到生成的.falcon_文件夹

推荐阅读