以上就是我的项目总结，同学们有问题或不同见解都可以在评论区留言哦 ! uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架 。

 开发者通过编写 Vue.js 代码，uni-app 将其编译到 iOS、Android、微信小程序、支付宝小程序、百度小程序、   H5等多个平台，保证其正确运行并达到优秀体验。

uni-app在开发者数量、案例、跨端抹平度、扩展灵活性、性能体验、周边生态、学习成本、开发成本等8大关键指标上拥有更强的优势。

在这次uni-app商城项目中我负责商品分类、购物车、密码登录和手机登录等多个页面

1.商品分类    有滚动监听、点击左边栏到指定的商品区域

左右分别做个可滚动视图，为了适应不同机型要先获取屏幕高度

uni.getSystemInfo({
 success: function(res) { // res - 各种参数自己输出查看
 this_.gao = res.windowHeight-res.statusBarHeight-res.statusBarHeight// 屏幕的宽高 
		}
	});

调节滚动视图的高度

滚动监听

2.购物车     编辑删除以选商品  全选按钮  商品数量增加减少和总价计算等

点击编辑有个显示隐藏删除按钮 删除通过按钮获取该商品信息后删除

全选按钮和单选按钮我是点击后通过显示隐藏来切换图片

<view class="ahd-ra-2"  >
	<image class="viace" v-if="item.checked" @click="handleSelectRadio(index)" src="../../../../static/shoppingImg/fill.png"></image>
	<image  class="viace" v-else @click="handleSelectRadio(index)" src="../../../../static/shoppingImg/mai.png"></image>
						</view>

handleSelectRadio(e) {//单选中  全部选中时全选选中
				let that = this;
				that.dad[e].checked = !that.dad[e].checked; //反选
				for (let i = 0; i < that.dad.length; i++) {
					if (!that.dad[i].checked) {
						that.kmaye1 = true;
					}
				}
				that.kmaye1 = !that.kmaye1;
				this.comBined();
			},
			handlekmaye1(){//全选选中时 让所有商品也选中
				let that = this;
				that.kmaye1 = !that.kmaye1;
				for (let i in that.dad) {
					that.dad[i].checked = that.kmaye1;
				}
				if(this.dad.length == 0){  //列表为空时全选按钮为false
					this.kmaye1 = false;
				}
				this.comBined();
			}

商品数量增加减少和总价计算的方法 

reduction (e){//减少数量 当数量等于最小值时就等于最小值
				let that = this;
				if(that.dad[e].num > that.dad[e].minnum){
					that.dad[e].num = that.dad[e].num - 1;
					this.comBined();
				}
			},
			add(e){//点击添加数量
				let that = this;
				if(that.dad[e].num < that.dad[e].maxnum){
					that.dad[e].num ++;
					this.comBined();
				}
			},
			comBined(){//计算总计价格
				let nmb = 0;
				for (var j = 0; j < this.dad.length; j++) {
					if(this.dad[j].checked){
						for (var i = 0; i < this.dad.length; i++) {
							if(this.dad[i].checked){
								nmb += this.dad[i].pprice * this.dad[i].num;
								this.money = parseFloat(nmb.toFixed(2));
							}
						}
						return
					}
				}
				this.money = 0;
			}

3.密码登录和手机登录 

btn: function() {
				let this_ =this
				if (this.account.length <= 0) {
					uni.showToast({
						icon: 'none',
						title: '请输入用户名'
					});
					return;
				}
				if (this.pas.length <= 0) {
					uni.showToast({
						icon: 'none',
						title: '请输入密码'
					});
					return;
				}
				uni.request({
					url: 'http://ceshi3.dishait.cn/api/login', //仅为示例，并非真实接口地址。
					data: {
						username:this_.account,//user2
						password:this_.pas//zcmcss
					},
					method: 'POST',
					success: (res) => {
						this_.miyao = res.data
						uni.setStorage({
						key:"miyao",
						data:res.data
						});
						console.log(this_.miyao)
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							});
						if (res.data.msg == "ok") {
							uni.showToast({
							icon: 'none',
							title: '登录成功'
						});
							return;
						
						};
						
						
					},
					fail: () => {
						uni.showToast({
							icon: 'none',
							title: '网络异常,请稍后重试'
						});
					},
				})

			}

以上就是我的项目总结，如果有问题或不同见解都可以在评论区留言讨论！