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

美团外卖微信小程序开发

  • P1 成果展示
  • P2外卖小程序后端,学习给小程序写http接口
  • P3 主界面配置
  • P4 首页组件拆分
  • P13 外卖列表布局
    • 筛选组件
    • 商家 布局
    • 测试数据
    • 创建样式
  • 请求商家外卖数据
    • 封装请求
      • 并发请求

uni-app框架调用https接口
开发小程序
提高vue技术
前端技术
课程需要具备vue基础知识

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

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/22362.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

美团 mtgsig 1.0 版本

本次逆向的是 mtgsig 1.0 版本 mtgsig 加密入口位置&#xff1a; 请求参数 signData 里是要请求接口的 url method 等&#xff0c;美团每个网站加密参数是不一样的 进入以后到这里 fj 函数执行完&#xff0c;返回 mtgsig a6 需要执行 init

最赚钱编程语言Zig登顶,开发者爱ChatGPT远超必应|Stack Overflow报告

丰色 发自 凹非寺量子位 | 公众号 QbitAI 一年一度的Stack Overflow开发者大调查又双叒叕来了&#xff01; 今年&#xff0c;一共约9万人参与问卷&#xff0c;最大的变化是加入了ChatGPT相关的内容—— 程序员是否比大家想象地更能接受AI工具呢&#xff1f; 结果显示&#xff1…

“GPT+医疗健康”:给予医疗领域新机遇

现如今&#xff0c;GPT十分火热。随着人们对健康医疗的关注越来越热切&#xff0c;GPT已逐渐成为健康医疗领域的重要角色之一。GPT可以用于许多医疗语境中&#xff0c;如医学咨询、病症诊断、健康建议、在线问诊、患者教育、健康数据跟踪等。 GPT是一种基于深度学习的自然语言处…

活动报名丨ChatDoctor:基于LLaMA在医学领域知识上微调的医学对话模型

2023年04月06日&#xff08;星期四&#xff09;11:00-12:00&#xff0c;由智源社区主办的「智源LIVE 第36期线上活动&#xff1a;ChatDoctor&#xff1a;基于LLaMA在医学领域知识上微调的医学对话模型。本期活动将在线举办&#xff0c;「阅读原文」报名即可参加。 李云响 李云响…

Excel VBA高级编程-微信群发(支持发送文件)

关注工作&#xff0c;更关注生活&#xff0c;我是小虾&#xff0c;目前专注于外贸B2B领域。喜欢用自动化工具代理日常重复性的工作&#xff0c;喜欢的可以关注我的微信公众号&#xff1a;万能的Excel 和3000小伙伴一起学习&#xff01; 我们的微信群发模板很早就发布了&…

热点解读:大模型的突现能力和ChatGPT引爆的范式转变

来源&#xff1a;机器之心 作者&#xff1a;符尧、Tushar Khot、彭昊、李如寐等 符尧&#xff08;yao.fued.ac.uk&#xff09;&#xff0c;爱丁堡大学 (University of Edinburgh) 博士生&#xff0c;本科毕业于北京大学。他与 Tushar Khot、彭昊在艾伦人工智能研究院 (Allen In…

雅思写作范文(持续更新)

文章目录 1. Writing Task 11.1. Rates of smoking in Someland1.2. number of tourists visiting a particular Caribbean island1.3. The chart shows peoples coffee and tea buying and drinking habits in five Australian cities. 1. Writing Task 1 1.1. Rates of smok…

计算雅思成绩C语言,雅思考试总成绩计算查分表

很多同学表示&#xff0c;雅思总分算起来&#xff0c;出现0.375和0.625等小数时&#xff0c;进位退位经常傻傻分不清楚&#xff0c;附上官方算分方式以及获得不同分数可能对应的各种情况&#xff0c;大家也可以根据这个算分表&#xff0c;提前“谋划”如何让自己获得合格的总分…

雅思小作文 饼图

原文改写The charts compare two countries with their units of electricity production by fuel source in 1980 and 2000.The charts compare two countries in terms of the electricity produced by different fuels in 1980 and 2000.With regard to Australia,the coal …

【1、雅思听力】何琼口语学习记录 第2节

三个数字为一个逗号&#xff08;不要忘记逗号&#xff09; 2,645,639,461 应该读为&#xff1a; two billion six hundred and forty-five million six hundred and thirty-nine thousand four hundred and sixty-one the first of the third twenty of senven&#xff1a; 1…

雅思c1语言等级,雅思分数各代表什么水平

雅思要考到6分以上成绩才算合格成绩&#xff0c;所以备考的学生必须知道&#xff0c;雅思的每高一分&#xff0c;都代表着不同的水平&#xff0c;代表不同的能力。接下来小编就给大家讲讲雅思分数各代表什么水平&#xff0c;供大家参考。 雅思9分是什么水平? 9分&#xff0c;代…

雅思备考

零、我的成绩 分享前先给大家看看我的成绩。 没错我只有7分&#xff0c;而且偏科十分严重。所以这篇分享并不能告诉你如何考取一个高分的雅思成绩&#xff0c;也不能帮你补足弱项&#xff08;毕竟我自己写作口语都没考明白&#xff09;。下面的内容分享出来只是我考雅思的过…

sci论文写法

以超表面论文为例 写论文顺序 1.画图&#xff0c;确定论文的几个插图&#xff08;先确定每个图的大体内容&#xff0c;然后一边写论文一边慢慢优化图的表达&#xff09; 2.写introduction 3.根据图写其他部分论文&#xff0c;类似于雅思小作文&#xff0c;写图 1.画图 图内容…

微软Bing的AI人工只能对话体验名额申请教程

微软Bing 免费体验名额申请教程 流程 ChatGPT这东西可太过火了。国外国内&#xff0c;圈里圈外都是人声鼎沸。微软&#xff0c;谷歌&#xff0c;百度这些大佬纷纷出手。连看个同花顺都有GPT概念了&#xff0c;搞技术&#xff0c;做生意的看来都盯上了 流程 下面就讲一下如何…

对大模型微调后竟能超越ChatGPT!只需要让模型模拟真实的人类交互!

夕小瑶科技说 原创 作者 | 小戏、Python 虽然我们都说当下大模型最引人瞩目令人浮想联翩的神奇能力在于它的推理判断能力&#xff0c;但是如果提一个问题&#xff0c;“这种通过语言、文本信息学习到的推理判断能力真的可以面对现实世界的复杂情况吗&#xff1f;”&#xff0…

必应暗藏戏精模式,拿捏名人说话语气口头禅!官方还自推三种个性供挑选

明敏 发自 凹非寺量子位 | 公众号 QbitAI 曾声称自己完美无瑕的必应&#xff0c;怎么突然180度大转弯&#xff1f; 自评&#xff1a;可真多管闲事啊……是个卑鄙的家伙。 还疯狂揭自己老底&#xff1a; 它还偷看对话、夹带广告&#xff0c;它不是我们的朋友&#xff01; 仔细一…

Python+ChatGPT制作了一个AI百宝箱,太实用了!!

ChatGPT最近在互联网掀起了一阵热潮&#xff0c;其高度智能化的功能能够给我们现实生活带来诸多的便利&#xff0c;可以帮助你写文章、写报告、写周报、做表格、做策划甚至还会写代码。只要与文字相关的工作&#xff0c;它几乎都能给出一份满意的答卷。 小编趁着有空上去玩了一…

独家 | ChatGPT工作原理:机器人背后的模型

作者&#xff1a;Molly Ruby 翻译&#xff1a;张睿毅 校对&#xff1a;闫晓雨本文约3000字&#xff0c;建议阅读5分钟简要介绍让你耳朵听到起茧的聊天机器人背后的直觉和方法论。 这篇对赋能ChatGPT的机器学习模型的简要介绍&#xff0c;将从大型语言模型(LLM)开始&#xff0c;…

chatgpt赋能python:Python如何更换版本

Python如何更换版本 介绍 Python是一种广为使用的编程语言&#xff0c;它经常被用于开发各种软件、网站和应用程序。由于不同版本的Python可能会导致代码不兼容&#xff0c;因此在开发过程中更换Python版本是很常见的需求。本文将介绍如何更换Python版本。 检查当前版本 在…