uniapp心得

半夜去杀猪917

已于 2023-06-27 17:32:18 修改

阅读量147

点赞数

文章标签： uni-app

于 2023-06-23 15:01:37 首次发布

本文链接：https://blog.csdn.net/weixin_69668965/article/details/131350497

版权

uni-app简介

uniapp是一个使用vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、等快应用等多个平台。

工具

HBuilder X、微信开发者工具

总结

本学期老师通过多乐商城项目带领我们学习和了解uniapp框架。

项目搭建

接口文档

ShowDoc一个非常适合IT团队的在线API文档、技术文档工具。你可以使用Showdoc来编写在线API文档、技术文档、数据字典、在线手册https://www.showdoc.com.cn/128719739414963/2516997897914014

帮助文档

uni-app官网：DCloud - HBuilder、HBuilderX、uni-app、uniapp、5+、5plus、mui、wap2app、流应用、HTML5、小程序开发、跨平台App、多端框架uni-app多端开发,开发一次同时生成App、小程序、H5https://dcloud.io/

阿里巴巴字体图标官网：iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造，设计和前端开发的便捷工具https://www.iconfont.cn/

菜鸟教程:菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程(www.runoob.com)提供了编程的基础技术教程, 介绍了HTML、CSS、Javascript、Python，Java，Ruby，C，PHP , MySQL等各种编程语言的基础知识。同时本站中也提供了大量的在线实例，通过实例，您可以更好的学习编程。..https://www.runoob.com/

阮一峰的flex教程：Flex 布局教程：语法篇 - 阮一峰的网络日志https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

Vue官网：https://cn.vuejs.org/v2/guide/https://cn.vuejs.org/v2/guide/

微信小程序官网：微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/framework/

目录结构

common：存放公共样式

components：存放自定义组件

page：存放主包页面（tab页面）

subpkg1：子包1，存放子包页面（商品列表页面、商品详情页面、搜索页面）

subpkg2：子包2，存放子包页面（其他页面）

utils：自己的帮助库

页面

字符图标

首页

效果

业务逻辑

1.使用tabbar实现底部导航功能

2.使用自定义组件的方式实现 头部搜索框

3.加载 轮播图 数据

4.加载导航数据

5.加载楼层数据

<script>
	export default {
		data() {
			return {
				swiperList: [], //轮播图数据
				navList: [], //导航栏
				floorList: [] //楼层
			}
		},
		onLoad() {
			this.getSwiperList();
			this.getNavList();
			this.getFloorList();
		},
		methods: {
			async getSwiperList() {
				const res = await this.$Https({
					url: '/home/swiperdata'
				});
				console.log(res);
				this.swiperList = res.message;
			},
async getNavList() {
				const res = await this.$Https({
					url: '/home/catitems'
				});
				console.log(res);
				this.navList = res.message;
			},
getFloorList() {
				this.$Https({
					url: '/home/floordata'
				}).then((res) => {
					this.floorList = res.message;
					console.log(this.floorList);
				})
			}

关键技术

1.全局样式设置

2.自定义组件实现 搜索框

3.uni内置 request API

4.swiper 组件

swiper组件标签存在默认的宽度与高度

100%*150px

图片存在默认宽度与高度

320px*240px

5.uni.request的封装

分类页面

效果

业务逻辑

1.加载分类页面数据

<script>
	export default {
		data() {
			return {
				cateData: [], //全部分类数据
				leftList: [], //左侧菜单数据
				rightList: [],
				currentIndex:0
			}
		},
		methods: {
			//获取分类数据
			async getCateData() {
				const res = await this.$Https({
					url: '/categories'
				});
				// console.log(res);

				//获取全部分类数据
				this.cateData = res.message;
				console.log(this.cateData);
				
				try{
					uni.setStorageSync('cates', {
						time: Date.now(),
						data: this.cateData
					});
				} catch (e) {
					uni.showToast({
						tital: "数据缓存失败",
						duration:2000
					})
				}

				//构建左侧菜单数据
				this.leftList = this.cateData.map(v => v.cat_name);
				console.log(this.leftList);

				//构建右侧数据（2级+3级）
				this.rightList = this.cateData[0].children;
				console.log(this.rightList);
			},
			changeIndex(index){
				this.currentIndex=index;
				this.rightList = this.cateData[index].children;
			}
		},
		onLoad() {
			// this.getCateData();
			//
			//
			const Cates = uni.getStorageSync('cates');
			if (!Cates) {
				this.getCateData();
			} else {
				if ((Date.now() - Cates.time) > 1000 * 10) {
					this.getCateData();
				} else {
					console.log('使用旧数据');
					this.cateData = Cates.data;
					//
					this.leftList = this.cateData.map(e => e.cat_name);
					//
					this.rightList = this.cateData[0].children;
				}
			}
		}
	}

2.点击左侧菜单，右侧数据动态渲染

关键技术

1.scroll-view 组件

商品列表页面

效果

业务逻辑

1.加载商品列表数据

2.启动上拉页面功能 onReachBotton 页面触底事件

3.加载下一面功能

4.启用下拉页面功能

（1）页面的json文件中开启设置 enablePullDownRefresh:true

（2）页面的js中，绑定事件 onPullDownRefresh

<script>
	export default {
		data() {
			return {
				//选项卡数据
				tabsList: [{
					id: 0,
					value: "综合",
					isActive: true
				}, {
					id: 1,
					value: "价格▲",
					isActive: false
				}, {
					id: 2,
					value: "价格▼",
					isActive: false
				}],

				//向商品列表搜索接口发请求时发送的数据
				queryParam: {
					query: '',
					cid: '', //3级类id
					pagenum: 1, //当前页码。接口默认为1
					pagesize: 10 //每页数据条数。接口默认为20
				},
				goodsList: []
			};
		},
		//Onload参数为上个页面（分类页）传递的数据，参数类型为Object（用于页面传参）
		onLoad(e) {
			this.queryParam.cid = e.cid
			this.getGoodsList()
		},
		//页面下拉加载
		//
		onReachBottom() {

			//判断是否还有下一页，如当前页面大于等于总页数，则没有下一页
			if (this.queryParam.pagenum >= this.totalPageCount) return uni.showToast({
				title: '到底啦~'
			})

			//获取下一页数据
			this.queryParam.pagenum++;
			this.getGoodsList();
		},
		//下拉刷新
		//1重置数据  2重置页码为1  3重新发请求  4关闭等待效果
		onPullDownRefresh() {
			//1重置数据
			this.goodsList = [];
			//2重置页码为1
			this.queryParam.pagenum = 1;
			//3重新发送请求
			setTimeout(() => {
				//数据请求发送成功后去掉下拉
				this.getGoodsList(() => uni.stopPullDownRefresh());
			}, 1000)
		},
		methods: {
			//切换选项卡
			handleTabsChange(activeId) {
				this.tabsList.forEach(v => v.id == activeId ? v.isActive = true : v.isActive = false);
			},
			//获取商品列表
			async getGoodsList(cb) {
				const res = await this.$Https({
					url: '/goods/search',
					data: this.queryParam
				});
				console.log(res);
				// this.goodsList=res.message.goods


				//只要数据请求完毕，就立即按需调用cb回调函数
				cb && cb();

				//计算总页数
				this.totalPageCount = Math.ceil(res.message.total / this.queryParam.pagesize);


				//为数据赋值 通过扩展运算符的形式，进行新旧数据拼接
				this.goodsList = [...this.goodsList, ...res.message.goods]

				console.log(this.goodsList);
			}
		}
	}
</script>