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

文章目录

  • 第一天:登录授权
    • 前台
    • 后台
    • 交互
    • 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笔记

uniapp 一周快速开发微信小程序物联网项目_第1张图片

vuex.store

需要熟练掌握

vuex.store微信小程序踩坑

总结

uniapp 一周快速开发微信小程序物联网项目_第2张图片

第二天:监测站点

第三天 实时数据

uniapp 一周快速开发微信小程序物联网项目_第3张图片

准备后台访问的数据

{"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}






第三天

.踩坑记录

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;

uniapp 一周快速开发微信小程序物联网项目_第4张图片

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时我把基本配置也不小心去掉了,加回来

uniapp 一周快速开发微信小程序物联网项目_第5张图片
pages/point/point







pages/data/data







uniapp 一周快速开发微信小程序物联网项目_第6张图片
访问的数据

{"status":200,"msg":"查询监测站点成功","data":{"total":40,"data":[{"page":1,"limit":10,"pointId":"1","enterpriseId":"1","enterpriseName":"上海振华重工港机通用装备有限公司","pointName":"032# 港机通用1#出口","industryId":null,"regionId":null,"startTime":null,"endTime":null,"mn":null,"type":null,"divisorCount":null,"protocolType":null,"controllLevel":null,"latitude":null,"longitude":null,"isOnline":0,"isException":0,"isOverProof":0,"isConstvalue":0,"isZerovalue":0,"connectedTime":"2020-11-26 13:09:35","isStarted":null,"arrayofkeyvalue":null},{"page":1,"limit":10,"pointId":"2","enterpriseId":"1","enterpriseName":"上海振华重工港机通用装备有限公司","pointName":"033# 港机通用2#出口","industryId":null,"regionId":null,"startTime":null,"endTime":null,"mn":null,"type":null,"divisorCount":null,"protocolType":null,"controllLevel":null,"latitude":null,"longitude":null,"isOnline":0,"isException":0,"isOverProof":0,"isConstvalue":0,"isZerovalue":0,"connectedTime":null,"isStarted":null,"arrayofkeyvalue":null},{"page":1,"limit":10,"pointId":"3","enterpriseId":"1","enterpriseName":"上海振华重工港机通用装备有限公司","pointName":"131# 港机通用3#出口","industryId":null,"regionId":null,"startTime":null,"endTime":null,"mn":null,"type":null,"divisorCount":null,"protocolType":null,"controllLevel":null,"latitude":null,"longitude":null,"isOnline":0,"isException":0,"isOverProof":0,"isConstvalue":0,"isZerovalue":0,"connectedTime":null,"isStarted":null,"arrayofkeyvalue":null},{"page":1,"limit":10,"pointId":"4","enterpriseId":"2","enterpriseName":"上海大桥化工有限公司","pointName":"252# 大桥化工涂料制造排放","industryId":null,"regionId":null,"startTime":null,"endTime":null,"mn":null,"type":null,"divisorCount":null,"protocolType":null,"controllLevel":null,"latitude":null,"longitude":null,"isOnline":1,"isException":0,"isOverProof":0,"isConstvalue":0,"isZerovalue":0,"connectedTime":"2020-12-17 16:11:11","isStarted":null,"arrayofkeyvalue":null},{"page":1,"limit":10,"pointId":"5","enterpriseId":"14","enterpriseName":"富通集团上海电线有限公司","pointName":"472# 上海富通电线南排口","industryId":null,"regionId":null,"startTime":null,"endTime":null,"mn":null,"type":null,"divisorCount":null,"protocolType":null,"controllLevel":null,"latitude":null,"longitude":null,"isOnline":0,"isException":1,"isOverProof":0,"isConstvalue":0,"isZerovalue":0,"connectedTime":"2020-12-17 14:48:57","isStarted":null,"arrayofkeyvalue":null},{"page":1,"limit":10,"pointId":"6","enterpriseId":"14","enterpriseName":"富通集团上海电线有限公司","pointName":"473# 上海富通电线北排口","industryId":null,"regionId":null,"startTime":null,"endTime":null,"mn":null,"type":null,"divisorCount":null,"protocolType":null,"controllLevel":null,"latitude":null,"longitude":null,"isOnline":1,"isException":1,"isOverProof":0,"isConstvalue":0,"isZerovalue":0,"connectedTime":"2020-12-17 16:10:17","isStarted":null,"arrayofkeyvalue":null},{"page":1,"limit":10,"pointId":"9","enterpriseId":"13","enterpriseName":"上海瑞尔实业有限公司","pointName":"056# 上海瑞尔-1号出口(测)","industryId":null,"regionId":null,"startTime":null,"endTime":null,"mn":null,"type":null,"divisorCount":null,"protocolType":null,"controllLevel":null,"latitude":null,"longitude":null,"isOnline":0,"isException":0,"isOverProof":0,"isConstvalue":0,"isZerovalue":0,"connectedTime":null,"isStarted":null,"arrayofkeyvalue":null},{"page":1,"limit":10,"pointId":"11","enterpriseId":"11","enterpriseName":"上海强盛化工有限公司","pointName":"314# 上海强盛化工一期排口","industryId":null,"regionId":null,"startTime":null,"endTime":null,"mn":null,"type":null,"divisorCount":null,"protocolType":null,"controllLevel":null,"latitude":null,"longitude":null,"isOnline":0,"isException":0,"isOverProof":0,"isConstvalue":0,"isZerovalue":0,"connectedTime":"2020-12-15 01:00:16","isStarted":null,"arrayofkeyvalue":null},{"page":1,"limit":10,"pointId":"12","enterpriseId":"9","enterpriseName":"美卓流体控制(上海)有限公司","pointName":"上海美卓废气排放口","industryId":null,"regionId":null,"startTime":null,"endTime":null,"mn":null,"type":null,"divisorCount":null,"protocolType":null,"controllLevel":null,"latitude":null,"longitude":null,"isOnline":1,"isException":0,"isOverProof":0,"isConstvalue":0,"isZerovalue":0,"connectedTime":"2020-12-17 16:09:34","isStarted":null,"arrayofkeyvalue":null},{"page":1,"limit":10,"pointId":"13","enterpriseId":"8","enterpriseName":"上海电气电站设备有限公司上海汽轮机厂","pointName":"201# 上海汽轮机厂油漆房废气出口","industryId":null,"regionId":null,"startTime":null,"endTime":null,"mn":null,"type":null,"divisorCount":null,"protocolType":null,"controllLevel":null,"latitude":null,"longitude":null,"isOnline":1,"isException":0,"isOverProof":0,"isConstvalue":0,"isZerovalue":0,"connectedTime":"2020-12-17 16:09:35","isStarted":null,"arrayofkeyvalue":null}]},"ok":null}

第四天

目标
1.上拉刷新
2.下拉判断是否触底了
3.菜单筛选——分类查询(超标数据、异常数据、实时、分钟、小时、日数据切换)前台

菜单筛选

引入的组件
在这里插入图片描述
lee-popup.vue







data.vue







uniapp 一周快速开发微信小程序物联网项目_第7张图片

第五天

1.勾选因子名称实现列表变换
2.打包成小程序,注册公众号

第六天

1、权限 ——》登录授权 session
2、根据对应的权限——只能查看对应企业的数据

第七天

公众号消息推送学习

你可能感兴趣的:(#,VUE.JS,uniapp,springboot微信小程序,微信小程序)