前端-uniapp-开发指南

美团外卖微信小程序开发

• uniapp-美团外卖微信小程序开发
• P1 成果展示
• P2外卖小程序后端，学习给小程序写http接口
• P3 主界面配置
• P4 首页组件拆分
• P13 外卖列表布局

• 筛选组件
• 商家 布局
• 测试数据
• 创建样式

• 请求商家外卖数据

• 封装请求

• 并发请求

uni-app框架调用https接口

开发小程序

提高vue技术

前端技术

课程需要具备vue基础知识

uniapp-美团外卖微信小程序开发

P1 成果展示

nodejs 后台

P2外卖小程序后端，学习给小程序写http接口

P3 主界面配置

uniapp 小程序 vue

新建界面

添加配置

资源文件

底部导航栏

拾色器

P4 首页组件拆分

P13 外卖列表布局

筛选组件

• 发生事件穿透
  

商家 布局

• 引进子组件

import Take from './components/takeout.vue'
	 
	export default {
		components:{
			Take
		},

<template>
  <view>
	<block v-for="(item,index) in  shoperlist"  :key="index">
		<view class="content-view">
			<view class="content_img">
				<image :src="item.logo" mode="aspectFill"></image>
			</view>
			
			<view class="content_title">
				<text class="content_shoper">{{item.shoper}}</text>
				<view class="content_result">
					<text>月销售{{1}}</text>
					<text>距您约{{item.duration}}分钟</text>
				</view>
				<view class="content_end"> 
					<image src=""></image>
					<text>{{item.types}}</text>
				</view>
			</view>
		</view>
	
	</block>
  </view>
</template>

测试数据

• 写死数据 数组对象
  https://www.bilibili.com/video/BV1Zt4y117RR?p=13&vd_source=f21773b7086456ae21a58a6cc59023be

<script>
	export default {
		data() {
			return {
				shoperlist: [{
						'logo': 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fqny.smzdm.com%2F202205%2F23%2F628b811626a976429.jpg_d250.jpg&refer=http%3A%2F%2Fqny.smzdm.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668590466&t=06731bdad94505329d8a942c1e08e66b',
						'shoper': '啦啦啦',
						'duration': 30,
						'types': '大傻逼'
					} ]
			}
		},
  

	}
</script>

创建样式

.content-view text{display: block;}
.content-view{display: flex;
justify-content: space-between;
height: 200upx !important;
overflow: hidden;
border-bottom: 1rpx solid #E4E8EB;
padding-bottom: 5upx;
margin: 30upx 0;
color: #898989;}

.content_img{
	width: 350upx !important;
	height: 200upx !important;
}


.content_img image{
	width: 100%;
	height: 100%;
	border-radius: 10upx;
}

.content_title{
	width: 100%;
	padding-left: 10upx;
	font-size: 24upx;
}

.content_shoper{
	color: #333333;
	height: 50upx;
	font-size: 33upx;
	font-weight: bold;
	line-height: 50upx;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
}

.content_result{
	display: flex;
	justify-content: space-between;
	height: 50upx;
	line-height: 50upx;
}

.content_end{
	display: flex;
	align-items: center;
	height: 50upx;
	line-height: 50upx;
}

.content_end text {width: 130upx;}
.content_end image {width: 24upx; height: 24upx;
padding-right: 10upx;}

<style scoped>
	@import '../../../common/css/take.css'
</style>

请求商家外卖数据

封装请求

父页面引入

并发请求

同时并发请求 多个接口，同时得到 多个接口数据

object 对象