前端-uniapp-开发指南

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

测试数据

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

创建样式

.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;}

请求商家外卖数据

封装请求

父页面引入

并发请求

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

object 对象