2025校园二手商城小程序，手把手带你开发一款仿闲鱼旧物跳蚤市场小程序，论 ...

从本日开始带领大家实现一款云开发版的校园二手商城小程序
技术选型

1，前端

• 小程序原生框架
  
• css
  
• JavaScript
  

2，管理背景

• 云开发Cms内容管理系统
  
• web网页
  
• 数据模型
  

3，数据背景

• 小程序云开发
  
• 云函数
  
• 云开发数据库（基于MongoDB）
  
• 云存储
  

云开发数据库是一个既可以在小程序端操纵，也可以在云函数中操纵的json范例的非关系型数据库。（基于MongoDB）
云开发相对于传统服务器的上风如下表

详细的云开发可以去参考我的另外一篇文章：
https://xiaoshitou.blog.csdn.net/article/details/112391688
结果预览

1，小程序端

1-1，首页

首页有以下几个功能点

• 1，顶部轮播图
  
• 2，商品搜索
  
• 3，二手商城入口
  
• 4，新品推荐入口
  
• 5，客服
  
• 6，上门回收商户入口
  
• 7，热门商品推荐
  
  
  
  

1-2，发布二手商品页

这里可以上传二手商品图片，选择商品范例，选择商品所属的学校，输入商品信息，这里设置最多可以上传6张图片。

可以填写商品信息

1-3，二手商城页

• 商品属于那个学校大概商圈
  
• 商品分类
  
• 商品列表
  
• 购买数量
  
• 商品图片，名称，代价，剩余数量
  
• 底部购物车
  
  
  
  

1-4，购物车弹窗

起首列表页可以直接添加商品到购物车

购物车弹起后可以做如下操纵

• 1，增删单个商品
  
• 2，清空购物车
  
• 3，删除商品
  

这些操纵都和商品列表是联动的，也就是商品列表和购物车里增删个数，都是可以同步的。我会在项目预览章节的视频里做具体演示。
1-5，搜索功能

我们这里搜索有两个触发方式

• 1，直接点击搜索图标
  
• 2，点击键盘上的搜索键
  
  
  
  

1-6，搜索结果，支持模糊查询

如我这里只搜‘小’，那么商品中全部包含小 的都可以搜索到

1-7，新品推荐列表页

会把最新发布的商品表现出来

1-8，商品详情页

商品详情页有顶部图片轮播，商品信息，添加购物车，商品形貌，用户评价，底部购物车。

可以查看同一个卖家发布的其他商品

用户评价和评分，可以看出一个用户打了3分，一个打了5分，综合评分就是4分。

同样商品页添加商品也有一个和购物车联动的功能。

1-9，下单页

下单页就是确认订单后举行下单付出的。有以下功能

• 1，购物明细
  
• 2，代价盘算
  
• 3，备注
  
• 4，收货地址
  
• 5，取货范例(上门自提和送货上门)
  
  
  
  如果选择送货上门，选择好地址以后如下
  
  
  
  

1-10，收货地址管理页

我们这里用的是自带的地址管理，所以如果想查看必须用手机去扫码预览码，然后在手机上体验。
1-10-1，地址列表

可以选择默认地址，编辑地址，删除地址，复制地址。

1-10-2，添加和修改地址

1-10-3，访问通讯录

我们填写接洽方式的时间，可以直接从通讯录里读取。

1-10-4，舆图上选择地址

可以直接从舆图上选择收货地址。

1-11，付出页

我们目前学习阶段，所以学习模拟付出书的就可以了

• 1，模拟付出
  适合前期学习，结业计划等演示类的场景。
  
• 2，真实付出
  适合商用，但是利用付出必须要有业务执照，所从前期如果只是学习的话，建议利用模拟付出。所以我们的源码目前提供模拟付出书本，如果需要商业利用请接洽石头哥。
  

模拟付出

真实付出(真实付出请接洽石头哥开发)

1-12，我的订单页

我的订单页分以下几个状态

• 1，新下单待收货
  
• 2，已收货待评价
  
• 3，订单完成
  
• 4，订单取消
  
• 5，可以跳转商品详情页
  
  
  
  可以看出我们既有确认收货，也有取消订单的功能。上门自取和送货上门的订单表现如下。
  
  
  
  

1-13，提交评论页

我们可以对商品举行评论。可以对商品和卖家服务举行打分

在已完成订单里可以查看评价。
1-14，评价列表页

可以查看全部评价，评价里还有自己的评分，并且可以从评价列表进入具体的商品详情页。

可以从评价列表里查看商品详情页，也可以看到客户具体的评分。

1-15，个人中央

个人中央分登录和未登录两种状态
未登录

已登录

登录成功后，也可以点击退出登录按钮来退出。
1-16，登陆注册和修改头像

我们登陆之前需要先注册

注册完成以后就可以去登陆了

修改姓名和头像页

1-17，回收商列表页(盈利变现)

我们可以通过这个回收商列表来展示回收商信息，进而收取回收商的广告费，也算一种盈利模式。后期用户量大了，还可以展示别的广告信息来收广告费，比如驾校啊，培训机构啊。

这里可以直接调起电话举行拨打，也可以直接复制接洽方式。
1-18，在线客服

客户直接在小程序里发消息给客服

客服可以在网页端，大概小程序端管理消息

网页端客服

小程序端客服

1-19，意见反馈

客户可以直接在小程序端提建议，建议里可以添加图片

管理员可以在小程序背景，查看客户的反馈

1-20，论坛功能

1-20-1，论坛列表

我们新加了一个论坛功能，可以在论坛里讨论，发布问答，晒商品。。。

1-20-2，论坛详情和回答

可以点击图片举行大图预览

1-20-3，发布问题

2，商家端

2-1，管理我发布的商品

可以删除已发布的商品，查看已发布的商品。

2-2，待发货的订单

我发布的商品，有效户购买后，可以查对待发货的订单列表，送达后可以点击已送达。

2-3，商品详情页查看关联商品

在卖家发布的商品详情页可以查看该卖家的其他商品。

2-4，瀑布流表现其他商品

用瀑布流的方式其他全部商品

3，数据库

数据库我们这里用云开发自带的云数据库

4，cms网页管理背景

我们这里的可视化网页背景利用的时云开发自带的cms(内容管理)，我们可以对数据举行增编削查操纵，也可以批量删除筛选数据。

我们可以在这里

• 1，添加轮播图，删除轮播图，修改轮播图
  
• 2，管理商品，上下架商品
  
• 3，管理订单
  
• 4，查看评价
  
• 5，添加广告商
  
• 6，管理用户表
  
• 7，设置商品是否上首页推荐位
  

还有更多的功能，我会在视频课里给大家用视频来演示，这样更直观。
5，批量导入导出数据到excel表

我们可以在cms内容管理页面轻松实现数据的导入导出。这里可以导入excel数据。

也可以导出数据到excel表格。

一，源码导入和云开发的初始化

我这里先教大家怎样导入源码和运行项目，然后在背面的章节里再慢慢的手把手教大家开发这个程序。我源码会在配套资料里给到付费用户，年卡用户也可以获取到

1-1，源码的下载

进入网盘后，点击进入源码目录，下载最新版的源码即可。

1-2，源码的导入

导入源码的时间肯定要把appid换成你自己的。appid需要注册小程序才有的，所以学习这门课之前建议你先去看下我云开发底子课：《零底子人入门小程序云开发》

appid获取的位置如下图。

有些同砚导入源码时会多一层，我会在视频里教大家怎样制止这样的问题。
1-3，云开发的初始化

初始化云开发之前，必须先开通云开发。
1-3-1,初始化云开发环境id

点击云开发，进入云开发控制台。如果没有这个图标，说明你上面导入源码时用的不是自己的appid。所以肯定要用自己的appid

获取环境id

把环境id复制到app.js里，把下面部分替换成你自己的环境id

1-3-2,云函数选择环境

这里要注意，选择的环境，必须和你app.js里填入的环境id保持同等。
有的同砚第一次运行的时间选择云开发环境为空。这个时间记得多关闭重启反复开发者工具即可。

1-4，云函数的摆设

cloud目录下的云函数都要摆设一下

肯定要记得cloud目录下的全部云函数都必须要摆设一下。
二，开通Cms可视化网页管理背景

由于小程序官方cms老是改版，所以cms的开通和管理，我放到了摆设文档里，这样官方有任何更新，我都可以实时的发布到摆设文档里给到大家。

三，认识项目目录

起首来给大家说下pages里的每个页面

我们在新版本里新加了以下几个页面，石头哥的课程会不定期的更新的。

cloud云函数如下

我会在视频里把每个页面的代码快速大致的给大家讲解下。这节可以作为选看，背面会手把手的教大家写一款属于自己的校园二手商城小程序。
五，新建一个项目

本日我们就来正式的开始手把手的开发了。背面的每一节都很告急，希望大家好好听。
起首是创建新项目，这里肯定要记得用自己的appid,所以你要提前往注册一个属于自己的小程序，小程序的注册我小程序底子课里有讲过。
《10小时零底子入门小程序开发》
5-1，记得注册小程序

我们在创建项目之前，需要用到appid,所以肯定要用自己的邮箱去注册一个正式的小程序，不要注册测试号。点下图所示的注册即可。

注册好以后，记得去复制自己的appid,背面会用到

5-2，新建项目

我们正常新建项目标流程是在桌面创建一个空白文件夹，然后引入这个文件夹，给项目起名字，然后粘贴自己的appid即可。

但是小程序开发者工具更新的比较快，我现在用的这个版本必须要选择模板，但是我们新建项目肯定是想让项目尽量简单，没有多余的文件。我们可以在创建项目时选择不利用模板。

选择后就会如下图所示

创建好以后的项目如下

有的同砚和石头哥的版本不一样，没有不利用模板这个选项。所以我这里给大家的另外一个方式就是，导入一个空白目录。
5-3，导入空白目录

如果你上面的一步成功的创建项目了，这一步可以忽略。
我在配套资料里有给大家预备好一个空白目录。

把这个空白目录下载到桌面解压好。

解压好以后，肯定要点开查抄下目录层级。

所以我们导入的时间肯定要注意，如果出现上层左侧的那个有两层目录，就要再往里导入一层了。

我在视频列也会给大家具体演示一下，提醒大家注意的。所以肯定要条记联合着视频一起学。
六，创建页面和tabbar

6-1,创建image图片目录

在项目里新建一个image文件夹

然后把网盘里资源里的项目图标，都放到这个image文件里，背面会用到。
6-2，在app.json里注册所需页面

我会在视频里教大家把我们所需要的页面都先创建好，为背面的开发做预备。
6-3，创建tabbar

我们这里要想实现下面五个导航栏，就要借助tabbar。同样tabbar也是在app.json里设置的。

在app.json里设置tabbar

由于这段设置写一万遍也是固定的，所以我把代码贴出来，大家用的时间来条记里复制即可。

1.   "tabBar": {
2.     "color": "#515151",
3.     "selectedColor": "#2E8B57",
4.     "borderStyle": "white",
5.     "list": [{
6.         "selectedIconPath": "image/tab1ok.png",
7.         "iconPath": "image/tab1-no.png",
8.         "pagePath": "pages/home/home",
9.         "text": "首页"
10.       },
11.       {
12.         "selectedIconPath": "image/tab2ok.png",
13.         "iconPath": "image/tab2-no.png",
14.         "pagePath": "pages/mall/mall",
15.         "text": "二手商城"
16.       },
17.       {
18.         "selectedIconPath": "image/tab3ok.png",
19.         "iconPath": "image/tab3-no.png",
20.         "pagePath": "pages/fabu/fabu",
21.         "text": "发布"
22.       }, {
23.         "selectedIconPath": "image/tab4ok.png",
24.         "iconPath": "image/tab4-no.png",
25.         "pagePath": "pages/forum/forum",
26.         "text": "问大家"
27.       },
28.       {
29.         "selectedIconPath": "image/tab5ok.png",
30.         "iconPath": "image/tab5-no.png",
31.         "pagePath": "pages/me/me",
32.         "text": "我的"
33.       }
34.     ]
35.   },

复制代码

七，首页轮播图的开发

7-1，要实现的结果图

本节知识点

• swiper组件
  
• swiper-item组件
  
• image组件
  
• wx:for列表循环
  
• 云数据库请求数据
  
• cms背景操纵
  
• 轮播图的增编削查
  

这些知识点在底子课里都有讲解，所以这里不会讲太细，视频里会带大家快速的实现代码的。
7-2，对应文档

• swiper组件文档
  https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
  
• swiper-item组件
  https://developers.weixin.qq.com/miniprogram/dev/component/swiper-item.html
  
• image组件
  https://developers.weixin.qq.com/miniprogram/dev/component/image.html
  

八，二手回收商列表

8-1，列表页面的编写

我这里把wxml和css贴出来给到大家，实在如果你有好勤学习石头哥的底子课程的话，这一节是很简单的。
wxml页面布局

wxss样式

我会在讲解视频里手把手的带着大家写一遍的。所以要认真看视频
8-2，拨打电话和复制文本

拨打电话和复制文本，我们都是在js里实现的。

这两个功能都是官方提供的。我把js的完整代码贴出来给到大家。

1. Page({
2.   onLoad() {
3.     wx.cloud.database().collection('huishou').get()
4.       .then(res => {
5.         console.log('回收商数据', res)
6.         this.setData({
7.           list: res.data
8.         })
9.       }).catch(res => {
10.         console.log('回收商数据失败', res)
11.       })
12.   },
13.   //拨打
14.   goPone(e) {
15.     console.log(e.currentTarget.dataset.phone)
16.     wx.makePhoneCall({
17.       phoneNumber: e.currentTarget.dataset.phone
18.     })
19.   },
20.   //复制文本
21.   goWeiXin(e) {
22.     let weixin = e.currentTarget.dataset.weixin
23.     wx.setClipboardData({
24.       data: weixin,
25.       success(res) {
26.         wx.showToast({
27.           title: '已复制',
28.         })
29.       }
30.     })
31.   }
32. })

复制代码

8-3，首页的拨打客服电话

实在我们首页的拨打客服电话也是用的同样的方法。

我们拨打电话都是用的官方的makePhoneCall方式

九，九宫格分类布局的开发

就是下面红色框里的这个区域

接下来就教大家怎样开发这个区域。
9-1，获取图片资源

起首去源码的image目录下，把我们需要的几个图片资源复制进来。当然也可以去网盘里的资料目录里拿

网盘的资源–》项目图标

就是下面这几个，如果你前面跟着石头哥视频课操纵的话，全部的图片资源应该都已经放好了。

9-2，wxml和wxss的编写

这里先把团体代码截图给到大家，如下图所示，这里不消记，我会在视频里手把手的带大家写一个出来的。
wxml布局

wxss样式

这里每个分类都有自己的bindtap点击事件，点击后会跳转到不同的页面。
9-3，在js里编写点击事件

这里定义的点击事件，就是点击后做页面跳转，用到了 wx.navigateTo这个知识点。

跳页对应的官方文档如下。

实在小程序里页面跳转有下面4种方式的。

我们这里最常用的就是 wx.navigateTo 。实在这些知识点，我在小程序底子入门课里有讲的：https://edu.csdn.net/course/detail/9531
到这里我们的九宫格分类区域就编写好了。
十，个人中央的编写

本日我们就来讲解下个人中央的编写。

10-1，顶部圆形头像和昵称

实在这里倒是挺简单，重点知识只有一个圆形图片的实现这里只需要一个image组件和一个text组件即可。通过css的border-radius就可以来设置圆形图像了，我小程序底子里也有讲过的，焦点代码如下。

10-2,用css画个箭头

很多多少同砚都会认为，我们下面这个箭头是个图片，实在不是，这个箭头是纯css代码画出来的。

代码如下：

1. .right_arrow {
2.   border: solid black;
3.   border-width: 0 3px 3px 0;
4.   padding: 3px;
5.   position: absolute;
6.   right: 15px;
7.   /* margin-left: 66%; */
8.   transform: rotate(-45deg);
9.   -webkit-transform: rotate(-45deg);
10. }

复制代码

你如果不想用这个css画的箭头，自己去网上找个箭头图片，放到这里也可以，记得图片是用image组件来表现的就可以了。
我会在视频里把css画的箭头和图片箭头都给大家演示一遍。大家自己决定用css箭头照旧图片箭头。
10-3，条目布局的实现

我们这里以我的订单条目为例

可以看到焦点代码如下

1. .my_item {  width: 100%;  display: flex;  flex-direction: row;  align-items: center;  padding: 17px;  background: white;  border-bottom: 1px solid gainsboro;}.right_arrow {
2.   border: solid black;
3.   border-width: 0 3px 3px 0;
4.   padding: 3px;
5.   position: absolute;
6.   right: 15px;
7.   /* margin-left: 66%; */
8.   transform: rotate(-45deg);
9.   -webkit-transform: rotate(-45deg);
10. }

复制代码

10-4，在线客服和意见反馈

我们实在在首页开发的时间已经讲过页面的跳转是用wx.navigateTo方法实现的，所以这里页面跳转不做讲解了，这里重点说的是下面两个条目标点击跳转。

这里的反馈建媾和在线客服都是用的小程序官方自带的页面。也就是我们点击“反馈建议”和“在线客服”跳转到的是小程序官方的页面，不需要我们开发。如下。
10-4-1，在线客服

客户直接在小程序里发消息给客服

客服可以在网页端，大概小程序端管理消息

网页端客服

小程序端客服

10-4-2，意见反馈

客户可以直接在小程序端提建议，建议里可以添加图片

管理员可以在小程序背景，查看客户的反馈

所以我们这里需要做的就是利用官方自带的功能。而这两个功能都是通过button按钮来实现的。

我们这里用到了button的open-type属性。可以看下我们代码里用的就是这个属性。

很多多少同砚问石头哥，在线客服和意见反馈是怎么实现的。实在就是上面几行代码就可以轻松的实现了，因为告急功能小程序官方已经帮我们实现了，我们只需要通过button打开对应的open-type就行了。
10-4-3，消除button的默认样式

因为button自带一些样式，我们的在线客服和意见反馈又必须通过button打开，所以我们要想办法消除button的默认样式。
重点代码如下：

我会在视频里给大家演示不消除css默认样式带来的影响，如下图所示，不去除button默认样式，会很丢脸。

10-5，未登陆和登陆后不同界面的展示

个人中央分登录和未登录两种状态
未登录

已登录

我会在视频里教大家怎样实现未登陆和登陆后不同界面的表现
10-6，退出登录的编写

退出登录实在很简单，就实现一个点击事件就可以了

然后js里具体代码就下面这几行就够了

十一，登陆和注册页的开发

11-1，登陆页的开发

我们要开发的登陆页就是上图所示的，我会在视频里手把手的带大家写代码。
焦点代码贴出来给大家

1. const app = getApp()
2. const db = wx.cloud.database()
3. Page({
4.     // 登陆功能
5.     create_login(e) {
6.         let user = e.detail.value
7.         console.log('user', user)
8.         if (!user.phone) {
9.             wx.showToast({
10.                 icon: 'none',
11.                 title: '请填写手机',
12.             })
13.         } else if (!user.password) {
14.             wx.showToast({
15.                 icon: 'none',
16.                 title: '请填写密码',
17.             })
18.         } else {
19.             db.collection('user').where({
20.                     phone: user.phone,
21.                     password: user.password
22.                 }).get()
23.                 .then(res => {
24.                     console.log('获取登录结果', res)
25.                     let users = res.data
26.                     if (users && users.length > 0) {
27.                         let user = users[0]
28.                         app._saveUserInfo(user)
29.                         wx.switchTab({
30.                             url: '/pages/me/me',
31.                         })
32.                     } else {
33.                         wx.showToast({
34.                             title: '账号密码错误',
35.                             icon: "error"
36.                         })
37.                     }
38.                 })
39.                 .catch(res => {
40.                     console.log('获取登录结果失败', res)
41.                 })
42.         }
43.     },
44.     // 去注册
45.     zhuce(res) {
46.         wx.navigateTo({
47.             url: '/pages/register/register',
48.         })
49.     },
51. })

复制代码

11-2，注册页面的开发

我们要实现登陆功能，必须先去注册用户，全部我们的注册页面也很告急，要跟着石头哥好勤学习。

注册页面比较简单，就是用户填写一些信息，然后提交到user数据表。虽然功能简单，但是里面的注意事项比较多，比如账号不能重复注册等等，所以要认真的跟着石头哥的配套视频走。
11-3，注意改表权限

我们这里用到的user表要记得改权限

如果不改权限，会影响背面的登陆功能。
十二，修改个人资料

我们这里告急供用户修改姓名和头像

页面实在很简单
12-1，页面的开发

实在wxml页面布局很简单

1. <view class="item">
2.     <view class="tip">编辑姓名</view>
3.     <input value="{{name}}" bindinput="getName" />
4. </view>
5. <view class="line"></view>
7. <view class="item" bindtap="chooseImage">
8.     <view class="tip">点击修改头像</view>
9.     <image src="{{avatarUrl}}" />
10. </view>
11. <button class="btn" bindtap="submit">提交修改</button>

复制代码

样式也不复杂

1. .item {
2.     display: flex;
3.     align-items: center;
4.     justify-content: space-between;
5.     margin: 15rpx;
6.     border-bottom: 1rpx solid gray;
7.     padding-bottom: 20rpx;
8. }
10. .tip {
11.     font-size: 44rpx;
12.     margin: 20rpx;
13.     color: red;
14. }
16. .item image {
17.     width: 200rpx;
18.     height: 200rpx;
19.     border-radius: 10rpx;
20.     margin: 10rpx 30rpx;
22. }
24. .item input {
25.     flex: 1;
26.     border: 1px solid gray;
27.     border-radius: 20rpx;
28.     padding: 5rpx 15rpx;
29. }
31. .btn {
32.     color: white;
33.     margin-top: 70rpx;
34.     background-color: #2E8B57;
35.     width: 600rpx;
36.     border-radius: 50rpx;
37.   }

复制代码

12-2，选择图片

我们要修改头像，就需要先去选择图片，然后再上传图片，我们这里上传图片用的是云开发的云存储，也就是把图片上传到云存储，然后云存储返回一个图片链接，我们用新的图片链接替换用户表里的头像字段即可
我们选择图片用的是wx.chooseMedia，至于为什么不消wx.chooseImage，因为官方又更新了

所以小程序官方知识点更新很快，我背面也会不定期的翻新课程来把最新的知识教给大家。

大家偶然间可以自己去读下官方文档，我这里直接把关键代码贴出来给到大家

1.         wx.chooseMedia({
2.             count: 1,
3.             mediaType:['image'],
4.             sizeType: ['compressed'], //可以指定是原图还是压缩图，这里用压缩
5.             sourceType: ['album', 'camera'], //从相册选择
6.             success: (res) => {
7.                 console.log("选择图片成功", res)
8.                 this.setData({
9.                     avatarUrl: res.tempFiles[0].tempFilePath
10.                 })
11.             }
12.         })

复制代码

12-3，上传图片

我们上传图片，告急用的是wx.cloud.uploadFile方法，也是官方提供的

我会在视频里教大家怎样实现这部分功能。先把焦点代码贴出来给大家

1. wx.cloud.uploadFile({
2.                 cloudPath: new Date().getTime() + suffix,
3.                 filePath: filePath, // 文件路径
4.             }).then(res => {
5.                 // get resource ID
6.                 let fileID = res.fileID
7.                 console.log("上传结果", fileID)
8.                 db.collection('user').doc(user._id).update({
9.                     data: {
10.                         name: name,
11.                         avatarUrl: fileID
12.                     }
13.                 }).then(res => {
14.                     console.log('修改姓名和头像的结果', res)
15.                     user.name = name
16.                     user.avatarUrl = fileID
17.                     app._saveUserInfo(user)
18.                     wx.showToast({
19.                         title: '修改成功',
20.                     })
21.                 })
22.             }).catch(error => {
23.                 console.log("上传失败", error)
24.             })

复制代码

12-4，逻辑页面的完整代码

麻烦的地方就在逻辑页，我先把js的完整代码贴出来给到大家

1. const app = getApp()const db = wx.cloud.database()Page({    onShow() {        var user = app.globalData.userInfo        console.log('user', user)        console.log('user.name', user.name)        if (user && user.name) {            this.setData({                user: user,                name: user.name,                avatarUrl: user.avatarUrl            })        }    },    getName(e) {        this.setData({            name: e.detail.value        })    },    //选择图片    chooseImage() {        wx.chooseMedia({            count: 1,            mediaType: ['image'],            sizeType: ['compressed'], //可以指定是原图照旧压缩图，这里用压缩            sourceType: ['album', 'camera'], //从相册选择            success: (res) => {                console.log("选择图片成功", res)                this.setData({                    avatarUrl: res.tempFiles[0].tempFilePath                })            }        })    },    //上传数据    submit(e) {        let user = this.data.user        let filePath = this.data.avatarUrl        let name = this.data.name        if (filePath == user.avatarUrl && name == user.name) {            console.log('头像姓名都没有改变')        } else if (filePath == user.avatarUrl && name != user.name) {            console.log('只改变姓名')            db.collection('user').doc(user._id).update({                data: {                    name: name                }            }).then(res => {                console.log('修改姓名的结果', res)                user.name = name                app._saveUserInfo(user)                wx.showToast({                    title: '修改成功',                })            })        } else {            let suffix = /\.[^\.]+$/.exec(filePath)[0]; // 正则表达式，获取文件扩展名            wx.cloud.uploadFile({
2.                 cloudPath: new Date().getTime() + suffix,
3.                 filePath: filePath, // 文件路径
4.             }).then(res => {
5.                 // get resource ID
6.                 let fileID = res.fileID
7.                 console.log("上传结果", fileID)
8.                 db.collection('user').doc(user._id).update({
9.                     data: {
10.                         name: name,
11.                         avatarUrl: fileID
12.                     }
13.                 }).then(res => {
14.                     console.log('修改姓名和头像的结果', res)
15.                     user.name = name
16.                     user.avatarUrl = fileID
17.                     app._saveUserInfo(user)
18.                     wx.showToast({
19.                         title: '修改成功',
20.                     })
21.                 })
22.             }).catch(error => {
23.                 console.log("上传失败", error)
24.             })
25.         }    },})

复制代码

十三，搜索页面的开发

13-1，搜索页面结果图

可以看出我们的菜品搜索页，有顶部搜索框，和底部的菜品搜索结果列表。
13-2，首页搜索框的页面布局

我会在视频里教大家实现一个和上图一样的页面。
本节知识点

• input组件
  
• 点击事件
  
• 模糊搜索
  
• 获取用户输入内容
  

我会在视频里给大家做详细讲解。
对应文档
这里只需要看一个重点知识点的文档即可，别的的知识点我在底子课里都有做讲解。

• 模糊搜索关键知识点文档：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/database/Database.RegExp.html
  

我们这一节的难点就在这个模糊搜索上，所以接下来会重点给大家讲解这个模糊搜索。这也是我们实现搜索功能的关键所在。

• 焦点代码如下：
  

1.         db.collection('food').where({
2.       name: db.RegExp({
3.         regexp: searchKey,
4.         options: 'i'
5.       })
6.     }).get()

复制代码

13-3，搜索页顶部搜索框

可以看出我们搜索页顶部的搜索框和首页的搜索框基本上如出一辙，所以我们布局上只需要把首页的搜索框复制过来就行了，正规的做法应该是抽取为一个自定义组件。但是我们本节的重点不是自定义组件，所以我们这里就在搜索页重新写下搜索框就行了。

和首页搜索框唯一不同的就是我们在首页输入的搜索词要自动添补到搜索框里，实在就是设置下input的value属性。

这里就不再带着大家一点点的敲代码了，这部分可以去看下前面首页的讲解内容。
13-4，搜索结果页的编写

实在这里的图片标题和代价。这里我会在视频里手把手的教大家把这里写出来。

大家只需要跟着视频好勤学习就行，这里的图片代码只是一个参考，照旧要以视频为准。
13-5，设置文本超过一行省略号

我把对应代码给大家放到这里

1. .item_title {
2.   font-size: 42rpx;
3.   width: auto;
4.   overflow: hidden;
5.   text-overflow: ellipsis;
6.   display: -webkit-box;
7.   /* 限制为一行，如果2行就把1改为2 */
8.   -webkit-line-clamp: 1;
9.   -webkit-box-orient: vertical;
10.   word-wrap: break-word;
11.   word-break: break-all;
12. }

复制代码

十四，热门推荐和新品推荐

我们这一章来实现首页推荐的商品列表，和新品推荐里的商品列表。为了让大家多学习知识，热门推荐给大家用普通列表，新品推荐给大家用瀑布流。
14-1，首页热门推荐

首页热门推荐布局和上一章的搜索列表有点像，所以直接把搜索列表布局拿过来即可

记得改下距离左右的间距。还有数据请求的地方要记得请求推荐字段为true的。
14-2，新品推荐

新品推荐页用了瀑布流，样式如下

实现双列瀑布流的焦点是利用css的flex布局，然后设置flex-wrap如下。

大家只需要跟着视频好勤学习，跟着石头哥一行行的写代码即可，这里的图片代码只是一个参考，照旧要以视频为准。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。