uniapp微信小程序实现《优购商城项目》

目录

一.下载HBuliderX与安装

创建项目

二.搭建项目

目录结构

页面名称

 首页效果图

 业务逻辑

代码如下:

 分类页面效果图

业务逻辑

代码如下:

商品列表效果图 

业务逻辑

代码如下:

商品详情页效果图

业务逻辑

代码如下:

购物车页面效果图

业务逻辑

代码如下:

支付页面效果图

业务逻辑

代码如下:

个人中心页面效果图

代码如下:

三.运行到微信小程序 

下载微信开发者工具

​总结

一.下载HBuliderX与安装

下载地址:https://dcloud.io/hbuilderx.html

下载完成进行解压安装

创建项目

• 点击HbuilderX菜单栏文件>项目>新建
• 选择uni-app,填写项目名称，项目创建的目录

安装所需要的插件

项目目录和文件作用

1.pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等

2.manifest.json 文件是应用的配置文件，用于指定应用的名称、图标、权限等。

3.App.vue是我们的跟组件，所有页面都是在App.vue下进行切换的，是页面入口文件，可以调用应用的生命周期函数。

4.main.js是我们的项目入口文件，主要作用是初始化vue实例并使用需要的插件。

5.uni.scss文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置。

6.unpackage就是打包目录，在这里有各个平台的打包文件

7.pages所有的页面存放目录

8.static静态资源目录，例如图片等

9.components组件存放目录

二.搭建项目

项目所需要的接口文档:https://www.showdoc.com.cn/128719739414963/2516997897914014

目录结构

页面名称

 首页效果图

 业务逻辑

• 使用tabbar实现底部导航功能
• 使用自定义组件的方式实现 头部搜索框
• 加载 轮播图 数据
• 加载 导航 数据
• 加载 楼层 数据

代码如下:

<template>
	<view class="content">
		<hy-header></hy-header>
		<view class="index-swiper">
			<swiper indicator-dots="true" autoplay="true" interval="4000">
				<swiper-item v-for="(item,index) in swiperList" :key="index">
					<image :src="item.image_src" mode="widthFix"></image>
				</swiper-item>
			</swiper>
		</view>

		<view class="index-cate">
			<view class="image-box" v-for="(item,index) in navList">
				<image :src="item.image_src" mode="widthFix"></image>
			</view>
		</view>

	<view class="index-floor">
				<view class="floor-group" v-for="(item,index) in floorList" :key="index">
					<view class="floor-title">
						<image :src="item.floor_title.image_src" mode="widthFix"></image>
					</view>
					<view class="floor-list">
						<view class="image-box" v-for="(item2,index2) in item.product_list" :key="index2">
							<image :src="item2.image_src" mode="scaleToFill"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperList: [],
				navList: [],
				floorList: []

			}
		},
		onLoad() {
			this.getSwiperList()
			this.getNavList()
			this.getFloorList()

		},
		methods: {
			// 		getSwiperList() {
			// 			// uni.request({
			// 			// 	url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
			// 			// 	success: (res) => {
			// 			// 		console.log(res);
			// 			// 		this.swiperList = res.data.message;
			// 			// 	}
			// 			// })
			// 			this.$Https({
			// 					url: '/home/swiperdata'
			// 				})
			// 				.then((res) => {
			// 					this.swiperList = res.message;
			// 					console.log(this.swiperList);
			// 				})
			// 		},
			// 		getNavList() {
			// 			// uni.request({
			// 			// 	url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/catitems',
			// 			// 	success: (res) => {
			// 			// 		console.log(res);
			// 			// 		this.navList = res.data.message;
			// 			// 	}
			// 			// })
			// 			this.$Https({
			// 					url: '/home/catitems'
			// 				})
			// 				.then((res) => {
			// 					this.navList = res.message;
			// 					console.log(this.navList);
			// 				})
			// 		},
			// 		// getFloorList() {
			// 		// 	this.$Https({
			// 		// 			url: '/home/floordata'
			// 		// 		})
			// 		// 		.then((res) => {
			// 		// 			// this.floorList = res.message;
			// 		// 			console.log(this.floorList);
			// 		// 		})
			// 		// }

			// 	}
			// }
			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;
			},
			async getFloorList() {
				const res = await this.$Https({
					url: '/home/floordata'
				});
				console.log(res);
				this.floorList = res.message;

			}

		}
	}
</script>

<style lang="scss">
	page {
		padding-top: 90rpx;
	}

	.index-swiper {
		swiper {
			width: 750rpx;
			height: 340rpx;

			image {
				width: 100%;
			}
		}
	}

	.index-cate {
		width: 750rpx;
		display: flex;

		.image-box {
			flex: 1;
			padding: 20rpx;

			image {
				width: 100%;
			}
		}
	}
	.index-floor {
			width: 750rpx;
	
			.floor-title {
				image {
					width: 100%;
				}
			}
	
			.floor-list {
				padding: 15rpx;
	
				.image-box {
					width: 240rpx;
					height: calc(240rpx * 386 /232);
					float: left;
	
					&:nth-last-child(-n+4) {
						height: calc(240rpx * 386 /232 /2);
						border-left: 10rpx solid #ffffff;
					}
	
					&:nth-child(2),
					&:nth-child(3) {
						border-bottom: 5rpx solid #ffffff;
					}
	
					&:nth-child(4),
					&:nth-child(5) {
						border-top: 5rpx solid #ffffff;
					}
	
					image {
						width: 100%;
						height: 100%;
						}
					}
				}
			}
</style>

 分类页面效果图

业务逻辑

• 加载分类页面数据
• 点击左侧菜单，右侧数据动态渲染

代码如下:

<template>
	<view>
		<hy-header></hy-header>
		<view class="index-cate">
			<scroll-view class="left-menu" scroll-y="true">
				<view class="cate1" :class="index==currentIndex?'active':''" v-for="(item,index) in leftList"
					:key='index' @tap="changeIndex(index)">
					{{item}}
				</view>
			</scroll-view>

			<scroll-view class="right-data" scroll-y="true">
				<view class="cate2-group" v-for="(item,index) in rightList" :key='index'>
					<view class="cate2-title">
						{{item.cat_name}}
					</view>
					<view class="cate3-list">
						<navigator class="image-box" v-for="(item2,index2) in item.children" :key='index2'
							:url="'../../subpkg1/goods-list/goods-list?cid='+item2.cat_id">
							<image :src="item2.cat_icon" mode="widthFix"></image>
							<text>{{item2.cat_name}}</text>

						</navigator>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cateDate: [],
				leftList: [],
				rightList: [],
				currentIndex: 0
			}
		},
		onLoad() {
			this.getCateDate()
			this.leftList()
			this.rightList()
			const Cates = uni.getStrageSync('cates');
			if (!Cates) {
				this.getCateDate();
			} else {
				if (Date.now() - Cates.time > 1000 * 10) {
					this.getCateDate();
				} else {
					console.log('使用旧数据');
					this.cateDate = Cates.data;
					this.leftList = this.cateDate.map(e => e.cat_name);
					this.rightList = this.cateDate[0].children;
				}
			}

		},
		methods: {
			async getCateDate() {
				const res = await this.$Https({
					url: '/categories'
				});
				this.cateDate = res.message;
				console.log(this.cateDate);
				try {
					uni.setStorageSync('cates', {
						time: Date.now(),
						data: this.cateDate


					});
				} catch (e) {
					uni.showToast({
						tital: "数据缓存失败",
						duration: 2000
					})
				}
				this.leftList = this.cateDate.map(v => v.cat_name);
				console.log(this.leftList);
				this.rightList = this.cateDate[0].children;
				console.log(this.rightList);
			},
			changeIndex(index) {
				this.currentIndex = index;
				this.rightList = this.cateDate[index].children;
			}
		}
	}
</script>

<style lang="scss">
	page {
		padding-top: 90rpx;
	}

	.index-cate {
		height: calc(100vh - 90rpx);
		display: flex;

		.left-menu {
			flex: 2;

			.cate1 {
				height: 90rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #f8f8f8;
				border-bottem: var(--separateLine);
				border-bottom: 1rpx solid #996699;

				&.active {
					color: #996699;
					background-color: #ffffff;
					position: relative;

					&::before {
						content: '';
						display: block;
						width: 3px;
						height: 30px;
						background-color: #996699;
						position: absolute;
						top: 50%;
						left: 0;
						transform: translateY(-50%);
					}
				}
			}
		}

		.right-data {
			flex: 5;

			.cate2-group {
				.cate2-title {
					height: 90rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.cate3-list {
					display: flex;
					flex-wrap: wrap;

					.image-box {
						width: 33.33%;
						display: flex;
						flex-direction: column;
						align-items: center;

						image {
							width: 70%;
						}

						text {
							margin-bottom: 10rpx;
						}
					}
				}
			}
		}
	}
</style>

商品列表效果图 

业务逻辑

•  加载商品列表数据
• 启动上拉页面功能 onReachBotton 页面触底事件
• 加载下一面功能
• 启用下拉页面功能

1. 页面的json文件中开启设置 enablePullDownRefresh:true
2. 页面的js中，绑定事件 onPullDownRefresh

代码如下:

<template>
	<view>
		<hy-header></hy-header>

		<hy-tabs :tabs="tabsList" @tabsChange="handleTabsChange"></hy-tabs>

		<view>
			<hy-goods v-for="(item,index) in newGoodsList" :key="index" :goods="item"></hy-goods>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabsList: [{
					id: 0,
					value: "综合",
					isActive: true
				}, {
					id: 1,
					value: "价格▲",
					isActive: false
				}, {
					id: 2,
					value: "价格▼",
					isActive: false
				}],
				queryParam: {
					query: '',
					cid: '',
					pagenum: 1,
					pagesize: 10
				},
				goodsList: [],
				totalPageCount: 1,
				isloading: false

			};
		},
		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();
		},
		onPullDownRefresh() {
			this.goodsList = [];
			this.queryParam.pagenum = 1;
			setTimeout(() => {
				this.getGoodsList(() => uni.stopPullDownRefresh());
			}, 1000)
		},
		methods: {
			handleTabsChange(activeId) {
				this.tabsList.forEach(v => v.id == activeId ? v.isActive = true : v.isActive = false)
			},
			async getGoodsList(ab) {
				const res = await this.$Https({
					url: '/goods/search',
					data: this.queryParam
				});
				console.log(res);
				//this.goodsList = res.message.goods;

				ab && ab();
				this.totalPageCount = Math.ceil(res.message.total / this.queryParam.pagesize);

				this.goodsList = [...this.goodsList, ...res.message.goods]
				console.log(this.goodsList);
			}

		},
		computed: {
			newGoodsList() {
				console.log('computed方法被调用');

				function compare(arg) {
					return function(a, b) {
						return a[arg] - b[arg];
					}
				}
				if (this.tabsList[0].isActive) {
					return this.goodsList;
				} else if (this.tabsList[1].isActive) {
					this.goodsList.sort(compare('goods_price'));
					return this.goodsList;
				} else {
					this.goodsList.sort(compare('goods_price'));
					this.goodsList.reverse();
					return this.goodsList;
				}
			}
		},
	}
</script>

<style lang="scss">
	page {
		padding-top: 90rpx;
	}

	
</style>

商品详情页效果图

业务逻辑

• 渲染商品详情数据
• 点击图片，调用图片画廊，进行预览
• 点击收藏
• 联系客服
• 分享功能
• 加入购物车

代码如下:

<template>
	<view class="goods-detail">
		<!-- 轮播图 -->
		<view class="goods-swiper">
			<swiper indicator-dots="true" autoplay="true" interval="3000" duration="1000">
				<swiper-item v-for="(item,index) in goodsInfo.pics" :key="index">
					<image :src="item.pics_sma" mode="aspectFit" @click="preview(index)"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- //价格 -->
		<view class="goods_price">￥{{goodsInfo.goods_price}}</view>
		<!-- //商品信息 -->
		<view class="goods_name">
			<view class="name">
				{{goodsInfo.goods_name}}
			</view>
			<view class="collect">
				<text class="iconfont icon-shoucang"></text>
				<text>收藏</text>
			</view>
		</view>
		<!-- //图文详情 -->
		<view class="goods_text">图文详情</view>
		<!-- 富文本 -->
		<rich-text :nodes="goodsInfo.goods_introduce"></rich-text>
		<!-- 工具栏 -->
		<view class="goods-tool">
			<view class="tool-item">
				<text class=" iconfont icon-kefu"></text>
				<text>客服</text>
				<button type="default" open-type="contact"></button>
			</view>
			<view class="tool-item">
				<text class="iconfont icon-31fenxiang"></text>
				<text>分享</text>
				<button type="default" open-type="share"></button>
			</view>
			<view class="tool-item" @tap="gotoCart">
				<text class=" iconfont icon-shouye"></text>
				<text>购物车</text>
				<button type="default"></button>
			</view>
			<view class="common add-cart" @tap="addCart">
				<text>加入购物车</text>
			</view>
			<view class="common buy" @tap="buy">
				<text>立即购买</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				queryParam: {
					goods_id: 0
				},
				goodsInfo: [],
			}
		},
		onLoad(e) {
			this.queryParam.goods_id = e.goods_id;
			this.getGoodsInfo();
		},
		methods: {
			async getGoodsInfo() {
				const res = await this.$Https({
					url: '/goods/detail',
					data: this.queryParam
				});
				// console.log(res);
				this.goodsInfo = res.message;
				console.log(this.goodsInfo);
			},
			preview(index) {
				uni.previewImage({
					current: index,
					urls: this.goodsInfo.pics.map(x => x.pics_big)
				})
			},

			gotoCart() {
				uni.switchTab({
					url: '/pages/cart/cart'
				})
			},
			addCart() {
				let cart = uni.getStorageSync('cart') || [];
				console.log(cart);

				let index = cart.findIndex(v => v.goods_id == this.goodsInfo.goods_id);
				if (index == -1) {
					this.goodsInfo.cartNum = 1;
					this.goodsInfo.checked = true;
					cart.push(this.goodsInfo);
				} else {
					cart[index].cartNum++;
				};
				uni.setStorageSync('cart', cart);
				uni.showToast({
					title: "加入成功"
				});

			},
			//立即购买
			buy() {
				this.goodsInfo.cartNum = 1;
				this.goodsInfo.checked = true;
				uni.setStorageSync('buy', this.goodsInfo);
				uni.navigateTo({
					url: '../../subpkg2/pay/pay'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		padding-bottom: 90rpx;
	}

	.goods-detail {
		.goods-swiper {

			height: 500rpx;

			image {
				width: 750rpx;
				// height: 80%;		
				align-items: center;
				justify-content: center;

			}
		}

		.goods_price {
			font-size: 50rpx;
			margin: 20rpx 0rpx;
			color: var(--emeColor);
		}

		.goods_name {
			display: flex;
			padding: 20rpx 10rpx;
			margin-right: 10rpx;
			border-bottom: 6rpx solid #c6c6c6;

			.name {
				flex: 7;
			}

			.collect {
				display: flex;
				flex-direction: column;
				align-items: center;
				flex: 1;
				border-left: 4rpx solid #868686;
			}
		}

		.goods_text {
			font-size: 50rpx;
			margin: 20rpx 0rpx;
			color: var(--emeColor);
		}


		.goods-tool {
			width: 100%;
			height: 90rpx;
			display: flex;
			position: fixed;
			left: 0;
			bottom: 0;

			.tool-item {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				background-color: #fff;
				font-style: 26rpx;
				position: relative;

				button {
					width: 60px;
					height: 100%;
					margin: 0 20%;
					position: absolute;
					top: 0;
					left: 0;
					opacity: 0;
				}


			}

			.common {
				flex: 2;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 30rpx;
				font-weight: 600;
				color: #fff;

				&.add-cart {
					background-color: #ffaa00;
				}

				&.buy {
					background-color: #eb4450;
				}
			}
		}
	}
</style>

购物车页面效果图

业务逻辑

• 从本地存储获取购物车数据，渲染购物车数据
• 添加收货地址
• 修改商品数据
• 单选和全选功能

代码如下:

<template>
	<view>
		<view v-if="cart.length!==0">
			<hy-address :address="address"></hy-address>
			<view class="cart-title">
				<text class="iconfont icon-shouye">购物车</text>
			</view>
			<!-- 购物车列表 -->
			<view>
				<hy-goods v-for="(item,index) in cart" :key="index" :goods='item' :showCheck='true' :showNum='true'
					:allowLongTap='true' @changeNum='changeNum' @changChacked="changChacked"></hy-goods>
			</view>
			<hy-settle :buttonText="'结算'" :showAllCheck='true' :cartData='cart'
				@changeAllCheck='changeAllCheck'></hy-settle>

		</view>
		<view class="cart-default" v-else>
			<view class="default-image">
				<image src="../../static/cart_empty.png">
			</view>
			<view class="default-text">
				购物车空空如也~

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cart: [],
				address: {}
			}
		},
		onShow() {
			//从缓存获取购物车数据
			this.cart = uni.getStorageSync('cart') || [];

			this.address = uni.getStorageSync('address') || {};
		},
		methods: {
			changeAllCheck(e) {
				this.cart.forEach(v => v.checked = e);

			},
			//修改购物车的选中状态
			changChacked(e) {
				let index = this.cart.findIndex(v => v.goods_id == e.goods_id);
				this.cart[index].checked = e.checked;
				uni.setStorageSync('cart', this.cart);
			},
			//修改购物车相应产品的数量
			changeNum(e) {
				let index = this.cart.findIndex(v => v.goods_id == e.goods_id);
				if (e.cartNum === 0) {
					this.cart.splice(index, 1);
				} else {
					this.cart[index].cartNum = e.cartNum;
				}
				// console.log(this.cart);
				//更改缓存中的购物车
				uni.setStorageSync('cart', this.cart);
			},

		}
	}
</script>

<style lang="scss">
	.cart-title {
		padding: 15rpx;
		padding-left: 30rpx;
		border-bottom: var(--separateLine);

		text {
			margin-right: 10rpx;
		}
	}

	.cart-default {
		image {
			width: 300rpx;
			height: 270rpx;
			padding-left: 220rpx;
			padding-top: 150px;

		}

		.default-text {
			font-size: 16px;
			text-align: center;
		}
	}
</style>

支付页面效果图

业务逻辑

•  获取微信收货地址
• 渲染购物车中要结算的商品
• 实现支付

1. 获取微信的登录信息
2. 获取自己后台返回的支付相关参数
3. 调用微信接口实现 支付
4. 支付成功创建订单
5. 跳转到订单页面

代码如下:

<template>
	<view>
		<hy-address :address="address"></hy-address>
		<view class="cart-title">
			<text class="iconfont icon-shouye">购物车</text>
		</view>
		<view>
			<hy-goods v-for="(item,index) in cart" :key='index' :goods='item' :showNumOnly='true'
				@changeNum='changeNum'></hy-goods>
		</view>
		<hy-settle :buttonText="'支付'" :cartData='cart' :showAllCheck='false'></hy-settle>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cart: [],
				address: {},

			};
		},
		onShow() {
			//从缓存获取地址
			this.address = uni.getStorageSync('address') || {};
			//从缓存获取立即购买的数据
			const buy = uni.getStorageSync('buy') || {};
			if (buy.goods_id) { 		//从立即购买跳转过来的
				this.cart = [];
				this.cart.push(buy);
				uni.removeStorageSync('buy');
			} else {
				this.cart = (uni.getStorageSync('cart')).filter(v => v.checked);
				this.address = uni.getStorageSync('address') || {};
			}

		},
		methods: {
			changeNum(e) {
				let index = this.cart.findIndex(v => v.goods_id == e.goods_id);
				if (e.cartNum === 0) {
					this.cart.splice(index, 1);
				} else {
					this.cart[index].cartNum = e.cartNum;
				}
				// console.log(this.cart);
				//更改缓存中的购物车
				uni.setStorageSync('cart', this.cart);
			}

		}
	}
</script>

<style lang="scss">
	.cart-title {
		padding: 15rpx;
		padding-left: 30rpx;
		border-bottom: var(--separateLine);

		text {
			margin-right: 10rpx;
		}
	}
</style>

个人中心页面效果图

• 获取登录信息
• 从本地存储中获取收藏数据，加载收藏信息
• 查询订单状态

代码如下:

<template>
	<view v-if="token">
		<view class="top">
			<view class="user-info">
				<image class="user-image" src="../../static/tabBar1/my-active.png" mode="widthFix"></image>
				<view class="user-name">微信用户</view>
			</view>
			<view class="bottom">
				<!-- 1.我的足迹 -->
				<view class="feet">
					<view class="feet-box" v-for="(item,index) in myFeet" :key="item.id">
						<view class="num">{{item.num}}</view>
						<view class="text">{{item.text}}</view>
					</view>
				</view>
				<view class="order">
					<!-- 2.我的订单 -->
					<view class="dida">我的订单</view>
					<!-- 3.订单详情 -->
					<view class="order-box" @click="gotoOrder(0)">
						<view class="iconfont icon-dingdan-heji"></view>
						<view class="text">全部订单</view>
					</view>
					<view class="order-box" @click="gotoOrder(1)">
						<view class="iconfont icon-fukuantongzhi"></view>
						<view class="text">待付款</view>
					</view>
					<view class="order-box" @click="gotoOrder(2)">
						<view class="iconfont icon-daishouhuo"></view>
						<view class="text">待收货</view>
					</view>
					<view class="order-box">
						<view class="iconfont icon-fukuantongzhi"></view>
						<view class="text">退款/退货</view>
					</view>
				</view>
				<!-- 4.收货地址 -->
				<view class="">
					<view class="address">
						<view class="text">收货地址管理</view>
						<view class="more">></view>
					</view>
					<view class="contact">
						<view class="text">联系客服</view>
						<view class="more">400-618-4000</view>
					</view>
					<view class="feetback">
						<view class="text">意见反馈</view>
						<view class="more">></view>
					</view>
					<view class="about">
						<view class="text">关于我们</view>
						<view class="more">></view>
					</view>
					<view class="exit" @tap="logout">
						<view class="text">退出登录</view>
						<view class="more">></view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				token: '',
				userInfo: {},
				myFeet: [{
						id: 0,
						num: 0,
						text: '收藏的店铺'
					},
					{
						id: 1,
						num: 2,
						text: '收藏的商品'
					},
					{
						id: 2,
						num: 0,
						text: '关注的商品'
					},
					{
						id: 3,
						num: 0,
						text: '我的足迹'
					},
				]
			}
		},
		onShow() {
			this.userInfo = uni.getStorageSync('userinfo');
			this.token = uni.getStorageSync('token');
			if (!this.token) {
				uni.setStorageSync('page', 'user')
				uni.reLaunch({
					url: '../../subpkg2/login/login'
				});
			}
		},
		methods: {
			//退出登录
			async logout() {
				const [err, succ] = await uni.showModal({
					title: '提示',
					content: '确定退出登录吗？'
				});
				// console.log(res);
				//点击确认后，清除缓存的token、address、userinfo
				if (succ && succ.confirm) {
					uni.removeStorageSync('token');
					//uni.removeStorageSync('address');
					uni.removeStorageSync('userinfo');
					uni.reLaunch({
						url: '../../subpkg2/login/login'
					})
				}
			},
			//跳转到订单查询页
			gotoOrder(num) {
				uni.navigateTo({
					url: '../../subpkg2/order/order?num=' + num
				})
			}
		}
	}
</script>

<style lang="scss">
	.top {
		width: 750rpx;

		.user-info {
			width: 750rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;
			padding-top: 30rpx;
			background-color: var(--themeColor);

			.user-image {
				width: 150rpx;
				height: 150rpx;
				border-radius: 100%;
				background-color: #fff;
			}

			.user-name {
				width: 750rpx;
				margin-top: 30rpx;
				padding-bottom: 30rpx;
				text-align: center;
				color: #fff;
			}
		}

		.bottom {
			width: 750rpx;
			height: 900rpx;
			background-color: #e8e8e8;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;

			.feet {
				width: 700rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #fff;

				.feet-box {
					flex: 1;
					text-align: center;

					.num {
						color: #ff0000;
					}

					.text {
						color: #686868;
					}
				}
			}

			.order {
				width: 700rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				align-items: center;
				background-color: #fff;

				.dida {
					width: 700rpx;
					height: 90rpx;
					color: #686868;
					margin-top: 15rpx;
					padding-top: 10rpx;
					border-bottom: 2px solid #686868;
					background-color: #fff;
				}

				.order-box {
					flex: 1;
					padding: 20rpx 0;
					color: #686868;

					text-align: center;
				}
			}

			.address {
				width: 700rpx;
				height: 90rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				background-color: #fff;
				margin-top: 15rpx;
			}

			.contact {
				width: 700rpx;
				height: 90rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				background-color: #fff;
				border-bottom: 2px solid #686868;
				margin-top: 15rpx;
			}

			.feetback {
				width: 700rpx;
				height: 90rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 2px solid #686868;
				background-color: #fff;
			}

			.about {
				width: 700rpx;
				height: 90rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				background-color: #fff;
			}

			.exit {
				width: 700rpx;
				height: 90rpx;
				display: flex;
				margin-top: 15rpx;
				justify-content: space-between;
				align-items: center;
				color: #ff0000;
				background-color: #fff;
			}

		}

	}
</style>

三.运行到微信小程序 

下载微信开发者工具

下载地址：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201714

右键打开微信开发者工具属性查看路径

 在HBuilder X的设置中配置好微信开发者工具的路径

 运行到微信小程序需要一个APPID

每个微信小程序都会有有一个原始的APPID，它就跟人的身份证号一样，这个是小程序的身份证明。是唯一的，不会跟其他的程序重复，我们很多时候需要用到小程序APPID，

获取微信小程序appid的地址：https://mp.weixin.qq.com/

没有账号需要先进行注册，如果有账号直接进行登录

 获取ID

 在目录下的manifest.json文件中填入ID

最后在微信小程序中打开服务端口号否则就会报错  

全部设置完成之后

在HBuilderX中进行运行至微信小程序

运行成功效果图:

总结

对Vue.js框架的深入理解：学习UNI-APP框架需要对Vue.js框架有一定的了解和掌握，因为UNI-APP本质上是基于Vue.js框架构建的跨端应用开发框架。因此，我在学习UNI-APP的同时也加深了对Vue.js框架的理解和掌握，包括Vue组件、生命周期、指令、过滤器等内容。多端通用开发的优势和实现方法：在使用UNI-APP开发应用时，我发现它具有多端通用开发的优势，可以快速构建同时在多个平台运行的应用，如微信小程序、H5、安卓、iOS等。而UNI-APP实现多端通用开发主要依赖于Vue.js框架、uni-app开发工具以及各个端的小程序API和插件等技术。对于跨平台开发来说，节约成本是最主要的目的，相比较其他框架，觉得uniapp上手的成本是比较低的。文章来源地址https://www.toymoban.com/news/detail-732074.html

到了这里，关于uniapp微信小程序实现《优购商城项目》的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！