uniapp/移动商务开发/一看就会/项目实战部分心得

前言

作为一个学生，我认为uniapp是一个非常有用的工具，可以帮助我们更轻松地进行移动应用开发。uniapp基于Vue.js框架，对于熟悉Vue.js的学生来说，上手uniapp会非常容易。我们可以使用熟悉的HTML、CSS和JavaScript来构建应用界面和逻辑，无需学习额外的语言和工具。这对于我们来说是一个很大的优势，可以节省学习成本，更加高效地进行开发。

推荐给喜欢学习的同学的网址噢：

uni-app官网            菜鸟教程 

目录

商品列表页功能 

商品详情页功能

---

学习目标：

在商品列表页我们要学会获取数据到视图中，然后呈现出来该数据。在详情页我们要做到列表页与购物车之间的传参接收，且运用到一些只有在微信小程序生效的代码。

商品列表成品如下图1-1：

 首先我们要先创建一个多个选项卡的视图(tabs.vue)来实现选项卡的功能：

<view class="tabs">
				<view class="text-box" v-for="(item,index) in tabs" :key="item.id" :class="item.isActive?'active':''
				" @click="click(item.id)">
			{{item.value}}
		</view>
	</view>

 然后v-for来循环其中的每个元素，在每次循环中，"item"表示当前循环的元素，"index"表示当前元素在数组或对象中的索引值。:key="item.id"将使用每个tab的id作为唯一标识符，给个单击事件再绑定数据。

 然后我们在项目的根目录下创建一个subpkg1的文件夹，在里面创建goods-datali文件，当然不要忘记了在pages.josn文件里注册噢！！！为了避免同学忘记我就放代码如下了，这个基本的就不做讲解啦。

"subPackages": [{
			"root": "subpkg1",
			"pages": [{
				"path": "goods-list/goods-list",
				"style": {
					"navigationBarTitleText": "商品列表",
					"backgroundColor": "#cecece",
					"onReachBottomDistance": 100, //当距离底部100时 发生触底
					"enablePullDownRefresh": true
				}
			}, {
				"path": "goods-datali/goods-datali",
				"style": {
					"navigationBarTitleText": "商品详情",
					"enablePullDownRefresh": false
				}

			}]


		},
	],

 写好goods-datali的视图后，我们首先要获取商品的数据，再者把它呈现给大家，创建一个方法，用异步async封装的方法更加便捷以便后续操作。

数据据请求完毕 就立即按需调用 cb回调函数，this.totalPageCount这一行是计算总的页数，然后在用console输出到控制台，可以在输出台看到数据message。

methods: {
			async getGoodsList(cb) {
				const res = await this.$Https({
					url: '/goods/search',
					data: this.queryParam
				});
				console.log(res);
                    cb && cb();
                this.totalPageCount = Math.ceil(res.message.total / this.queryParam.pagesize);
                this.goodsList = [...this.goodsList, ...res.message.goods]
                console.log(this.goodsList);
			}

在export default里添加页面生命周期函数，onLoad参数为上个页面（分类页）传递的数据，参数类型object（用于页面传参）

onLoad(e) {
			this.queryParam.cid = e.cid;
			this.getGoodsList()
		},

为了效果更好再做一个刷新加载功能，我们写在methods方法里，它的作用是当页面滚动到底部时触发的事件。在这个方法中，首先判断当前页码是否大于等于总页数，如果是，则表示已经没有下一页数据了，会弹出一个提示信息显示"数据加载完毕"。如果当前页码还没有达到总页数，那么会将页码加1，然后调用一个名为getGoodsList()的方法来获取下一页的数据，

	onReachBottom() {
			if (this.queryParam.pagenum >= this.totalPageCount) return uni.showToast({
				title: '数据加载完毕'
			})
			this.queryParam.pagenum++;
			this.getGoodsList();
		},

首先，在onPullDownRefresh方法中，重置数据，将goodsList数组清空。

然后，将queryParam对象中的pagenum属性重置为1，表示要重新加载第一页的数据。

接下来，通过setTimeout函数延迟1秒执行一个回调函数。

在回调函数中，调用getGoodsList方法来重新请求数据。这个方法可能是在组件的methods属性中定义的，用来发送网络请求获取商品列表数据。

当数据请求成功后，通过uni.stopPullDownRefresh()方法来停止下拉刷新的动画效果，让下拉刷新的提示消失。

简而言之，这段代码实现了下拉刷新的功能，当用户下拉页面时，会重置数据并重新请求数据，请求成功后停止下拉刷新的动画效果。

onPullDownRefresh() {
			this.goodsList = [];
			this.queryParam.pagenum = 1;
			setTimeout(() => {
				this.getGoodsList(() => uni.stopPullDownRefresh())
			}, 1000)

		},

 在有前面的基础上，我们就可以得到一个页面完整的样子啦，然后我们再给其加上排序功能，按照价格升序降序来排序的功能。我们再返回tabs组件给其设置一些方法：

props:['tabs'] 是在uniapp中的一个组件中使用的属性声明。它的作用是定义组件可以接收的外部传入的数据，这里的['tabs']表示组件可以接收一个名为tabs的属性。

export default {
		name:"wsx-tabs",
		data() {
			return {
				
			};
		},
		props:['tabs'],
		methods:{
			click(activeId){
				this.$emit("tabsChange",activeId);
			}
		}
	}

然后再使用一个数据数组在return里，isActive: 表示选项卡是否处于激活状态，即当前选中的状态。isActive为true表示该选项卡为当前激活状态，isActive为false表示该选项卡为非激活状态。然后我们的商品列表页就完美落幕啦~~~

tabsList: [{
					id: 0,
					value: "综合",
					isActive: true
				}, {
					id: 1,
					value: "价格▲",
					isActive: false
				}, {
					id: 2,
					value: "价格▼",
					isActive: false
				}],
queryParam: {
					query: '',
					cid: '', 
					pagenum: 1, 
					pagesize: 10 
				},

商品详情页如图：

 在图中我们可以发现有轮播图以及各种小功能还有下面的商品详情，又如何来编写呢？其实说实话与商品列表页也差不多，首先要获取到数据，然后再编写样式。

首先要向服务器接口发请时发送的数据，然后再通过方法把商品数据传输过来，切记！！！在export default里面写一个生命周期与上面的列表一样。一样的获取商品信息，使用异步的方法：

async getGoodsInfo() {
				const res = await this.$Https({
					url: '/goods/detail',
					data: this.queryParam 
				});
				console.log(res);
				this.goodsInfo = res.message;
				console.log(this.goodsInfo);
			},

一般购物程序中都有轮播图放大效果，那这个我们就要运用到uni-app中的一个组件了，使用preview()方法来实现，然后再给轮播图加上一个单击事件就ok了。

preview(index) {
				uni.previewImage({
					current: index,
					urls: this.goodsInfo.pics.map(x => x.pics_big)
				})
			},

那么到这里我们的相遇就结束啦，谢谢阅读噢~~~彻底完结啦！！！

我的心得

uniapp基于Vue.js框架，对于熟悉Vue.js的学生来说，上手uniapp会更加容易。Vue.js是一种非常流行的JavaScript框架，用于构建用户界面。学生可以利用他们已经掌握的Vue.js知识，更快地上手uniapp开发，提高效率。

此外，uniapp提供了丰富的组件和API，可以帮助学生实现各种功能和效果。无论是界面设计、交互体验还是数据处理，uniapp都提供了相应的组件和API，学生可以根据自己的需求选择合适的组件和API来实现他们的应用。