HBuilderX编写APP二、获取数据代码以及如何打包发行app

<template>
	<!-- 修改APP名字的地方在pages.json文件里面 -->
	<!-- <view class="content">
		<view class="">温度{{temp}} ℃	</view>  //添加温度显示
		<view class="">湿度{{humi}} %	</view>	//添加湿度显示
		<switch :checked="led" @change="ledSwitchContrl" />  //添加按钮，ledSwitchContrl是按钮槽函数处理函数
	</view> -->
	
	<view class="wrap">
		<view class="dev-area">
	
			<view class="dev-cart">
				<view class="">
					<view class="dev-name">温度</view>
					<image class="dev-logo" src="../../static/temp.png" mode=""></image>
				</view>
				<!-- 其中数据树temp，numFilter是下面的一种声明用于保留小数点后两位 -->
				<view class="dev-data">{{temp | numFilter}} ℃</view>
			</view>
			<view class="dev-cart">
				<view class="">
					<view class="dev-name">心率</view>
					<image class="dev-logo" src="../../static/xinlv.png" mode=""></image>
				</view>
				<view class="dev-data">{{xinlv}}BPM</view>
			</view>
			<view class="dev-cart">
				<view class="">
					<view class="dev-name">血氧</view>
					<image class="dev-logo" src="../../static/xueyang.png" mode=""></image>
				</view>
				<view class="dev-data">{{xueyang | numFilter}}ml/dl</view>
			</view>
			<view class="dev-cart">
				<view class="">
					<view class="dev-name">跌倒</view>
					<image class="dev-logo" src="../../static/diedao.png" mode=""></image>
				</view>
				<view class="dev-data">{{diedao}}</view>
			</view>
			<!--
			<view class="dev-cart">
				<view class="">
					<view class="dev-name">跌倒</view>
					<image class="dev-logo" src="../../static/led.png" mode=""></image>
				</view>
				<switch :checked="led" @change="ledSwitchContrl" color="#8f8f94"/>
			</view>
			-->
			<view class="dev-cart">
				<view class="">
					敬请期待...
				</view>
			</view>
	
		</view>
	</view>
</template>

<script>   //处理数据的
	const {
		createCommonToken
	} = require('@/key.js')
	export default {
		data() {
			return {
				temp: '26',   //初始值
				xueyang: '23',
				diedao:  '0',
				xinlv:  '66',
				token: '',
			}
		},
		onLoad() {
			const params = {
				author_key : '6jSJ/XLi9NuEtDS6+8oX+y5y0QMilrTSMUcsk/2+Id98UOI1daDICVxWBaNpuzRJwajIO5YlYZElSikJdF1Tsw==',
				version : '2022-05-01',
				user_id : '374668',  
			}
			this.token = createCommonToken(params);
			console.log(this.token)
		},
		onShow(){
			this.fetchDevData();
			setInterval(()=>{
				this.fetchDevData();
			},2000)   //定时3秒钟
		},
		methods: {
			fetchDevData(){   //获取云平台数据的函数
				uni.request({ 
				    url: 'https://iot-api.heclouds.com/thingmodel/query-device-property', //仅为示例，并非真实接口地址。
				    method:'GET',//请求方式是“GET”
					data: {
						product_id:'RT5W2UKK9g', //产品ID,需要修改
						device_name:'test'		//设备名
				    },
				    header: {
				        'authorization': this.token //前面使用了函数求出了token的值放在了变量token中
				    },
				    success: (res) => {         //如果请求成功的话，就会回调这里的这部分东西
				        console.log(res.data);	//打印返回的消息
						this.diedao = res.data.data[0].value;
						this.temp = res.data.data[1].value;
						//this.led = res.data.data[1].value === 'true' ? true : false;
						this.xinlv = res.data.data[2].value;
						this.xueyang = res.data.data[3].value;
				    }
				});
			}//,
			/*
			ledSwitchContrl(event){   //上面的按键点击会调用这个函数，在函数中将按键的值发给服务器
				console.log(event.detail.value);  //获取按键的值，从函数的传参event中获取
				let value = event.detail.value;  //将值放在变量中
					uni.request({ 
						url: 'https://iot-api.heclouds.com/thingmodel/set-device-property', 
						method:'POST',//请求方式是“POST”
						data: {
							product_id:'t0Px1UBcRd', //产品ID,需要修改
							device_name:'d1'		,//设备名
							params:{ "led": value }  //发送的数据
						},
						header: {
							'authorization': this.token //前面使用了函数求出了token的值放在了变量token中
						},
						success: () => {         //如果请求成功的话，就会回调这里的这部分东西
							console.log('LED ' + (value ? 'ON' : 'OFF') + ' !');  //只做打印，因为是发送过去，证明发送成功了
						}
					});
			}
			*/
	
		},
		
		//这部分用于取小数点后两位
		filters: {
		   numFilter(value) {
		     let realVal = "";
		     if (!isNaN(value) && value !== "") {
		       // 截取当前数据到小数点后两位,改变toFixed的值即可截取你想要的数值
		       realVal = parseFloat(value).toFixed(2);
		     } else {
		       realVal = "--";
		     }
		     return realVal;
		   },
		 },
	}
</script>

<style>   //美化界面的
	/* .content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	} */
	
	.wrap {
		padding: 30rpx;
	}
	
	.dev-area {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	
	.dev-cart {
		height: 150rpx;
		width: 320rpx;
		border-radius: 30rpx;
		margin-top: 30rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		box-shadow: 0 0 15rpx #ccc;
	}
	
	.dev-name {
		font-size: 20rpx;
		text-align: center;
		color: #6d6d6d;
	}
	
	.dev-logo {
		width: 70rpx;
		height: 70rpx;
		margin-top: 10rpx;
	}
	
	.dev-data {
		font-size: 50rpx;
		color: #6d6d6d;
	}
	
	
</style>