uniapp和nodejs的移动商城

原创已于 2023-03-12 22:22:48 修改 · 1k 阅读

13 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#uni-app #前端 #vue.js #node.js

于 2023-02-05 21:39:43 首次发布

本文详细介绍了uniapp项目开发过程，包括如何引入iconfont图标，设置顶部导航titleNView，创建轮播图组件并处理其高度问题。同时，文章讨论了数据渲染、滑动事件的监听，以及如何通过接口获取和展示数据。此外，还涉及VueX状态管理在全选和单选功能中的应用，搜索功能的实现，以及城市选择插件的集成和地址管理功能的开发。

一：新建项目及相关准备

1.添加公共的css文件。

2.在iconfont网站找需要用的图标，引入。

这里会遇到图标不显示的问题，查了很多资料，发现这个文章有用uniapp引入iconfont_旭陌小生的博客-CSDN博客_uniapp 引入iconfont

二：顶部的开发

使用app-plus配置，里面的titleNView，配置顶部导航（以下是titleNView的配置项）

具体配置，利用浮动配置一左一右两个图片，text是阿里图标中的unicode码

三：轮播图组件

直接输入swiper就会快捷生成swiper，当图片添加进去后，需要设置图片宽度为100%。但是swiper组件中高度是默认的，所以swiper高度要与轮播图图片一致，才能完全显示。

顶部滑动

效果是随着顶部的点击，下面也显示出对应的内容

首先渲染数据

此时还无法实现滚动，需要给父元素设定宽高，并不允许换行，子元素转换成行内块元素

选定谁谁高亮效果

首先定义一个索引，如果索引与当前的序号相同，则不变。如果不同，则改为选中的状态

下一步，实现顶部滑块的点击，使得下面内容随之改变

1.首先下面放一个swiper，里面写上每个滑块对应的内容

然后使用change事件，当curren改变时会调用change事件，此时我们把change绑定为上面滑块的index，当上面滑块index改变时就会触发下面的change事件。

当下面的内容滚动时，上面滑块也会跟着变化，但是不会动态变化，就是内容不会滑动。

给上面的滑块设定一个scroll-into-view，且设置id（id不能以数字开头）

当滑块变化时设置对应的index

此时上面的滑块就会跟着变化。

当我们将之前写好的组件放入swiper中时，会发现只显示了一小部分内容，原因是swiper有默认的高度。

解决办法：在onReady中获取节点的高度。

给swiper的高度赋值，即可显示完整。

搭建node

首先全局安装

npm install express-generator -g

接着进入app中安装

express --view=ejs server

然后根据提示安装

安装后启动后端（npm start），如图是成功的

在server文件夹下的router里写接口

写完重启服务器，即可访问到数据

前端访问后端的地址，在onLoad函数访问

但此时并没有输出，因为我们是本地测试，不是访问远程服务器的接口，所以需要

1：电脑手机同一个wifi。

2不能用localhost，改为ip

查找电脑的ip，将localhost替换。

此时我们也能得到数据a

可以成功请求到数据，所以我们将需要的数据写到这个路径下

然后将请求数据的方法封装

将原有的topBar删除，使用接口赋值

再定义一个新数据newTopBar来对应渲染不同的Tabbar

传递数据并渲染

但是最后却会有多个“猜你喜欢”

解决办法：使用template标签，把Card与另一个组件放一起，且Card必须放在下面，还有判断条件需放在template中

旧写法

正确写法

修改可视区高度问题

下面这种api已经无法获取高度，因为这个类里面有组件且有数据渲染

因此不用这个方法，使用scroll-view标签

用另一个api来测试可视区域的高，用可视区的高减去滑块高

写接口传数据

根据不同滑块显示不同数据

每次滑动数据添加一个判断

上拉加载更多

定义一个变量，初始值为‘上拉加载更多’，当触底后，调用函数

传入函数并判断执行

封装request

在request.js文件中对请求进行封装

export default{
	common:{
		baseUrl:'http://192.168.43.243:3000/api',
		data:{},
		header:{
			"Content-Type":"application/json",
			"Content-Type":"application/x-www-form-urlencoded",
		},
		method:"GET",
		dataType:'json'
	},
	request(options={}){
		uni.showLoading({
			title:'加载中'
		})
		// console.log(1);
		options.url=this.common.baseUrl+options.url;
		options.data=options.data||this.common.data;
		options.header=options.header||this.common.header;
		options.method=options.method||this.common.method;
		options.dataType=options.dataType||this.common.dataType;
		return new Promise((res,rej)=>{
			uni.request({
				...options,
				success: (result) => {
					if(result.statusCode!=200){
						return rej()
					}
					let data=result.data.data;
					res(data)
					
					// 请求成功后取消加载中
					setTimeout(function(){
						uni.hideLoading();
					},500);
					
				}
			})
		})
	}
}

然后在组件中引入