从今天开始带领大家实现一款云开发版的校园二手商城小程序

技术选型

1,前端

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

2,管理后台

  • 云开发Cms内容管理系统
  • web网页

3,数据后台

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

云开发数据库是一个既可以在小程序端操作,也可以在云函数中操作的json类型的非关系型数据库。(基于MongoDB)

云开发相对于传统服务器的优势如下表

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_二手书城

效果预览

1,小程序端

1-1,首页

首页有以下几个功能点

  • 1,顶部轮播图
  • 2,商品搜索
  • 3,二手商城入口
  • 4,新品推荐入口
  • 5,客服
  • 6,上门回收商户入口
  • 7,热门商品推荐
    最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_小程序云开发_02

1-2,发布二手商品页

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

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_二手书城_03

可以填写商品信息

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_跳蚤市场_04

1-3,二手商城页

  • 商品属于那个学校或者商圈
  • 商品分类
  • 商品列表
  • 购买数量
  • 商品图片,名称,价格,剩余数量
  • 底部购物车
    最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_小程序_05

1-4,购物车弹窗

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

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_小程序云开发_06

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

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

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_二手书城_07

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

1-5,搜索功能

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

  • 1,直接点击搜索图标
  • 2,点击键盘上的搜索键
    最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_小程序_08

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

如我这里只搜‘小’,那么商品中所有包含小 的都可以搜索到

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_小程序云开发_09

1-7,新品推荐列表页

会把最新发布的商品显示出来

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_二手商城_10

1-8,商品详情页

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

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_二手商城_11

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

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_小程序_12

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

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_跳蚤市场_13

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

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_小程序_14

1-9,下单页

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

  • 1,购物明细
  • 2,价格计算
  • 3,备注
  • 4,收货地址
  • 5,取货类型(上门自提和送货上门)
    最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_小程序_15
    如果选择送货上门,选择好地址以后如下
    最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_跳蚤市场_16

1-10,收货地址管理页

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

1-10-1,地址列表

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

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_小程序云开发_17

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

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_二手商城_18

1-10-3,访问通讯录

我们填写联系方式的时候,可以直接从通讯录里读取。

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_二手商城_19

1-10-4,地图上选择地址

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

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_二手书城_20

1-11,支付页

我们目前学习阶段,所以学习模拟支付版的就可以了

  • 1,模拟支付
    适合前期学习,毕业设计等演示类的场景。
  • 2,真实微信支付
    适合商用,但是使用微信支付必须要有营业执照,所以前期如果只是学习的话,建议使用模拟支付。所以我们的源码目前提供模拟支付版本,如果需要商业使用请联系石头哥。

模拟支付

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_小程序云开发_21

真实微信支付(真实支付请联系石头哥商业开发)

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_小程序_22

1-12,我的订单页

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

  • 1,新下单待收货
  • 2,已收货待评价
  • 3,订单完成
  • 4,订单取消
  • 5,可以跳转商品详情页
    最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_二手书城_23
    可以看出我们既有确认收货,也有取消订单的功能。上门自取和送货上门的订单显示如下。
    最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_小程序云开发_24

1-13,提交评论页

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

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_小程序云开发_25

在已完成订单里可以查看评价。

1-14,评价列表页

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

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_小程序_26

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

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_二手商城_27

1-15,个人中心

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

未登录

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_二手商城_28

已登录

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_跳蚤市场_29

登录成功后,也可以点击退出登录按钮来退出。

1-16,微信授权登录小程序

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_二手书城_30

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

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

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_二手书城_31

这里可以直接调起电话进行拨打,也可以直接复制联系方式。

1-18,在线客服

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

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_二手书城_32

客服可以在网页端,或者微信端管理消息

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_小程序云开发_33

网页端客服

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_二手书城_34

小程序端客服

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_二手商城_35

1-19,意见反馈

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

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_小程序_36

管理员可以在小程序后台,查看客户的反馈

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_二手商城_37

1-20,论坛功能

1-20-1,论坛列表

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

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_二手商城_38

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

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_小程序云开发_39

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

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_二手商城_40

1-20-3,发布问题

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_二手书城_41

2,商家端

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

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

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_二手商城_42

2-2,待发货的订单

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

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_跳蚤市场_43

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

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

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_二手书城_44

2-4,瀑布流显示其他商品

用瀑布流的方式其他所有商品

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_小程序_45

3,cms网页管理后台

我们这里的可视化网页后台使用的时云开发自带的cms(内容管理)

3-1,登录页

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_二手书城_46

3-2,管理后台

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_跳蚤市场_47

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_小程序_48

我们可以在这里

  • 1,添加轮播图,删除轮播图,修改轮播图
  • 2,管理商品,上下架商品
  • 3,管理订单
  • 4,查看评价
  • 5,添加广告商
    最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_二手商城_49
    比如我查询某个商品的所评价
    最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_跳蚤市场_50
    设置商品是否上首页推荐位
    最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_小程序_51

查询哪些商品上了首页推荐位

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_跳蚤市场_52

还有更多的功能,我会在视频课里给大家用视频来演示,这样更直观。

4,数据库

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

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_跳蚤市场_53

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

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

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_跳蚤市场_54

1-1,源码的下载

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

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_跳蚤市场_55

1-2,源码的导入

导入源码的时候一定要把appid换成你自己的。appid需要注册小程序才有的,所以学习这门课之前建议你先去看下我云开发基础课:《零基础人入门小程序云开发》

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_跳蚤市场_56

appid获取的位置如下图。

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_跳蚤市场_57

有些同学导入源码时会多一层,我会在视频里教大家如何避免这样的问题。

1-3,云开发的初始化

初始化云开发之前,必须先开通云开发。

1-3-1,初始化云开发环境id

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

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_小程序_58

获取环境id

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_小程序云开发_59

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

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_跳蚤市场_60

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

这里要注意,选择的环境,必须和你app.js里填入的环境id保持一致。

有的同学第一次运行的时候选择云开发环境为空。这个时候记得多关闭重启几次开发者工具即可。

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_二手书城_61

1-4,云函数的部署

cloud目录下的云函数都要部署一下

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_二手商城_62

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_小程序_63

一定要记得cloud目录下的所有云函数都必须要部署一下。

二,开通Cms可视化网页管理后台

我们上面源码导入成功,并把云开发环境初始化成功以后,接下来就来开通cms可视化网页后台

2-1,进入云开发控制台开通内容管理(CMS)

如下图所示,直接点击开通内容管理(CMS)即可

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_二手商城_64

点击完开通以后,会有如下弹窗,直接点击确定即可。不要被付费吓着,官方每月会送我们一定的免费额度的。学习得话基本上够用了,如果用量超了,一瓶可乐钱基本上就够了。

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_跳蚤市场_65

上面点完确定后,我们只是开启了按量付费功能,因为cms得使用必须要开通按量付费才可以得。所以还要再点一次开通。如下图

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_跳蚤市场_66

点完开通后,会有如下弹窗,直接点击下一步即可。

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_小程序_67

然后我们需要设置登录内容管理后台得账号和密码,然后点击确定即可

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_跳蚤市场_68

然后我们就等待内容管理功能得开通了,需要等几分钟。

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_二手商城_69

开通成功以后,我们就可以通过下面这个地址进入管理后台了。

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_跳蚤市场_70

2-2,登录Cms可视化管理后台

上面开通好以后,就可以通过后台地址登录管理后台了。如下

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_小程序云开发_71

2-3,创建项目

第一次登录,我们还需要创建一个项目

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_小程序_72

自己输入项目名和项目id即可

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_跳蚤市场_73

然后点击进入刚刚创建的项目

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_小程序_74

到这里我们的cmd可视化网页管理后台就创建好了,下面教大家如何导入数据。

三,导入数据并修改数据库权限

3-1,在cms后台导入内容模型

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_跳蚤市场_75

把我为大家提前准备好的内容模型.json文件导入即可。这里的内容模型不是代码,导入成功后就可以删除了。

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_小程序云开发_76

导入完以后,可以看到多了以下几个表。后面的讲解里会告诉大家这几个数据表。

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_小程序_77

3-2,新建轮播图数据

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_二手书城_78

这里只需要上传你想要显示在小程序首页轮播图的图片即可。

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_小程序云开发_79

上传好以后,不要忘记点击下创建

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_小程序_80

可以看到我们小程序首页的轮播图就替换了你传的这个。

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_小程序云开发_81

3-3,添加回收商

这里没什么说的,你按自己需求添加数据即可。

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_二手商城_82

3-4,修改表权限

我们需要把下面几个表的权限改为所有用户可读,仅创建者可读写。

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_二手商城_83

3-5,认识项目目录

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

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_二手书城_84

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

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_二手商城_85

cloud云函数如下

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_小程序_86

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_小程序_87

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

五,新建一个项目

今天我们就来正式的开始手把手的开发了。后面的每一节都很重要,希望大家好好听。

首先是创建新项目,这里一定要记得用自己的appid,所以你要提前去注册一个属于自己的小程序,小程序的注册我小程序基础课里有讲过。

《10小时零基础入门小程序开发》

5-1,记得注册小程序

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

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_跳蚤市场_88

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

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_小程序_89

5-2,新建项目

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

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_二手书城_90

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

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_二手商城_91

选择后就会如下图所示

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_小程序_92

创建好以后的项目如下

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_小程序_93

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

5-3,导入空白目录

如果你上面的一步成功的创建项目了,这一步可以忽略。

我在配套资料里有给大家准备好一个空白目录。

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_跳蚤市场_94

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

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_小程序_95

解压好以后,一定要点开检查下目录层级。

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_二手商城_96

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

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_二手商城_97

我在视频列也会给大家具体演示一下,提醒大家注意的。所以一定要笔记结合着视频一起学。

六,创建页面和tabbar

6-1,创建image图片目录

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

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_小程序_98

然后把网盘里资源里的项目图标,都放到这个image文件里,后面会用到。

6-2,在app.json里注册所需页面

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_二手书城_99

我会在视频里教大家把我们所需要的页面都先创建好,为后面的开发做准备。

6-3,创建tabbar

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

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_小程序_100

在app.json里配置tabbar

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_小程序_101

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

"tabBar": {
"color": "#515151",
"selectedColor": "#2E8B57",
"borderStyle": "white",
"list": [{
"selectedIconPath": "image/tab1ok.png",
"iconPath": "image/tab1-no.png",
"pagePath": "pages/home/home",
"text": "首页"
},
{
"selectedIconPath": "image/tab2ok.png",
"iconPath": "image/tab2-no.png",
"pagePath": "pages/mall/mall",
"text": "二手商城"
},
{
"selectedIconPath": "image/tab3ok.png",
"iconPath": "image/tab3-no.png",
"pagePath": "pages/fabu/fabu",
"text": "发布"
}, {
"selectedIconPath": "image/tab4ok.png",
"iconPath": "image/tab4-no.png",
"pagePath": "pages/forum/forum",
"text": "问大家"
},
{
"selectedIconPath": "image/tab5ok.png",
"iconPath": "image/tab5-no.png",
"pagePath": "pages/me/me",
"text": "我的"
}
]
},

七,首页轮播图的开发

7-1,要实现的效果图

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_二手书城_102

本节知识点

  1. swiper组件
  2. swiper-item组件
  3. image组件
  4. wx:for列表循环
  5. 云数据库请求数据
  6. cms后台操作
  7. 轮播图的增删改查

这些知识点在基础课里都有讲解,所以这里不会讲太细,视频里会带大家快速的实现代码的。

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页面布局

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_二手书城_103

wxss样式

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_小程序云开发_104

我会在讲解视频里手把手的带着大家写一遍的。所以要认真看视频

8-2,拨打电话和复制文本

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

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_小程序_105

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

Page({
onLoad() {
wx.cloud.database().collection('huishou').get()
.then(res => {
console.log('回收商数据', res)
this.setData({
list: res.data
})
}).catch(res => {
console.log('回收商数据失败', res)
})
},
//拨打
goPone(e) {
console.log(e.currentTarget.dataset.phone)
wx.makePhoneCall({
phoneNumber: e.currentTarget.dataset.phone
})
},
//复制文本
goWeiXin(e) {
let weixin = e.currentTarget.dataset.weixin
wx.setClipboardData({
data: weixin,
success(res) {
wx.showToast({
title: '已复制',
})
}
})
}
})

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

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

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_二手商城_106

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

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_跳蚤市场_107

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

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

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_小程序_108

接下来就教大家如何开发这个区域。

9-1,获取图片资源

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

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_小程序_109

网盘的资源–》项目图标

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_二手书城_110

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_小程序_111

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

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_跳蚤市场_112

9-2,wxml和wxss的编写

这里先把整体代码截图给到大家,如下图所示,这里不用记,我会在视频里手把手的带大家写一个出来的。

wxml布局

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_跳蚤市场_113

wxss样式

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_小程序_114

这里每个分类都有自己的bindtap点击事件,点击后会跳转到不同的页面。

9-3,在js里编写点击事件

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

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_跳蚤市场_115

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

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_跳蚤市场_116

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

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_二手商城_117

我们这里最常用的就是 wx.navigateTo 。

到这里我们的九宫格分类区域就编写好了。

十,搜索功能的开发

10-1,搜索框的页面布局

最新最全的校园跳蚤小程序,二手商城小程序,二手书城小程序,带五星评分功能,发布商品,模糊搜索,评论,校园论坛功能_二手书城_118

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

10-2,本节知识点

  1. input组件
  2. 点击事件
  3. 模糊搜索
  4. 获取用户输入内容

我会在视频里给大家做详细讲解。

10-3,对应文档

这里只需要看一个重点知识点的文档即可,其余的知识点我在基础课里都有做讲解。

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

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

  • 核心代码如下:
db.collection('food').where({
name: db.RegExp({
regexp: searchKey,
options: 'i'
})
}).get()