查看: 3465|回复: 16

仿美团外卖小程序源码,可以搭建本地官网

[复制链接]
发表于 2019-9-17 09:13:50 | 显示全部楼层 |阅读模式
5.gif

开发工具


微信web开发者工具: 官网就可以下载,相信大家早就安装好了吧。

小程序 API: 官网提供的文档,不懂得地方多看两遍基本上就可以解决了。

Easy Mock: 一个能够提供虚拟数据接口的网站,在前端独自开发的情况下,实在是再好不过的工具了。

功能

已经实现的功能:

  • 主界面
  • 订单界面
  • 用户界面
  • 点菜界面
  • 定位界面


未实现的功能:

外卖红包领取,数都数不清,毕竟大企业的产品,不是说模仿就模仿的,所以只实现了一些主要的功能,和一些能力之内的功能…

项目启动

创建界面
  1. “pages”:[
  2. “pages/home/home”,
  3. “pages/menu/menu”,
  4. “pages/location/location”,
  5. “pages/my/my”,
  6. “pages/order/order”
  7. ],
复制代码
只要编辑app.js中的pages属性,就会在项目目录下的pages文件夹里自动生成一个文件夹,里面包扩了.wxml 、 .wxss 、 .json 、 .js这样四个文件。wxml就是界面结构文件, .wxss就是样式文件, .js是用来存放js代码并实现界面逻辑的地方,至于 .json就是用来配置页面属性的地方,如:修改标题栏的颜色,和文字。

配置标题栏的样式

  1. “pages”:[

  2. “pages/home/home”,

  3. “pages/menu/menu”,

  4. “pages/location/location”,

  5. “pages/my/my”,

  6. “pages/order/order”

  7. ],
复制代码

同样是在app.json中配置,其他页面的标题栏都以此为例。

添加底栏

  1. “tabBar”: {
  2. “color”: “#272636”,
  3. “selectedColor”: “#FFD161”,
  4. “backgroundColor”: “#fff”,
  5. “borderStyle”: “#a8a8a8”,
  6. “list”: [
  7. {
  8. “pagePath”: “pages/home/home”,
  9. “iconPath”: “pages/images/home.png”,
  10. “selectedIconPath”: “pages/images/home-selected.png”,
  11. “color”:”white”,
  12. “text”: “首页”
  13. },
  14. {
  15. “pagePath”: “pages/order/order”,
  16. “iconPath”: “pages/images/order.png”,
  17. “selectedIconPath”: “pages/images/order-selected.png”,
  18. “text”: “订单”
  19. },
  20. {
  21. “pagePath”: “pages/my/my”,
  22. “iconPath”: “pages/images/my.png”,
  23. “selectedIconPath”: “pages/images/my-selected.png”,
  24. “text”: “我的”
  25. }
  26. ]
  27. }
复制代码

在app.json中编写以上代码,这是小程序自带的功能,只需要照搬照抄就可以了,极其方便,效果如下:

仿美团外卖小程序源码,可以搭建本地官网

仿美团外卖小程序源码,可以搭建本地官网



数据请求

  1. /**
  2. * 生命周期函数–监听页面显示
  3. */
  4. onShow: function () {
  5. var that = this;
  6. wx.request({
  7. url: “https://www.easy-mock.com/mock/596257bc9adc231f357c4664/restaurant/info”,//easy-mock生成的虚拟数据接口链接
  8. method: “GET”,
  9. success: function (res) {//成功得到数据,对数据进行处理
  10. that.setData({//将数据发送到data中

  11. restaurant: res.data.data.restaurant,

  12. location: wx.getStorageSync(‘location’)

  13. })

  14. }

  15. });

  16. },
复制代码

data是每个页面.js文件中都存在的一个键,用来储存本页面需要用到的数据。具体使用,可在wxml文件中用{{‘data中的键名’}}的形式调用数据。

虚拟数据大致如下:

  1. {
  2. “success”: true,
  3. “data”: {
  4. “restaurant”: [{
  5. “name”: “御膳房”,
  6. “src”: “http://i2.kiimg.com/601998/a955867016875a41.jpg”,
  7. “star”: 4.5,
  8. “sales”: 641,
  9. “initial_price”: 0,
  10. “distribution_price”: 0,
  11. “distance”: “156m”,
  12. “time”: 33
  13. }, {
  14. “name”: “韩式炸鸡啤酒屋”,
  15. “star”: 4.5,
  16. “sales”: 731,
  17. “src”: “http://i4.piimg.com/601998/9ce47f2f19d7717d.jpg”,
  18. “initial_price”: 15,
  19. “distribution_price”: 0,
  20. “distance”: “1.3km”,
  21. “time”: 52
  22. },{
  23. //略去
  24. },{
  25. //略去
  26. },{
  27. //…
  28. }]
  29. }
  30. }
复制代码

主界面

效果图:

8f.gif

swiper控件应用

首先是两页标签的滑动切换,这里使用的是swiper,它是一款小程序自带的滑块组件,使用掌握起来非常简单,具体代码如下:

  1. <swiper class=”categoryList” indicator-dots=”true”
  2. indicator-color=”rgba(228,228,228,1)”
  3. indicator-active-color=”#FECA49″>
  4. <block wx:for=”{{categoryList}}” wx:key=””>
  5. <swiper-item>
  6. <block wx:for=”{{item}}” wx:key=””>
  7. <view class=”category-info”>
  8. <image src=”{{item.src}}”
  9. class=”category-image”></image>
  10. <view class=”category-text”>{{item.name}}</view>
  11. </view>
  12. </block>
  13. </swiper-item>
  14. </block>
  15. </swiper>
复制代码

swiper标签就是滑块组件的主体,表示可以滑动的区域,其中indicator-dots属性是设置设置点是否显示。接下来swiper-item标签在swiper之中表示的是每一个用来作为滑动的页面。这里用包裹着swiper-item表示的是使用categoryList对象数组中数据来循环渲染swiper-item,swiper-item的数量取决于categoryList中有多少组数据。之后在swiper-item中的block标签表示的是在一个页面中用categoryList.item中的数据循环渲染多个类似的标签,这些标签就是效果图中的类别项,总共两页,每页八个。这就是swiper和循环渲染的一些基本用法。

弹出层的实现

  1. <view class=”mask”
  2. hidden=”{{mask2Hidden}}” bindtap=”mask2Cancel”>
  3. <template is=”sort_list” data=”{{selected,sortSelected}}”/>
  4. <scroll-view class=”filterList” scroll-y=”true” >
  5. <view class=”filterList-characteristic-title”>商家特色</view>
  6. <view class=”filterList-characteristic-items”>
  7. <block wx:for=”{{characteristicList}}” wx:key=””>
  8. <view class=”filterList-characteristic-item {{characteristicSelected[index]==true?’characteristic-selected’:”}}”
  9. catchtap=”characteristicSelected” data-index=”{{index}}”>{{item.text}}</view>
  10. </block>
  11. </view>
  12. <view class=”filterList-discount-title”>优惠活动(单选)</view>
  13. <view class=”filterList-discount-items”>
  14. <block wx:for=”{{discountList}}” wx:key=””>
  15. <view class=”filterList-discount-item {{discountSelected==index?’discount-selected’:”}}”
  16. catchtap=”discountSelected” data-index=”{{index}}”>
  17. <text class=”filterList-discount-item-icon”
  18. style=”background:{{item.iconColor}}”>{{item.icon}}</text>
  19. {{item.text}}</view>
  20. </block>
  21. </view>
  22. </scroll-view>
  23. <view class=”filterList-footer”>
  24. <view class=”filterList-footer-delect”
  25. catchtap=”clearSelectedNumb”>清除筛选</view>
  26. <view class=”filterList-footer-finish” bindtap=”finish”>完成
  27. <view class=”filterList-footer-finish-number” hidden=”{{selectedNumb==0}}”>{{selectedNumb}}
  28. </view>
  29. </view>
  30. </view>
  31. </view>
复制代码

最外层的mask类的view就是一个遮罩层,用来覆盖之前的界面形成遮罩的效果,并在上面显示新的界面也就是弹出层。以上的代码就是效果图中点击筛选按钮所呈现出来的内容了。其中bindtap属性就是点击事件的绑定了,具体的点击事件需要在.js文件中设置。值得一提的是,bindtap事件是会把当前标签受到的点击冒泡给它的父容器,这就相当与同时点击了他的父容器,如果想阻止冒泡的话就需要使用catchtap。

源码下载:

游客,如果您要下载源码或者查看隐藏内容请回复

回复

使用道具 举报

发表于 2020-3-3 10:55:01 | 显示全部楼层
回复 支持 反对

使用道具 举报

发表于 2020-5-3 15:25:18 | 显示全部楼层
lalalalalalal
回复 支持 反对

使用道具 举报

发表于 2020-5-3 15:25:35 | 显示全部楼层
莎啦啦啦啦
回复 支持 反对

使用道具 举报

发表于 2020-5-26 20:51:20 | 显示全部楼层
学习一下感谢大佬分享      
回复 支持 反对

使用道具 举报

发表于 2020-6-3 08:41:14 | 显示全部楼层
发深V发是dfvdf
回复 支持 反对

使用道具 举报

发表于 2020-6-4 08:51:04 | 显示全部楼层
看起来好像不错,特来学校啦
回复 支持 反对

使用道具 举报

发表于 2020-6-12 14:57:41 | 显示全部楼层
好东西 我需要
回复 支持 反对

使用道具 举报

发表于 2020-8-7 17:26:46 | 显示全部楼层
等待等待等待等待等待等待等待
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

关闭

网站推荐上一条 /1 下一条



快速回复 返回顶部 返回列表