五分钟上手IoT小程序

2024-06-08 19:28
文章标签 程序 上手 iot 五分钟

本文主要是介绍五分钟上手IoT小程序，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

五分钟上手IoT小程序

  • IoT小程序框架
  • 搭建开发环境
    • 首先安装NodeJs
      • 安装NodeJs
      • 验证安装成功
    • 安装cnpm
  • 安装VSCode 开发IDE
    • 下载开发IDE
    • 安装开发IDE
    • 安装框架脚手架
  • 下载模拟器
  • 创建工程项目
    • 应用编译(打包构建)
  • VSCode 开发IDE安装插件
    • 通过开发插件创建工程
    • 编译工程
      • debug编译
      • 编译太慢问题处理
      • release编译
    • 启动模拟器
  • demo案例导入
  • IoT小程序体验

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 -vnpm -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，出现弹框提示，点击【确定】，继续后面的安装
在这里插入图片描述
勾选同意协议，点击【下一步】
在这里插入图片描述
设置安装路径，点击【下一步】
在这里插入图片描述
继续点击【下一步】
在这里插入图片描述
点击【安装】
在这里插入图片描述
安装成功可以看到页面，这里先不要直接运行，点击【完成】
在这里插入图片描述

安装框架脚手架

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

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

安装完成如图
在这里插入图片描述
安装完成之后查看aiot-cli版本号

aiot-cli -V

可以看到如图效果
在这里插入图片描述
如果需要删除框架脚手架，可以执行如下命令

cnpm uninstall aiot-vue-cli

下载模拟器

模拟器下载地址：https://hli.aliyuncs.com/o/config/haasui/simulator/windows_x64/haasui-simulator-windows-64.zip 点击下载，下载成功之后直接解压
在这里插入图片描述
在当前文件夹下打开windows命令窗口，输入命令

./appx.exe

可以看到模拟器 运行成功后页面
在这里插入图片描述
这里我录了一个动态的模拟器图，如下
在这里插入图片描述
到此，整个一套IoT小程序从搭建环境到下载VSCode IDE以及下载模拟器的整体操作就完成了，下面将进入另一片天地，项目开发。

创建工程项目

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

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

工程创建成功如图
在这里插入图片描述
下面我们进入工程目录安装应用依赖，可以看到依赖安装成功
在这里插入图片描述

应用编译(打包构建)

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

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

执行编译命令，可以看到应用构建成功
在这里插入图片描述
在应用路径可以看到生成的.falcon_文件夹
在这里插入图片描述

以及.falcon_文件夹下的{appId}.amr应用包
在这里插入图片描述
应用编译打包之后我们需要去模拟器查看项目运行效果

VSCode 开发IDE安装插件

在系统开始菜单找到VSCode开发工具
在这里插入图片描述
打开VSCode ，点击应用商店输入Haas
在这里插入图片描述
找到Haas UI 点击安装插件，安装成功
在这里插入图片描述
点击已经安装好的Haas UI插件设置按钮【Extension Settings】,将模拟器的路径（appx所在的路径）配置到插件的Simulator Path中
在这里插入图片描述

通过开发插件创建工程

打开VSCode 点击创建按钮
在这里插入图片描述
输入工程名称test02
在这里插入图片描述
可以看到默认的工作区路径
在这里插入图片描述
创建成功之后如图
在这里插入图片描述

编译工程

debug编译

编译工程，点击编译按钮
在这里插入图片描述
这个执行过程比较慢，我这边等了挺久也没有提示完成，但是如果通过命令行模式的话直接输入 cnpm install却很快执行完成
在这里插入图片描述

编译太慢问题处理

这里我的nodejs版本已经是v18+了，所以采取第二种方案，以管理员身份打开powershell，
在这里插入图片描述
然后输入命令，开启权限

Set-ExecutionPolicy RemoteSigned#查询是否操作成功Get-ExecutionPolicy

结果如图
在这里插入图片描述
再次回到VSCode重新点击编译可以看到，编译成功
在这里插入图片描述

release编译

点击release编译按钮可以看到编译成功页面
在这里插入图片描述

启动模拟器

点击VSCode 启动模拟器按钮Simulator，等待十几秒可以看到模拟器启动成功效果
在这里插入图片描述
更改index.vue然后Ctrl+S保存，模拟器会自动刷新成最新内容，如下动图
在这里插入图片描述
至此整个IoT小程序从搭建环境，安装VSCode IDE开发工具再到命令行创建工程，VSCode插件安装，插件使用及模拟器效果验证，整个操作流程就全部完成了，整个操作过程中有疑问的欢迎咨询哈，个人实际投入时间可远远不止五分钟，但是大家按我的操作步骤一套流程下来的话，五分钟足矣。

demo案例导入

打开VSCode IDE，点击【File】>【Open Folder…】打开本地下载的公板案例项目，公板案例下载地址：https://hli.aliyuncs.com/o/config/public-examples/falcon-demo.zip
打开项目之后按照步骤debug编译，编译完成之后点击Simulator启动模拟器可以看到
在这里插入图片描述
打开公板案例工程文件，找到需要修改的内容，修改后快捷键Ctrl+S保存，模拟器即可刷新成最新内容
在这里插入图片描述
有需要的也可以尝试哈。

IoT小程序体验

首先声明一下，以上步骤是经过本人实测验证的，完全可以放心参考操作，官方文档的步骤可以参考，但是个人感觉写的不很连贯，并且多个说明文档页面来回跳转，有时候看着看着就不知道该进行哪一步了。

另外就是有个疑问？是否可以通过命令行模式启动模拟器呢？具体的启动命令是什么？文档中没有明确说，而是在命令行执行完cnpm run build之后又重新跳回了模拟器运行页面，而模拟器运行页面又需要通过VSCode打开工程，然后点击Simulator来启动模拟器，没有直接通过命令行唤起模拟器的命令。在实验操作中最开始我是想全程通过命令行操作的，但到了启动模拟器这一步不得不下载VSCode 插件来完成启动模拟器的操作。

官方文档提供了对应的模板案例，比如公板案例，下载之后可以直接通过VSCode IDE打开，编辑其中的内容可以方便开发者更快的上手熟悉IoT小程序框架。但是对于初学者来说的话，对于整个demo工程的文件结构不太熟悉，希望关于这方面也可以补充一下文档，比如src下是代码以及其他每个文件夹中对应内容的用途等。

关于产品联动，IoT小程序可以和物联网产品联动，比如远端设备是温度湿度感测装置，IoT小程序可以收集远端设备数据分析给出远端设备响应的返回，比如湿度不达标提醒等；再比如和空调联动，IoT小程序接收屋内环境数据进行分析，设置合适的空调温度，自动适应人体；总之，通过IoT小程序可以和未来的物联网时代实现无平台交互，有物联网的地方就有IoT小程序，未来已来，一起加油吧，IoT。

这篇关于五分钟上手IoT小程序的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1043090。

相关文章

JAVA智听未来一站式有声阅读平台听书系统小程序源码

JAVA智听未来一站式有声阅读平台听书系统小程序源码

智听未来，一站式有声阅读平台听书系统 🌟 开篇：遇见未来，从“智听”开始 在这个快节奏的时代，你是否渴望在忙碌的间隙，找到一片属于自己的宁静角落？是否梦想着能随时随地，沉浸在知识的海洋，或是故事的奇幻世界里？今天，就让我带你一起探索“智听未来”——这一站式有声阅读平台听书系统，它正悄悄改变着我们的阅读方式，让未来触手可及！ 📚 第一站：海量资源，应有尽有 走进“智听
阅读更多...
EMLOG程序单页友链和标签增加美化

EMLOG程序单页友链和标签增加美化

单页友联效果图： 标签页面效果图： 源码介绍 EMLOG单页友情链接和TAG标签，友链单页文件代码main{width: 58%;是设置宽度 自己把设置成与您的网站宽度一样，如果自适应就填写100%，TAG文件不用修改 安装方法：把Links.php和tag.php上传到网站根目录即可，访问 域名/Links.php、域名/tag.php 所有模板适用，代码就不粘贴出来，已经打
阅读更多...
跨系统环境下LabVIEW程序稳定运行

跨系统环境下LabVIEW程序稳定运行

在LabVIEW开发中，不同电脑的配置和操作系统（如Win11与Win7）可能对程序的稳定运行产生影响。为了确保程序在不同平台上都能正常且稳定运行，需要从兼容性、驱动、以及性能优化等多个方面入手。本文将详细介绍如何在不同系统环境下，使LabVIEW开发的程序保持稳定运行的有效策略。 LabVIEW版本兼容性 LabVIEW各版本对不同操作系统的支持存在差异。因此，在开发程序时，尽量使用
阅读更多...
CSP 2023 提高级第一轮 CSP-S 2023初试题 完善程序第二题解析 未完

CSP 2023 提高级第一轮 CSP-S 2023初试题 完善程序第二题解析 未完

一、题目阅读 （最大值之和）给定整数序列 a0,⋯,an−1，求该序列所有非空连续子序列的最大值之和。上述参数满足 1≤n≤105 和 1≤ai≤108。 一个序列的非空连续子序列可以用两个下标 ll 和 rr（其中0≤l≤r<n0≤l≤r<n）表示，对应的序列为 al,al+1,⋯,ar​。两个非空连续子序列不同，当且仅当下标不同。 例如，当原序列为 [1,2,1,2] 时，要计算子序列 [
阅读更多...
这些心智程序你安装了吗？

这些心智程序你安装了吗？

原文题目：《为什么聪明人也会做蠢事（四）》 心智程序 大脑有两个特征导致人类不够理性，一个是处理信息方面的缺陷，一个是心智程序出了问题。前者可以称为“认知吝啬鬼”，前几篇文章已经讨论了。本期主要讲心智程序这个方面。 心智程序这一概念由哈佛大学认知科学家大卫•帕金斯提出，指个体可以从记忆中提取出的规则、知识、程序和策略，以辅助我们决策判断和解决问题。如果把人脑比喻成计算机，那心智程序就是人脑的
阅读更多...
uniapp设置微信小程序的交互反馈

uniapp设置微信小程序的交互反馈

链接：uni.showToast(OBJECT) | uni-app官网 (dcloud.net.cn) 设置操作成功的弹窗： title是我们弹窗提示的文字 showToast是我们在加载的时候进入就会弹出的提示。 2.设置失败的提示窗口和标签 icon：'error'是设置我们失败的logo 设置的文字上限是7个文字，如果需要设置的提示文字过长就需要设置icon并给
阅读更多...
基于SpringBoot的宠物服务系统+uniapp小程序+LW参考示例

基于SpringBoot的宠物服务系统+uniapp小程序+LW参考示例

系列文章目录 1.基于SSM的洗衣房管理系统+原生微信小程序+LW参考示例 2.基于SpringBoot的宠物摄影网站管理系统+LW参考示例 3.基于SpringBoot+Vue的企业人事管理系统+LW参考示例 4.基于SSM的高校实验室管理系统+LW参考示例 5.基于SpringBoot的二手数码回收系统+原生微信小程序+LW参考示例 6.基于SSM的民宿预订管理系统+LW参考示例 7.基于
阅读更多...
Spring Roo 实站（ 一 ）部署安装 第一个示例程序

Spring Roo 实站（ 一 ）部署安装 第一个示例程序

转自：http://blog.csdn.net/jun55xiu/article/details/9380213 一：安装 注：可以参与官网spring-roo： static.springsource.org/spring-roo/reference/html/intro.html#intro-exploring-sampleROO_OPTS http://stati
阅读更多...
未来工作趋势：零工小程序在共享经济中的作用

未来工作趋势：零工小程序在共享经济中的作用

经济在不断发展的同时，科技也在飞速发展。零工经济作为一种新兴的工作模式，正在全球范围内迅速崛起。特别是在中国，随着数字经济的蓬勃发展和共享经济模式的深入推广，零工小程序在促进就业、提升资源利用效率方面显示出了巨大的潜力和价值。 一、零工经济的定义及现状 零工经济是指通过临时性、自由职业或项目制的工作形式，利用互联网平台快速匹配供需双方的新型经济模式。这种模式打破了传统全职工作的界限，为劳动
阅读更多...
Java程序到CPU上执行 的步骤

Java程序到CPU上执行 的步骤

相信很多的小伙伴在最初学习编程的时候会容易产生一个疑惑❓，那就是编写的Java代码究竟是怎么一步一步到CPU上去执行的呢？CPU又是如何执行的呢？今天跟随小编的脚步去化解开这个疑惑❓。 在学习这个过程之前，我们需要先讲解一些与本内容相关的知识点 指令 指令是指导CPU运行的命令，主要由操作码+被操作数组成。 其中操作码用来表示要做什么动作，被操作数是本条指令要操作的数据，可能是内存地址，也
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2