目錄

一.下載HBuliderX與安裝

創(chuàng)建項目

二.搭建項目

目錄結構

頁面名稱

?首頁效果圖

?業(yè)務邏輯

代碼如下:

?分類頁面效果圖

業(yè)務邏輯

代碼如下:

商品列表效果圖?

業(yè)務邏輯

代碼如下:

商品詳情頁效果圖

業(yè)務邏輯

代碼如下:

購物車頁面效果圖

業(yè)務邏輯

代碼如下:

支付頁面效果圖

業(yè)務邏輯

代碼如下:

個人中心頁面效果圖

代碼如下:

三.運行到微信小程序?

下載微信開發(fā)者工具

?總結

一.下載HBuliderX與安裝

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

下載完成進行解壓安裝

創(chuàng)建項目

• 點擊HbuilderX菜單欄文件>項目>新建
• 選擇uni-app,填寫項目名稱，項目創(chuàng)建的目錄

安裝所需要的插件

項目目錄和文件作用

1.pages.json 文件用來對 uni-app 進行全局配置，決定頁面文件的路徑、窗口樣式、原生的導航欄、底部的原生tabbar 等

2.manifest.json 文件是應用的配置文件，用于指定應用的名稱、圖標、權限等。

3.App.vue是我們的跟組件，所有頁面都是在App.vue下進行切換的，是頁面入口文件，可以調(diào)用應用的生命周期函數(shù)。

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

5.uni.scss文件的用途是為了方便整體控制應用的風格。比如按鈕顏色、邊框風格，uni.scss文件里預置了一批scss變量預置。

6.unpackage就是打包目錄，在這里有各個平臺的打包文件

7.pages所有的頁面存放目錄

8.static靜態(tài)資源目錄，例如圖片等

9.components組件存放目錄

二.搭建項目

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

目錄結構

頁面名稱

?首頁效果圖

?業(yè)務邏輯

• 使用tabbar實現(xiàn)底部導航功能
• 使用自定義組件的方式實現(xiàn) 頭部搜索框
• 加載 輪播圖 數(shù)據(jù)
• 加載 導航 數(shù)據(jù)
• 加載 樓層 數(shù)據(jù)

代碼如下:

<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>

?分類頁面效果圖

業(yè)務邏輯

• 加載分類頁面數(shù)據(jù)
• 點擊左側(cè)菜單，右側(cè)數(shù)據(jù)動態(tài)渲染

代碼如下:

<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('使用舊數(shù)據(jù)');
					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: "數(shù)據(jù)緩存失敗",
						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>

商品列表效果圖?

業(yè)務邏輯

• ?加載商品列表數(shù)據(jù)
• 啟動上拉頁面功能 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: '數(shù)據(jù)加載完畢'

			})
			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方法被調(diào)用');

				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>

商品詳情頁效果圖

業(yè)務邏輯

• 渲染商品詳情數(shù)據(jù)
• 點擊圖片，調(diào)用圖片畫廊，進行預覽
• 點擊收藏
• 聯(lián)系客服
• 分享功能
• 加入購物車

代碼如下:

<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>

購物車頁面效果圖

?

業(yè)務邏輯

• 從本地存儲獲取購物車數(shù)據(jù)，渲染購物車數(shù)據(jù)
• 添加收貨地址
• 修改商品數(shù)據(jù)
• 單選和全選功能

代碼如下:

<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() {
			//從緩存獲取購物車數(shù)據(jù)
			this.cart = uni.getStorageSync('cart') || [];

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

			},
			//修改購物車的選中狀態(tài)
			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);
			},
			//修改購物車相應產(chǎn)品的數(shù)量
			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>

支付頁面效果圖

業(yè)務邏輯

• ?獲取微信收貨地址
• 渲染購物車中要結算的商品
• 實現(xiàn)支付

1. 獲取微信的登錄信息
2. 獲取自己后臺返回的支付相關參數(shù)
3. 調(diào)用微信接口實現(xiàn) 支付
4. 支付成功創(chuàng)建訂單
5. 跳轉(zhuǎn)到訂單頁面

代碼如下:

<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') || {};
			//從緩存獲取立即購買的數(shù)據(jù)
			const buy = uni.getStorageSync('buy') || {};
			if (buy.goods_id) { 		//從立即購買跳轉(zhuǎn)過來的
				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>

個人中心頁面效果圖

• 獲取登錄信息
• 從本地存儲中獲取收藏數(shù)據(jù)，加載收藏信息
• 查詢訂單狀態(tài)

代碼如下:

<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">聯(lián)系客服</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'
					})
				}
			},
			//跳轉(zhuǎn)到訂單查詢頁
			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>

三.運行到微信小程序?

下載微信開發(fā)者工具

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

右鍵打開微信開發(fā)者工具屬性查看路徑

?在HBuilder X的設置中配置好微信開發(fā)者工具的路徑

?運行到微信小程序需要一個APPID

每個微信小程序都會有有一個原始的APPID，它就跟人的身份證號一樣，這個是小程序的身份證明。是唯一的，不會跟其他的程序重復，我們很多時候需要用到小程序APPID，

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

沒有賬號需要先進行注冊，如果有賬號直接進行登錄

?獲取ID

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

最后在微信小程序中打開服務端口號否則就會報錯??

全部設置完成之后

在HBuilderX中進行運行至微信小程序

運行成功效果圖:

總結

對Vue.js框架的深入理解：學習UNI-APP框架需要對Vue.js框架有一定的了解和掌握，因為UNI-APP本質(zhì)上是基于Vue.js框架構建的跨端應用開發(fā)框架。因此，我在學習UNI-APP的同時也加深了對Vue.js框架的理解和掌握，包括Vue組件、生命周期、指令、過濾器等內(nèi)容。多端通用開發(fā)的優(yōu)勢和實現(xiàn)方法：在使用UNI-APP開發(fā)應用時，我發(fā)現(xiàn)它具有多端通用開發(fā)的優(yōu)勢，可以快速構建同時在多個平臺運行的應用，如微信小程序、H5、安卓、iOS等。而UNI-APP實現(xiàn)多端通用開發(fā)主要依賴于Vue.js框架、uni-app開發(fā)工具以及各個端的小程序API和插件等技術。對于跨平臺開發(fā)來說，節(jié)約成本是最主要的目的，相比較其他框架，覺得uniapp上手的成本是比較低的。文章來源地址http://www.zghlxwxcb.cn/news/detail-732074.html

到了這里，關于uniapp微信小程序?qū)崿F(xiàn)《優(yōu)購商城項目》的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！