uniapp 一周快速开发微信小程序物联网项目

尽力漂亮

于 2020-12-22 11:14:51 发布

阅读量2.5k

点赞数 4

文章标签： uniapp springboot微信小程序微信小程序

本文链接：https://blog.csdn.net/weixin_44106334/article/details/111174346

版权

本文记录了一周内使用uniapp开发微信小程序物联网项目的全过程，涉及登录授权、监测站点、实时数据获取、页面跳转问题解决、数据交互、菜单筛选及打包发布等关键环节，同时分享了开发中遇到的问题与解决策略。

摘要由CSDN通过智能技术生成

文章目录

第一天：登录授权
- 前台
- 后台
- 交互
- bug笔记
- - vuex.store
  - - 需要熟练掌握
- 总结
第二天：监测站点
第三天实时数据
第三天
- uniapp请求后台数据方式
- uni.navigateTo 无法跳转到页面
第四天
- - 菜单筛选
第五天
第六天
第七天

第一天：登录授权

https://blog.csdn.net/qq_42783654/article/details/107862585

前台

后台

官网补充

https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/login/auth.code2Session.html

交互

——————————————————————————————

bug笔记

在这里插入图片描述

vuex.store

需要熟练掌握

vuex.store微信小程序踩坑

总结

在这里插入图片描述

第二天：监测站点

在这里插入图片描述

第三天实时数据

在这里插入图片描述

准备后台访问的数据

{"status":200,"msg":"查询站点数据成功","data":{"total":{"count":"453"},"data":[{"page":1,"limit":10,"_id":"5fd97da4ff88a8b24e7f2331","pointId":"19","pointName":null,"mn":"010000A89756877XU0251035","enterpriseId":null,"enterpriseName":null,"busId":null,"dataTime":null,"dataType":null,"arrayofkeyvalue":{"k":"20201216112400","v":{"碳氢化合物":{"Rtd":"36.6200","Flag":"N"},"烟气温度":{"Rtd":"12.0500","Flag":"N"},"烟气流速":{"Rtd":"12.0900","Flag":"N"},"烟气压力":{"Rtd":"0.0090","Flag":"N"},"甲烷":{"Rtd":"1.0500","Flag":"N"},"烟气湿度":{"Rtd":"2.1500","Flag":"N"},"烟道截面积":{"Rtd":"1.1300","Flag":"N"},"废气":{"Rtd":"49171.9531","Flag":"N"},"非甲烷总烃":{"Rtd":"35.5800","pointFloorval":"0","pointCeilval":"70","Flag":"N"}}},"flag":"d2011_g"}]},"ok":null}

<template>
	<view>
		<view class="content1"><text>{
  {pointName}}</text></view>
		<view class="search-block">
			<view class="search-ico-wapper">
				<image src="../../static/icon/search-active.png" class="search-ico" mode=""></image>
			</view>
			<view class="search-ico-wapper1">
				<image src="../../static/icon/cart-active.png" class="search-ico-1" mode=""></image>
			</view>
		</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;" v-for="data in dataList" :key="data.id">
				<view class="bbox">
					<view class="list-box">
						<view class="list-ed">

							<view class="list-left">

								<view class="list-name">{
  {data.divisorName}}
									<font></font>
								</view>

							</view>
							<view class="list-right">
								<text class="list-p2">{
  {data.Rtd}}</text>
							</view>
						</view>
					</view>

				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				pointName: "",
				time: 123,
				Cpage:1,
				dataList: [] //企业站点集合
			}
		},
		methods: {
			async getPoints(pointId, timeType, Cpage) {
				const res = await this.$myRuquest({
					url: '/wx/data/getDataList?pointId=' + pointId + '&&timeType=' + timeType + '&&Cpage=' + Cpage
				})
				var data = res.data.data.data[0]
				var strtime = data.arrayofkeyvalue.k;
				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.pointName = data.pointName;
				var objectKeyvalue = data.arrayofkeyvalue.v;
				var divisorList = [];
				var id = 0;
				if (data.flag.match("d2011")) { //判断为实时数据，显示对应的格式


					for (var o in objectKeyvalue) {
						id++;
						var divisorObject = new Object;
						divisorObject.id = id;
						divisorObject.divisorName = o;
						divisorObject.Rtd = objectKeyvalue[o].Rtd
						divisorList.push(divisorObject)
					}
				} else {
					for (var o in objectKeyvalue) {
						id++;
						var divisorObject = new Object;
						divisorObject.id = id
						divisorObject.divisorName = o;
						divisorObject.Rtd = objectKeyvalue[o].avg
						divisorList.push(divisorObject)
					}

				}
				this.dataList = divisorList;
			}

		},
		onLoad () {
		
		var pointId=19；
			var timeType = 'd2011';
			 this.getPoints(pointId, timeType, this.Cpage);
		}
		
		
		
			
	}
</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>

第三天

.踩坑记录

1 uni.navigateTo 无法跳转到页面
2.请求后台数据方式（get请求正常，传参乱码，后面解决办法就是前台传个对象，后台又对象接收

uniapp请求后台数据方式

封装的app.js

const BASE_URL = 'http://localhost: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.data.status !== 200) {
					return uni.showToast({
						title: '获取数据失败'
					})
				}
				
			},
			fail: (err)=>{
				uni.showToast({
					title: '请求接口失败'
				})
				reject(err)
			}
		})
	})
}

调用

	let emsg = {
					"enterpriseName": enterpriseName,
					"Cpage": Cpage
				}
				const res = await this.$myRuquest({
					url: '/wx/point/getPointList',
					methods: 'post',
					data: emsg,
					dataType: 'json'
				})
				this.pointList = res.data.data.data;

在这里插入图片描述

uni.navigateTo 无法跳转到页面

1.1把这个tarbar去掉


我们的其他页面的跳转我们可以通过以下的命令来进行页面的跳转：
uni.navigateTo({
   	url: '/pages/notice/notice'
})

但是当我们将这个地址配置到tabBar以后我们就无法通过上述的方法来访问了，这时候我们需要使用以下的方法来进行页面的访问：

uni.switchTab({
      url: '/pages/notice/notice'
})

1.2试试打印错误

uni.navigateTo({
url: ‘/pages/data/data?pointId=’ + item,
success(res) {
console.log(res);
},
fail(err) {
console.log(err);
}
});

在这里插入图片描述
去tarbar时我把基本配置也不小心去掉了，加回来

在这里插入图片描述
pa

最低0.47元/天解锁文章

尽力漂亮

关注

4
点赞
踩
21

收藏

觉得还不错? 一键收藏
0
评论
uniapp 一周快速开发微信小程序物联网项目

第一天：登录授权https://blog.csdn.net/qq_42783654/article/details/107862585前台后台官网补充https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/login/auth.code2Session.html交互——————————————————————————————bug笔记vuex.store需要熟练掌握vuex.store微信小程序踩
复制链接

扫一扫