精华内容
下载资源
问答
  • 智能柜物联网小程序.zip微信小程序模板源码
  • 5步完成物联网小程序开发

    千次阅读 2020-10-31 14:37:48
    业务完全可以以小程序为核心,例如小兔健康小程序,在小程序里就能实现产品购买、配网、控制管理的闭环。 为此,涂鸦推出了 Tuya-Weapp-CloudBase SDK(以下简称小程序 SDK), 结合腾讯云函数,让您可以快速高效的...

    前言

    在 5G 热潮的推动下,IoT 愈发的如火如荼。越来越多品牌选择涂鸦智能的开发者平台实现产品智能化。在配网控制端,也有更多开发者希望利用好微信小程序即开即用低门槛的优点,提高设备配网率以及使用频次或实现设备分享功能。业务完全可以以小程序为核心,例如小兔健康小程序,在小程序里就能实现产品购买、配网、控制管理的闭环。
    为此,涂鸦推出了 Tuya-Weapp-CloudBase SDK(以下简称小程序 SDK), 结合腾讯云函数,让您可以快速高效的完成小程序的开发,打通从智能设备到小程序的链路。


    使用步骤

    • 第 1 步:获取小程序 SDK 授权

    为了获取小程序的 SDK 及相关授权,您需要在 IoT 平台上创建小程序 SDK。

    1. 登录 涂鸦 IoT 控制台的 App 工作台
    2. 单击 App 工作台,选择 小程序 SDK
    3. 单击 创建小程序
      在这里插入图片描述
    4. 输入小程序名称(和您的小程序同名)、小程序 AppID(可在微信小程序后台查看)、小程序描述、小程序,单击 确定
      创建成功之后,可以获取到专属于您 SDK 的 Schema,AccessID,AppSecret。其中 Schema 用来标识一个您的应用(在这里就是表示您的小程序),AccessID 和 AppSecret 用来生成 Token 信息。

    • 第 2 步:启动 Demo 项目

    接下来您可以克隆 项目仓库 里的示例代码。

    1. 克隆项目代码。
    $ git clone https://github.com/TuyaInc/tuya-miniapp-demo.git
    
    1. 安装相关依赖。
    $ npm install
    
    1. 开启自动打包。
    $ npm run dev:weapp
    
    1. 启动微信开发工具,单击 导入项目,导入您的项目。

    在这里插入图片描述
    5. 选择项目目录,填写您的 AppID,单击 导入
    在这里插入图片描述
    小程序导入之后,会自动进入小程序的设备列表页,如果看到 “网络错误” 的信息提示,表明项目导入成功,但是未能上传云函数,可以参考下一步来上传云函数。
    在这里插入图片描述

    • 第 3 步:上传云函数

    您的小程序如果要访问涂鸦云,需要通过之前获得的 AccessID 和 AppSecret 去调涂鸦云端接口生成访问涂鸦云的 Token。通常情况下这种操作都是由服务端完成,详情请参考 云开发平台方案介绍,但是也可以用更简单方便的小程序云函数的方式,相关的代码及 SDK 我们已准备好,请根据下面的示例来操作。

    1. 在小程序开发者工具中选中云函数目录的 ty-service(该目录是我们的涂鸦云函数目录,主要是登录、token 生成、统一接口调用等功能的封装) 上传上去。
      在这里插入图片描述
      如果没有开通云开发环境,单击 “云开发” 的时候会引导您自助开通。
    2. 项目中调用云函数的工具方法在 src/Utils/Request.ts 中,通过云函数调用涂鸦的 API 的方式可以参照下面的示例。
    const params = {
    	    name: 'ty-service', // 云函数名称
    	    data: {
    	      action: 'hello', // 涂鸦云接口名
    	      params: {} // 接口参数
    	    }
    	  }
    	  // 调用 Request 
    	  return Request(params)
    

    • 第 4 步:腾讯云云开发配置

    云开发配置主要是为了配置您之前获得的的 Schema,AccessID,AppSecret,用于在云函数云端生成 Token 并提供给小程序使用。这些信息存储在云开发的数据库中,可以保证云函数能够方便调用的同时还能最大限度的保证信息安全。可以根据下面的示例来操作。

    1. 单击 云开发,进入 数据库,添加名称为 “iot-collection” 的集合,单击 确定
      在这里插入图片描述
    2. 选择 “iot-collection” 集合,,选择项目目录 db/data.json 文件,单击 导入 按钮,即可导入相关字段。在这里插入图片描述
    3. 导入完成之后填写涂鸦 IoT 工作台上小程序 SDK 的 Schema、AccessID、AppSecret 的内容。在这里插入图片描述
    4. 配置完成之后,刷新一下小程序,可以看到一个 “欢迎使用涂鸦云小程序云函数”,说明云函数配置成功。
      在这里插入图片描述
      SDK 更多的信息和调用说明,请参考小程序 SDK 概述

    • 第 5 步:为设备配网

    目前小程序支持 AP 模式(慢闪热点)配网,后期还将支持蓝牙配网。通过配网,可以将一个设备配到您的账号下,您就有权限控制这个设备。

    1. 单击微信小程序开发工具的 预览,在弹出的二维码使用微信去扫码。

    2. 在手机的小程序中单击 添加设备 按钮,进入配网页面。
      在这里插入图片描述

    3. 将设备重置到 AP 配网模式,可以参照下面的视频来操作。

      设备重置到 AP 配网模式(暂时存放)

    4. 设备重置 AP 配网模式后,开始在小程序上配网,可以参照下面的视频来操作。

      小程序配网(暂时存放)

    5. 配网成功后,进入设备控制页,就能控制配网的设备。
      在这里插入图片描述

    小结

    基于涂鸦开发平台和小程序 SDK,可以快速实现一款智能小程序,搭配使用 三明治开发套件,也可以用它搭建一个产品原型来实现最后一个步骤。

    扩展

    如果您希望您的小程序不仅仅是配网、控制这些常规功能,希望结合云端算法提供更多服务,可以结合 涂鸦云开发平台 里的开放接口做进一步的整合。您也可以访问我们的 案例中心 参考其他开发者的成功案例。

    展开全文
  • 2013年8月,“轻应用”概念提出,但是仅仅活跃四年随后淡出 ,直到2017年1月9号借助微信小程序成功续命。一时间,以微信小程序和支付宝小程序为代表的轻应用解决方案迅速贯穿多个环节,成为“万物互联”的雏形载体。...

           2013年8月,“轻应用”概念提出,但是仅仅活跃四年随后淡出 ,直到2017年1月9号借助微信小程序成功续命。一时间,以微信小程序和支付宝小程序为代表的轻应用解决方案迅速贯穿多个环节,成为“万物互联”的雏形载体。随着物联网的发展,对数据的获取便捷度要求越来越高,硬件和场景都逐步迈入物联网时代,传统的App已经无法满足发展的需要,毕竟不可能一个场景安装一个App。YF3300,见证物联网+小程序的火花。

    一.云端配置

    (1)登陆阿里云物联网平台。

    (2)在设备管理选项中创建产品

          示例:

    (3)查看相应的产品,进行物模型属性的创建。查看产品细节,选择功能定义,进行自定义属性添加与自定义事件添加

    a.自定义属性添加,添加两个自定义功能(温度和湿度),创建模板请见图1-1

    图1-1

    (4)在新建的产品下,设备名称必须为Test,并保存相关的设备证书(即设备三元组Productkey 、DeviceName、 DeviceSecret)

    二.设备连接

        运行环境搭建:1.Win7系统请下载相关的设备驱动,下载地址为:,请安装VS2010/VS2015及拓展包

                                  2.下载微信小程序官方开发工具

    准备材料:YF3300设备套装,组态key(购买产品时厂家会附赠一个月体验版)官方下载YFIOsManager组态管理软件。下载链接:

    http://www.yfiot.com/content/downsort?current=1&title=1   

             设备连接:a.将组态key插入电脑,将附赠GPRS天线连接好,插入附赠的物联网卡(也可使用自己购买的物联网卡)

                               b.将YF3300通过Type-C连入电脑。

            设备配置:

    (1)打开下载的YFIOsManager软件,选择USB连接方式,连接YF3300

    (2)在用户设备中新建设备

    点击新建,在驱动支持中,选择YFSoft官方温湿度驱动或者开发者编写成功的温湿度驱动。

         温馨提示:如果没有任何温湿度驱动也可以创建温湿度模拟数据,以温度为例

    (3)驱动配置。以官方温湿度驱动为例,

    A.填入设备名称:Test

    B.串口选择COM2

    C.设备地址为以实际的设备地址为准。

    D.串口参数配置默认

    E.点击其他,勾选Debug调试

    (4)项目属性勾选。勾选所有信息输出控制

    (5)点击保存项目   ,保存自定义的组态工程。

    (6)在策略列表中新建策略,策略文件选择sys >阿里云MQTT客户端(精简版)

    A.服务配置中在相应的地方填入设备三元组,填入产品密钥,服务地址会自动更改,扫描间隔可更改,变化上传可勾选

    B.IO配置中勾选与云端IO相同的属性变量以及该设备的通信状态

    (3)在调试选项中部署YFIOs系统,选择精简版(上云),部署完成之后, 点击部署按钮,部署创建的驱动和策略,选择系统重启,根据当地网络情况,等待5~10s,设备与云端通信成功。可以在YFIOsManager监控上云过程,出现MQTT Connect OK!!! ,证明设备与云端通信成功。也可以登录阿里云查看设备是否在线。

     组态运行监控

    云端信息查看

    三.阿里系小程序开发

     

            阿里系的小程序中又分:支付宝小程序,香港版支付宝小程序,淘宝小程序,钉钉小程序,高德小程序,mPaaS小程序,天猫小程序,支付宝iot小程序等。在阿里小程序中这些分类只是应用平台以及场景的不同,开发方式基本一致。

    下面我们讲一下支付宝小程序开发,入口链接:https://mini.open.alipay.com/channel/miniIndex.htm

    小程序可以免开发或自主开发:

    下载开发工具:

    开发环境如下:

    支持可视化开发,我们按下图设计小程序界面。

    要对接阿里云物联网平台,第一步需要配置AccessKey。如下图:

    另外需要了解阿里云物联网API接口。接口文档说明:https://docs.alipay.com/mini/api/owycmh

    可以直接获取物联网平台的设备信息。

    程序完成后,我们不仅可以真机调试,也可以采用模拟器进行调试,如下图所示:

    阿里小程序官方介绍:

    https://help.aliyun.com/product/117209.html?spm=a2c4g.11186623.6.540.684b2495i8KIiP

    小程序直播课链接:https://developer.aliyun.com/live/1660?spm=a2c6h.12873622.0.0.6c8a5b55tLErCl

     

    想体验阿里云IoT平台的网友,可以单击如下链接:https://dev.iot.aliyun.com/sale?source=deveco_partner_yefan

     

    展开全文
  • 物联网智能家居小程序,支持连接温湿度传感器进行监控
  • //topic最容易出现空的问题 会导致Uncaught (in promise) thirdScriptError 小程序的现象是断开连接重连 然后闪一下 if(msg == null)return; if (client && is_connected) { client.publish(topic, msg); } ...

    1.当切换页面的时候,容易与mqtt服务器断开连接,并报错

    在这里插入图片描述
    原因:在onLoad事件中,获取参数的时候使用异步获取,但是在事件里面还使用了这个参数,导致mqtt发布的时候,发了一个空主题,导致连接被断开,然后报异常,错误代码如下

    onLoad() {
    			uni.getStorage({
    				key: 'opened_dev',
    				success:res=>{
    					this.phone = res.data.phone;
    					this.dev_id = res.data.dev_id;
    					this.dev_name = res.data.name;
    					this.dev_note = res.data.note;
    					this.regist_time = res.data.regist_time;
    					this.dev_type = res.data.type;
    					this.img_src = res.data.dev_img;
    				}
    			});
    			
    			var globalData = getApp().globalData;
    			globalData.on_mqtt_msg(this.msg_handler);//设置接收
    			this.send_cmd(0,0);//获取全部信息
    			this.timer_id = setInterval(this.get_dht11,3000);
    		},
    

    修改后:

    onLoad() {
    			uni.getStorage({
    				key: 'opened_dev',
    				success:res=>{
    					this.phone = res.data.phone;
    					this.dev_id = res.data.dev_id;
    					this.dev_name = res.data.name;
    					this.dev_note = res.data.note;
    					this.regist_time = res.data.regist_time;
    					this.dev_type = res.data.type;
    					this.img_src = res.data.dev_img;
    					
    					var globalData = getApp().globalData;
    					globalData.on_mqtt_msg(this.msg_handler);//设置接收
    					this.send_cmd(0,0);//获取全部信息
    					this.timer_id = setInterval(this.get_dht11,3000);
    				}
    			});
    		},
    

    在pub的时候 加验证

    mqtt_pub: function(topic, msg) { //发布消息
    	if(topic == null || topic == "")return;//topic最容易出现空的问题 会导致Uncaught (in promise) thirdScriptError 小程序的现象是断开连接重连 然后闪一下
    	if(msg == null)return;
    	if (client && is_connected)
    	{
    		client.publish(topic, msg);
    	}
    	console.log("mqtt_pub," + "topic=" + topic + ",msg="+msg);	
    },
    
    展开全文
  • 文章目录效果主要代码思路 效果 工具:HbuilderX+微信开发者工具 项目需求:实现MQTT设备的uniapp前台显示(后台用springboot开发) 代码地址: 后台接口地址:... ...const BASE_UR

    效果

    工具:HbuilderX uniapp版本+微信开发者工具
    项目需求:实现MQTT设备的uniapp前台显示(后台用springboot开发)
    代码地址:
    后台接口地址:http://121.36.196.247:8082/swagger-ui.html
    演示代码:http://121.36.196.247:8083/h5/#/

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    后台接口地址:http://121.36.196.247:8082/swagger-ui.html

    主要代码

    在这里插入图片描述

    api.js

    const BASE_URL = 'http://121.36.196.247:8082'
    export const myRequest = (options) => {
    	return new Promise((resolve, reject) => {
    		uni.request({
    			url: BASE_URL + options.url,
    			method: options.method || 'GET',
    			data: options.data || {},
    			success: (res) => {
    				resolve(res)
    				if (res.statusCode == 200) {
    					if (res.data.state != 0) {
    						uni.showToast({
    							title: '访问异常!请联系管理员'
    						})
    					} 
    				} else {
    					return uni.showToast({
    						title: '网络正在繁忙。。。'
    					})
    				}
    
    			},
    			fail: (err) => {
    				uni.showToast({
    					title: '请求接口失败'
    				})
    				reject(err)
    			}
    		})
    	})
    }
    
    

    data.vue

    <template>
    	<view>
    		<view class="content1"><text>设备Id:{{pointId}}</text></view>
    
    		<view class="search-data-time">
    			<view class=".search-data-time-right"><text>{{time}}</text></view>
    		</view>
    		<view class="index">
    			<view class="new_box" style="margin-top: 20upx;">
    				<view class="bbox">
    					<view class="list-box">
    						<view class="list-ed">
    
    							<view class="list-left">
    
    								<view class="list-name">
    									增碳剂
    								</view>
    
    							</view>
    							<view class="list-right">
    								<text class="list-p2">{{dataList.smp_ID}}</text>
    							</view>
    						</view>
    					</view>
    
    				</view>
    			</view>
    			<view class="new_box" style="margin-top: 20upx;">
    				<view class="bbox">
    					<view class="list-box">
    						<view class="list-ed">
    
    							<view class="list-left">
    
    								<view class="list-name">
    									金属添加剂
    								</view>
    
    							</view>
    							<view class="list-right">
    								<text class="list-p2">{{dataList.smp_NAME}}</text>
    							</view>
    						</view>
    					</view>
    
    				</view>
    			</view>
    			<view class="new_box" style="margin-top: 20upx;">
    				<view class="bbox">
    					<view class="list-box">
    						<view class="list-ed">
    
    							<view class="list-left">
    
    								<view class="list-name">样品称重
    								</view>
    
    							</view>
    							<view class="list-right">
    								<text class="list-p2">{{dataList.smp_WT}}</text>
    							</view>
    						</view>
    					</view>
    
    				</view>
    			</view>
    			<view class="new_box" style="margin-top: 20upx;">
    				<view class="bbox">
    					<view class="list-box">
    						<view class="list-ed">
    
    							<view class="list-left">
    
    								<view class="list-name">样品碳含量
    								</view>
    
    							</view>
    							<view class="list-right">
    								<text class="list-p2">{{dataList.c_RES}}(%)</text>
    							</view>
    						</view>
    					</view>
    
    				</view>
    			</view>
    			<view class="new_box" style="margin-top: 20upx;">
    				<view class="bbox">
    					<view class="list-box">
    						<view class="list-ed">
    
    							<view class="list-left">
    
    								<view class="list-name">样品硫含量
    								</view>
    
    							</view>
    							<view class="list-right">
    								<text class="list-p2">{{dataList.s_RES}}(%)</text>
    							</view>
    						</view>
    					</view>
    
    				</view>
    			</view>
    			<view class="new_box" style="margin-top: 20upx;">
    				<view class="bbox">
    					<view class="list-box">
    						<view class="list-ed">
    
    							<view class="list-left">
    
    								<view class="list-name">气室压力
    								</view>
    
    							</view>
    							<view class="list-right">
    								<text class="list-p2">{{dataList.ch_PRESS}}(kpa)</text>
    							</view>
    						</view>
    					</view>
    
    				</view>
    			</view>
    
    		</view>
    
    	</view>
    </template>
    
    <script>
    	export default {
    		components: {},
    		data() {
    			return {
    				// pointName: "",
    				pointId: '', //默认站点数据
    				time: "", //时间
    				dataList: [], //实时数据对象,
    			}
    		},
    		methods: {
    
    			async getPoints() {
    				await this.$myRuquest({
    					url: '/api/wxdata/selectRedisRtd?id=' + this.pointId
    				}).then(res => {
    
    					console.log(res)
    					var strtime = res.data.data.dataTime
    					var nian = strtime.slice(0, 4);
    					var yue = strtime.slice(4, 6);
    					var ri = strtime.slice(6, 8);
    					var shi = strtime.slice(8, 10);
    					var fen = strtime.slice(10, 12);
    					var miao = strtime.slice(12, 14);
    					this.time = nian + "-" + yue + "-" + ri + " " + shi + ":" + fen + ":" + miao;
    					this.dataList = res.data.data
    					console.log("实时数据查询成功")
    				})
    
    
    			}
    
    		},
    		onLoad(options) {
    			this.pointId = options.pointId; //传过来的参数
    			console.log("跳转过来了:::::::" + this.pointId);
    			this.getPoints();
    		}
    
    
    
    
    	}
    </script>
    
    <style>
    	.content1 {
    		height: 60upx;
    		background-color: #007AFF;
    
    	}
    
    	.content1 text {
    		color: #F8F8F8;
    		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    		margin-left: 10upx;
    	}
    
    	/* 搜索框 */
    	.search-ico,
    	.search-ico-1 {
    		width: 50upx;
    		height: 50upx;
    	}
    
    	.search-ico {
    		margin-left: 20upx;
    	}
    
    	.search-ico-1 {
    		margin-right: 20upx;
    	}
    
    	.search-text {
    		font-size: 14px;
    		background-color: #FFFFFF;
    		height: 60upx;
    		width: 480upx;
    	}
    
    	.search-block {
    		display: flex;
    		flex-direction: row;
    		/* padding-left: 60upx; */
    		position: relative;
    
    	}
    
    	.search-ico-wapper {
    		background-color: #FFFFFF;
    		display: flex;
    		flex-direction: column;
    		padding: 0upx 0upx 0upx 0upx;
    		width: 350upx;
    	}
    
    	.search-ico-wapper1 {
    		background-color: #FFFFFF;
    		display: flex;
    		flex-direction: column;
    		padding: 0upx 0upx 0upx 360upx;
    		width: auto;
    		float: right;
    	}
    
    
    	page {
    		background-color: #eee;
    	}
    
    	.search-data-time {
    		height: 40upx;
    
    	}
    
    	.search-data-time-right {
    		width: 400upx;
    		margin-left: 390upx;
    	}
    
    	.search-data-time-right text {
    		color: #808080;
    	}
    
    	.list-box {
    		display: flex;
    		flex-direction: column;
    		background-color: #fff;
    		margin: 0upx 16upx 16upx 16upx;
    		padding: 16upx;
    		border-radius: 10upx;
    		height: 60upx;
    	}
    
    	.list-ed {
    		display: flex;
    		flex-direction: row;
    		justify-content: center;
    		align-items: center;
    	}
    
    	.list-left {
    		margin-left: 10upx;
    		display: flex;
    		flex-direction: column;
    		width: 800upx;
    		height: 60upx;
    	}
    
    
    	.list-right {
    		display: flex;
    		flex-direction: column;
    		width: 510upx;
    		height: 60upx;
    	}
    
    
    	.btn-point {
    		width: 200rpx;
    		height: 60rpx;
    		display: flex;
    		margin-top: 25rpx;
    		margin-right: 10rpx;
    		line-height: 50rpx;
    		justify-content: center;
    		border-radius: 25px;
    		/* 这里可以改成渐变: background:linear-gradient(to right, #FFDE28,#FF3228) */
    		background-color: #ff5500;
    		font-size: 28rpx;
    	}
    
    	.noadsop {
    		width: 120upx;
    		height: 32upx;
    	}
    
    
    	.list-name {
    
    		overflow: hidden;
    		text-overflow: ellipsis;
    		display: -webkit-box;
    		-webkit-line-clamp: 2;
    		margin-bottom: 15upx;
    		margin-top: 10upx;
    		font-size: 30upx;
    	}
    
    	.list-p2 {
    		overflow: hidden;
    		text-overflow: ellipsis;
    		display: -webkit-box;
    		-webkit-line-clamp: 1;
    		margin-bottom: 15upx;
    		margin-top: 10upx;
    		margin-right: 0upx;
    		color: #808080;
    
    	}
    
    
    	.list-da {
    		display: flex;
    		flex-wrap: nowrap;
    		flex-direction: row;
    		font-size: 26upx;
    	}
    
    	.list-da view {
    		width: 50%;
    	}
    
    	.list-da view text {
    		color: red;
    	}
    </style>
    
    

    point.vue

    <template>
    	<view>
    		<view class="content1"></view>
    		<view class="search-block">
    			<view class="search-ico-wapper">
    				<!-- <image src="../../static/icon/search-active.png" class="search-ico" mode=""></image> -->
    			</view>
    			<input type="text" value="" focus v-model="Number" @input="onKeyNumberInput" placeholder="请输入设备编号"
    			 class="search-text" maxlength="10" />
    			<view class="search-ico-wapper1">
    				<image src="../../static/icon/search-active.png" class="search-ico-1" mode=""></image>
    			</view>
    		</view>
    		<view class="shadow">
    		</view>
    
    		<view class="index">
    			<view class="new_box" style="margin-top: 20upx;" v-for="point in pointList" :key="point.id" @click="goDataDetail(point.id)">
    				<view class="bbox">
    					<view class="list-box">
    						<view class="list-ed">
    
    							<view class="list-left">
    
    								<view class="list-name">{{point.number}}</view>
    								<view class="list-da">
    									<text class="list-p2">{{point.name}}</text>
    
    								</view>
    							</view>
    							<view class="list-right">
    								<button type="primary" class="btn-point" >点我查看</button>
    
    							</view>
    						</view>
    					</view>
    
    				</view>
    			</view>
    		</view>
    		
    		<view class="isOver" v-if="flag">----------我是有底线的----------</view>
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				Cpage: 1, //当前页码
    				flag:false,
    				totalPages: 1, //总共页数
    				Number: "",
    				pointList: [] //企业站点集合
    			}
    		},
    		methods: {
    			//模糊搜索
    			onKeyNumberInput: function(event) {
    				this.Number = event.target.value
    				this.pointList = []; //清空
    				this.getPoints();//调用站点数据查询
    
    			},
    
    			//查询站点数据
    			async getPoints() {
    				//传递的参数封装成对象;
    
    				let emsg = {
    					"number": this.Number,
    					"page": this.Cpage,
    					"size":10,//默认10条
    				}
    				const res = await this.$myRuquest({
    					url: '/api/wxapoint/pageByNumber',
    					methods: 'post',
    					data: emsg,
    					dataType: 'json'
    				})				
    				if(res.data.data.records){
    				    this.pointList =  [...this.pointList, ...res.data.data.records];
    				    this.totalPages=res.data.data.total;
    				}
    				console.log(res.data.data)
    				console.log("站点查询成功");
    				
    			},
    			//跳转实时数据
    			goDataDetail(item) {
    				uni.navigateTo({
    					url: '/pages/data/data?pointId=' + item,
    					success(res) {
    						console.log(res);
    					},
    					fail(err) {
    						console.log(err);
    					}
    				});
    			}
    		},
    		onLoad() {
    			this.getPoints();
    		},
    		//上拉加载更多
    		onReachBottom() {
    			console.log("this.pointList.length" + this.pointList.length);
    			if (this.Cpage * 10 > this.pointList.length) return this.flag = true;
    			this.Cpage++;
    			this.getPoints();
    			// console.log("=触底了。。。。。==" + this.flag)
    		},
    		//下拉刷新
    		onPullDownRefresh() {
    			this.pointList = []
    			this.Cpage = 1
    			this.flag = false
    			setTimeout(() => {
    				this.getPoints(() => {
    					uni.stopPullDownRefresh()
    				})
    			}, 1000)
    		},
    	}
    </script>
    
    <style>
    	.content1 {
    		height: 60upx;
    		background-color: #007AFF;
    	}
    	.isOver{;
    		width:a
    	}
    
    
    	/* 搜索框 */
    	.search-ico,
    	.search-ico-1 {
    		width: 50upx;
    		height: 50upx;
    	}
    
    	.search-text {
    		font-size: 14px;
    		background-color: #FFFFFF;
    		height: 60upx;
    		width: 480upx;
    	}
    
    	.search-block {
    		display: flex;
    		flex-direction: row;
    		padding-left: 60upx;
    		position: relative;
    		top: -32upx;
    	}
    
    	.search-ico-wapper {
    		background-color: #FFFFFF;
    		display: flex;
    		flex-direction: column;
    		justify-content: center;
    		padding: 0upx 0upx 0upx 40upx;
    		border-bottom-left-radius: 18px;
    		border-top-left-radius: 18px;
    	}
    
    	.search-ico-wapper1 {
    		background-color: #FFFFFF;
    		display: flex;
    		flex-direction: column;
    		justify-content: center;
    		padding: 0upx 40upx 0upx 0upx;
    		border-bottom-right-radius: 18px;
    		border-top-right-radius: 18px;
    	}
    
    	.shadow {
    		width: 638upx;
    		height: auto;
    		border-radius: 18px;
    		-moz-box-shadow: 0 0 10px #e6e6e6;
    		-webkit-box-shadow: 0 0 10px #e6e6e6;
    		box-shadow: 0 0 10px #e6e6e6;
    		position: relative;
    		top: auto;
    		left: 60upx;
    	}
    
    	page {
    		background-color: #eee;
    	}
    
    	/* 已选择 */
    	.selde {
    		border: 1px solid red;
    		background: red;
    		color: #FFFFFF;
    		border-radius: 20upx;
    		display: flex;
    		flex-direction: row;
    		justify-content: center;
    		align-items: center;
    		font-size: 20upx;
    		padding: 0 10upx;
    	}
    
    	.selde-q {
    		width: 18upx;
    		height: 18upx;
    		border-radius: 50%;
    		background: #FFFFFF;
    		margin-left: 6upx;
    	}
    
    	.noselde-q {
    		border: 1px solid #959595;
    		width: 16upx;
    		height: 16upx;
    		border-radius: 50%;
    		background: #FFFFFF;
    		margin-left: 6upx;
    	}
    
    	.list-box {
    		display: flex;
    		flex-direction: column;
    		background-color: #fff;
    		margin: 0upx 16upx 16upx 16upx;
    		padding: 16upx;
    		border-radius: 10upx;
    		height: 170upx;
    	}
    
    	.list-ed {
    		display: flex;
    		flex-direction: row;
    		justify-content: center;
    		align-items: center;
    	}
    
    	.list-left {
    		margin-left: 10upx;
    		display: flex;
    		flex-direction: column;
    		width: 800upx;
    		height: auto;
    	}
    
    
    	.list-right {
    		display: flex;
    		flex-direction: column;
    		width: 510upx;
    		height: 180upx;
    	}
    
    
    	.btn-point {
    		width: 200rpx;
    		height: 60rpx;
    		display: flex;
    		margin-top: 25rpx;
    		margin-right: 10rpx;
    		line-height: 50rpx;
    		justify-content: center;
    		border-radius: 25px;
    		/* 这里可以改成渐变: background:linear-gradient(to right, #FFDE28,#FF3228) */
    		background-color: #ff5500;
    		font-size: 28rpx;
    	}
    
    	.noadsop {
    		width: 120upx;
    		height: 32upx;
    	}
    
    	.list-head {
    		display: flex;
    		justify-content: flex-end;
    		margin-bottom: 10upx;
    	}
    
    	.list-name {
    		overflow: hidden;
    		text-overflow: ellipsis;
    		display: -webkit-box;
    		-webkit-line-clamp: 2;
    		margin-bottom: 15upx;
    		margin-top: 5upx;
    		font-size: 30upx;
    	}
    
    	.list-p2 {
    		overflow: hidden;
    		text-overflow: ellipsis;
    		display: -webkit-box;
    		-webkit-line-clamp: 2;
    		margin-bottom: 15upx;
    		margin-top: 5upx;
    		color: #808080;
    
    	}
    
    	.list-right button {
    		margin-top: 60upx;
    	}
    
    	.list-da {
    		display: flex;
    		flex-wrap: nowrap;
    		flex-direction: row;
    		font-size: 26upx;
    	}
    
    	.list-da view {
    		width: 50%;
    	}
    
    	.list-da view text {
    		color: red;
    	}
    </style>
    
    

    思路

    请参考我的博客
    1.uniapp一周实战(一)
    2.uniapp一周实战(二)
    3.上线——H5打包

    物联网系列

    一、用netty做一个环保hj212协议即时通讯工具

    二、零基础用uniapp快速开发实现MQTT设备中心附后台接口
    三、MQTT服务器搭建实现物联网通讯
    四、springboot + rabbitmq 做智能家居以及web显示未读消息

    展开全文
  • 使用esp8266 wifi芯片,搭建MQTT服务器,并连接微信小程序,使用微信小程序远程控制硬件板子,并采集数据。实际项目中使用的,并非只是DEMO,可批量管理设备。
  • 微信小程序+物联网

    千次阅读 2020-02-18 14:08:15
    API(Application Programming Interface,应用程序接口)是一些预先定义的函数,或指软件系统不同组成部分衔接的...微信小程序如何借助蓝牙与设备进行交互 微信小程序如何借助腾讯语音 API 让用户体验更上一层楼 ...
  • 微信小程序精品源码

    2017-08-24 21:45:22
    微信小程序精品源码
  • 微信小程序接入阿里云物联网平台 一 阿里云平台端 1.登录阿里云 阿里云物联网平台 点击进入公共实例,之前没有的点进去申请 2.点击产品,创建产品 3.产品名称自定义,按项目选择类型,节点类型选择之恋设备,联网...
  • 其中包含cryptojs、uuid生成模块,还有用于微信小程序连接阿里云物联网平台云端API的专属sdk,已结实现效果demo,只需填入阿里云物联网平台的一些密匙即可。具体请看文章...
  • 如何在贝壳物联网小程序中显示设备状态 用ESP8266登录贝壳物联平台可以实现灯、插座的控制,还能非常方便的利用天猫精灵进行语音控制。利用天猫精灵进行语音控制一般都能立刻知道被控设备的状态。而如果采用贝壳...
  • 搭建物联网环境 搭建物联网服务器的方式有很多种,趁着腾讯云服务器,还有域名没过期,我把物联网服务器建在我的云服务器上了。不过我也试过通过花生壳进行内网穿透,把物联网服务端建在本地,其实原理都是差不多的...
  • 微信小程序代码编写
  • 阿里云物联网云端API参考 https://help.aliyun.com/document_detail/69893.html?spm=a2c4g.11186623.6.743.66a92125iuKyp3 阿里云物联网OpenAPI ... 云端SDK参考 ...
  • 想要随时随地控制物联网设备吗?没问题,小程序可以帮你,随时随地,无需安装,点击即可使用。可以说,物联网小程序结合后,为开发者、用户提供了最大的便利,实现了物联网数据价值的最大化,也为开...
  • 微信小程序连接物联网4. 阿里云物联网M2M规则转发完成的样子 前言 折腾宿舍远程开门的这两周里碰壁不少,还好功能实现了。我想还有很多和我有同一想法的人。所以记录过程下来供参考少走弯路吧。我不是电子专业的...
  • 微信小程序快速接入物联网平台

    千次阅读 2020-06-23 18:15:04
    快速体验连接阿里云物联网的流程 二.准备过程 1.注册阿里云账号,并通过支付宝实名认证 链接: link1. 2.免费开通IOT物联网套件 按如下步骤操作: 打开链接: link2. 3.控制台操作 1)创建产品 输入产品名称,并...
  • 1. 基于EVUE的物联网小程序 EVM诞生以来,一直致力于让物联网开发变得简单,自鸿蒙OS 1.0 发布后,最引人注目的莫过于华为在应用程序开发框架层面面向应用开发者提供了一种全新的开发方式: 框架层 对于HarmonyOS...
  • 物联网开发实战》本期为大家详细讲解JavaScript语言构建端到端的智能家居中环境监测的物联网场景。 0.技术架构本次端到端全栈 IoT 物联网开发实战采用 Ruff ...
  • 简要说明: 实现微信小程序连接阿里云物联网平台并且显示阿里云设备信息等,设备端采用模拟设备进行数据上传,并且利用规则引擎和自定义的Topic进行信息的接受和发送。 目前效果图 步骤: 1.注册阿里云物联网开发...
  • 当前方案的原型是为硬件方案厂商订做的,一个数据采集及信息管理系统,核心包括两部分,分别如下: 1. 用于采集数据的后端服务器 2. 用于显示统计数据的前端,包括Web端和微信小程序
  • 基于Vue框架微信小程序物联网项目之设计笔记–创建工程模板 Vue简介 Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手...
  • 基于Vue框架微信小程序物联网项目之设计笔记记录 Vue Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三...
  • (1)在C#中,声明一个变量是由一个类型和跟在后面的一个或多个变量名组成,多个变量之间用逗号分开,声明变量以分号结束,且变量名区分大写; int iCount; //声明一个整型变量 string s1, s2, s3; //同时声明3个...
  • title: 腾讯物联网项目完结篇(添加微信小程序) tags: TencentOS date: 2019-10-05 21:53:00 拖更日记 这是拖更了大概一个多月的视频,主要记录一下上次参加腾讯OS内测项目的完结篇 我个人是一个具有重度拖延症...
  • 【微信小程序控制硬件①】 全网首发,借助 emq 消息服务器带你如何搭建微信小程序的mqtt服务器,轻松控制智能硬件! 【微信小程序控制硬件②】 开始微信小程序之旅,导入小程序Mqtt客户端源码,实现简单的验证和通讯...
  • 原文参考:微信小程序-MQTT模拟器 https://www.yuque.com/cloud-dev/iot-tech/awt6ow?spm=a2c6h.12873639.0.0.4f157874rqtIOL#bc8e91a0 1. 微信小程序安装 打开微信,扫一扫“阿里云IoT设备模拟器” 小程...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 41,977
精华内容 16,790
关键字:

物联网小程序