明天开始，我将带领大家实现一个校园二手商城小程序的云开发版本。
技术选型1、前端2、管理后端3、数据后端功效预览1、小程序1-1、首页
首页有以下功能
1-2、商城分类列表页
商城分为左侧品类栏和两侧产品列表栏。 产品可以直接添加到购物车。
1-3、购物车弹窗
首先，您可以在列表页直接将商品添加到购物车。
弹出购物车后，您可以进行以下操作
这些操作都是与商品列表挂钩的，即可以同步商品列表和购物车中的增删改数。 我会在项目预览章节的视频中进行详细演示。
1-4、搜索功能
我们这里的搜索有两种触发形式
1-5、搜索结果，支持模糊查询
如果我在这里只搜索“巧克力”，那么所有含有巧克力的产品都可以被搜索到。
1-6、新品推荐列表页
将展示最新产品
1-7、产品详情页 1-7-1、产品信息
商品详情页有底部图片轮播、商品信息、添加购物车、商品描述、用户评论、底部购物车。
1-7-2，产品评论列表
1-7-3、详情页加入购物车
同样，在商品页面添加商品也有链接到购物车的功能。
1-8、订单页面
订单页面是您下订单并确认订单后付款的地方。具有以下功能
1-9、收货地址管理页面 1-9-1、地址列表
您可以选择默认地址、编辑地址、删除地址和复制地址。
1-9-2、添加和更改地址
1-9-3、访问通讯录
当我们填写联系信息时，我们可以直接从通讯录中读取。
1-9-4，选择地图上的地址
送货地址可以直接从地图上选择。
1-10、支付页面
支付页面分为两种形式
我们的源码目前只提供模拟支付版本。 如需商业用途，请联系石头。
模拟支付
真实微信支付
1-11、我的订单页面
我的订单页面分为以下几种状态：
可以看到我们有确认收货和取消订单的功能。
1-12、提交评论页面
我们可以审查项目。
评论成功后，列表会刷新，并出现评论成功的提示框。
可以在已完成的订单中查看评论。
后期我们会考虑增加评级评价，比如四星评价体系。
1-13、评价列表页
可以查看所有评论
您可以从评论列表中查看产品详细信息页面。
1-14、个人中心
个人中心分为已登录和未登录两种状态。
未登录
登录
登录成功后，您也可以点击注销按钮进行注销。
1-15、微信授权登录小程序
1-16、在线客服
客户可以直接在小程序中给客服发送消息
客服可以在网页或者Momo上管理消息
网络客户服务
小程序客服
1-17、反馈
客户可以直接在小程序上提出建议，建议中可以添加图片。
管理员可以在小程序后台查看客户反馈
1-18、购物车页面
购物车是空的
2.cms web管理后台
我们这里使用的可视化Web后端使用的是诗云开发自带的cms（内容管理）
2-1、登录页面
2-2、管理背景
我们可以在这里
查看首页推荐了哪些产品
功能还有很多，我在视频课上用视频给大家演示一下，更直观。
3. 数据库
数据库：我们利用云开发自己的云数据库。
配套资料1、讲解视频
我会在B站免费为大家提供视频课程，欢迎关注，欢迎关注。
2. 辅助说明
配套笔记分为在线版和离线电子书版。
csdn上免费给你在线笔记。 欢迎关注，笔记将持续更新。
3.支持石头兄弟3-1，获取源码及配套资源
目前源码和配套资源暂时不免费。 毕竟创作并不容易。 如果朋友有需要，可以私聊石头哥，换大米。
3-2、注释电子书
我还整理了一套电子书作为我的笔记。 也可以私聊石头哥获取附带笔记的电子书版本。 电子书笔记方便以后查知识点，当然也需要换大米。
3-3. 配置商业版商城小程序
您可以联系石头哥配置商城小程序商业版。
4. 问题与解答(●''●)
此外，石头哥还提供配套接听服务。 当然，在付费知识时代，石头哥的答案是要花钱的。 毕竟石头哥的精力有限，石头哥也想吃蛋糕。 石头哥推出了全年无休的答疑服务，如果你在学习过程中有任何疑问，或者工作中遇到任何编程问题，都可以来找石头哥。
石头兄目前可以回答以下问题：
源码版本
我目前提供以下两个版本的源码。 不同的源码适用于不同的场景。 目前重点是讲解模拟支付版本，所以一定要仔细阅读前面的源码导出部分。
由于商业版本需要营业执照，很多朋友无法满足这个要求，所以我这里主要使用模拟支付版本。
1.模拟支付版本 2.真实微信支付版本
真实支付属于商业版。 如需商业版本，请另行联系石头。
源码导出及云开发初始化
我的源码会在配套资料中提供给付费用户，年卡用户也可以获得。
1-1、下载源码
早期学习只需到云盘下载最新版本的源码即可。
1-2、源码导出
导入源码时，请务必将appid替换为自己的appid。 小程序需要注册appid，所以在学习本课程之前网站程序超市，建议您先看一下我们的云开发基础课程：《零基础人的小程序云开发入门》
获取appid的位置如下图。
1-3、云开发初始化
在初始化云开发之前，您必须先启用云开发。
1-3-1、初始化云开发环境id
点击云开发，进入云开发控制台。 如果没有这个图标，说明你在导出源码时没有使用自己的appid。 所以必须使用自己的appid
获取环境id
将环境id复制到app.js中，将下面部分替换为你自己的环境id
1-3-2、云功能选择环境
这里需要注意的是，选择的环境必须与你app.js中填写的环境ID一致。 如果选择的云开发环境是空的，关闭然后重启几次就可以了。
1-4. 云功能部署
云目录下的所有云功能均需部署。
打开Cms可视化网页管理后台
当我们成功导出源代码并成功初始化云开发环境后，我们将打开cms可视化Web后端。
2-1. 进入云开发控制台，激活内容管理（CMS）。
如下图所示，只需点击激活内容管理（CMS）
点击激活后，会出现如下弹窗，点击确定即可。 不要被付款吓到，官方每个月都会给我们一定的免费额度。 学习基本够用了。
点击上面的“确定”后，我们只是开启了分时付费功能，因为要使用cms，就必须激活分时付费。 所以我必须再次点击激活。如下图
点击激活后，会出现如下弹窗，点击下一步即可。
然后我们需要设置登录内容管理后台的账号和密码，然后点击确定
然后我们等待内容管理功能被激活，这需要几分钟的时间。
激活成功后，我们可以通过下面的地址进入管理后台。
2-2. 登录Cms可视化管理后台
上述激活后，就可以通过后端地址登录管理后端了。如下
2-3、创建项目
第一次登录时，我们还需要创建一个项目
自己输入项目名称和项目id即可
然后点击进入刚刚创建的项目
至此我们的cmd可视化web管理后台就已经创建完成了。 下面我就教大家如何导出数据。
导入数据并更改数据库权限3-1、cms后台导出内容模型
只需导出我提前为您规划好的内容模型 .json 文件即可
导入后可以看到如下表格
3-2. 创建新的轮播图表数据
这里你只需要上传你想要在小程序首页的轮播图片上显示的图片即可。
上传后别忘了点击创建
您可以看到我们小程序首页的轮播图已经替换成了您上传的图。
3-3. 轮播图数据表修改权限
修改lunbotu表的权限为所有用户可读网站程序超市，只有创建者可以读写。
3-4. 修改产品表权限
将goods表的权限修改为所有用户可读、仅创建者可读。
源代码的简要说明（可选）
首先，让我逐页介绍一下每一页。
云函数如下
在视频中，我将快速粗略地向您解释每个页面的代码。 这一段可以作为选集，后面我会教大家写一个自己的校园二手商城的小程序。
学习完上面的小程序和云开发的基础知识后，今天我们就带大家实现一个综合项目，推出一个属于自己的微信商城小程序。
小程序基础学习入口
如果你有小程序的基础知识，可以跳过前面的基础，直接看下面的。 如果你没有小程序基础知识，建议你先学习基础知识，然后再看小程序商城的开发。
1.开发计划工作1-1、注册一个小程序
这里需要给大家指出的是，我们这里实现的是一个商城小程序，所以我们必须注册一个自己的小程序。 关于小程序的注册，建议您观看下面的基础视频。 前面我们学习支付的时候，我们会教大家如何将项目切换到企业小程序。 所以，最好能直接注册一个企业小程序。 如果您无法注册企业小程序，也可以先注册个人小程序。
关于注册小程序，我给大家讲几点。
注册只需前往小程序官网即可。
注册时选择小程序
以下步骤可如实填写。 如果您在注册过程中有任何疑问，可以在下方留言。
1-2、获取小程序Appid
我们注册完小程序后，就可以去小程序网页后台获取appid
我们收到appid后，最好记在记事本上。 每次都要到小程序后台获取，很麻烦。
1-3、下载开发者工具
工欲善其事，必先利其器。 开发小程序也是如此。 这里首先要下载陌陌官方提供的小程序开发者工具。 当然，市场上还有其他开发工具。 石头哥这里推荐大家使用官方的工具。 毕竟我们可以更快的使用一些官方的更新。
下载和安装相对简单。 去官方下载地址下载即可。
开发工具下载地址如下：
这里的安装都是傻瓜式的，就不详细说了。
1-4、创建自己的陌陌小程序项目
以上开发者工具安装完毕后，我们可以双击打开。然后新建一个小程序项目
然后填写一些项目信息
这里需要指出的一点是，对于后端服务，一定要记住选择不使用云服务。 因为你选择使用它，项目中就会为我们创建大量无用的目录，你必须一一删除。
项目创建后如下
至此我们的项目已经创建完毕，下一节我们将开始开发自己的商城小程序。
二、初始化项目
前面我们创建了基础项目之后，我们就对项目进行改造，初始化我们的商城小程序项目。
2-1、创建图片目录放置图标
我们通常创建的默认项目是单个页面。 如果我们要实现如下所示的多页面，就必须使用tabBar来实现多页面。
如果我们要使用tabBar，就需要使用图标，所以我们需要创建一个图标的目录。
然后把我提前给你规划好的图标放到图片里就可以了。
我将在辅助学习材料中为您提供这些图标。
2-2、创建多个页面
关于小程序中快速创建页面，我在小程序基础知识中已经讲过很多次了。 我这里就不详细说了。 只需直接在app.json中创建以下三个页面即可。
2-3、设置tabBar实现多页面布局
以上三个页面创建完成后，我们就可以通过tabBar来设置多页面布局了。
在app.json中添加以下配置。
这样我们就可以实现一个可以自由切换的多页面小程序了。
至此我们的项目初始化就完成了。
3.初始化全局样式
我们需要在小程序的很多地方使用一些通用的、相同的颜色或者字体大小。 如果我们每个地方都写一个颜色值，如果后面需要改变主题颜色，就需要改变很多地方，所以我们需要将颜色定义为全局变量，在需要颜色的地方使用。 这样以后当主题颜色发生变化时，我们只需要单独改变全局颜色，就可以方便在其他地方使用全局颜色了。 据说，过去的人种树，未来的人乘凉。
3-1、在app.wxss中定义全局颜色
首先让我定义一个全局主题颜色，如下：
这里记住，我们的themeColor后面的- -是固定的写法。 只能使用以这种方式定义的全局变量。
3-2、使用全局颜色变量
下面是主页上的一段文字，演示了全局颜色变量的使用。
我们在 home.wxml 中定义一个演示选择器
然后在home.wxss中使用它
使用全局样式变量的语法也是固定的。 变量名必须用 var() 括起来。
这样，我们就可以在任何需要统一颜色的地方使用我们定义的颜色变量。
3-3、更改navigationBar的底栏样式。
可以看到我们默认的底栏是红色背景，黑色文字。
对应的代码是app.json中的window
那么如果我们想让它像这样
需要更改窗口中的几个值。
这样我们底部导航栏的主题颜色和顶部tabBar主题就可以保持统一了。
3-4、全球字体大小保持统一
如果字体大小统一的话就更容易了。 我们只需要在app.wxss页面中设置font-size即可，如下
这样我们就可以将整体字体大小设置为32rpx。
4.首页自定义搜索框的实现
我们的搜索框会在多个页面上使用，所以我们把搜索框做成一个自定义组件，这样我们就可以在其他地方方便的使用我们的搜索框。
老规矩，先看效果图
4-1、自定义搜索框组件
我们这里使用自定义组件，需要以下3步
4-1-1、创建自定义组件
首先我们需要创建一个名为components的目录专门用来存放自定义组件，然后在components中新建一个searchInput组件，如下。
我们先在自定义组件searchInput.wxml中随意写一句，然后在首页引用这个自定义组件看看是否可以显示。
4-1-2、声明引用
引用自定义组件时，必须首先在 home.json 中声明引用。
这里我们引用了自定义组件并将其命名为searchInput
4-1-3、使用自定义组件
声明了上面的引用后，我们就可以将其作为组件来使用，如下
这样我们就可以看到这个自定义组件可以显示在我们的首页了
4-2、美化自定义搜索框
前面我们定义了搜索框组件，并成功在首页使用了它，但是样式不是我们想要的，所以这里需要对样式进行美化。
4-2-1、自定义wxml布局
首先我们需要在 wxml 中定义搜索框的布局
我们这里定义的navigator主要是用来点击跳转的。 当我们点击这里的时候，我们需要跳转到搜索页面，所以我们需要先创建搜索页面。
至于如何新建页面，我已经讲过很多次了。 不了解的朋友可以去看我的小程序基础课程。
4-2-2、自定义wxss样式
前面定义好布局之后，我们就可以编写样式了。 我直接把样式文件粘贴到这里给你。
风格基本上没什么可说的。 如果不懂的知识点可以自行前往相关的css知识点。 这里我把完整的wxss代码贴给大家。 关于css，也可以直接复制石哥的代码。
.search_input {
height: 80rpx;
padding: 15rpx;
background: var(--themeColor);
}
.search_input navigator {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: white;
border-radius: 15rpx;
color: #666;
}
定义好样式后，直接在我们的home.wxml中使用我们的搜索框组件就非常简单了。
这就是我们自定义组件的好处，使用起来非常方便，只需要这么一行代码就可以使用它们。 以后想要更改时，只需要在自定义组件中进行简单的更改，就可以全局更改。
五、首页轮播图的实现
本节我们将实现首页底部的轮播功能。
老规矩，先看效果图
5-1、启用云开发
由于我们的底层轮播需要做成动态数据，所以这个数据必须存储在数据库中。常用的存储数据的数据库如下
因为mysql数据库需要使用Java、php或者python来开发后台，比较麻烦，所以这里最好使用我们云开发自带的数据库。
云开发的开启以及云开发的一些基础知识不是本节的重点。 之前在云开发基础课程中讲过。 如果你没有云开发基础知识，可以去看我的云开发课程。
《零基础入门小程序云开发》
也可以去b站搜索“编程小石头”观看石头哥提供的福利视频课程。
开启云开发后，记得在app.js中初始化云开发环境
5-1-1、云开发环境初始化
前面我们创建了云开发后，我们需要去云开发控制台获取云开发环境id。
这里的云开发环境id，建议你直接复制，不要手写，容易出错。
如上图，可以在app.js中初始化云开发环境。 只有初始化了云开发环境id后，才能使用云开发功能。
5-1-2、创建首页轮播对应的数据集
我们这里创建一个数据表，在小程序云开发中称为数据集合。
如上图所示，我们创建一个名为homeImgs的数据集合，用于存储首页轮播的图片链接。
5-2、上传图片至云存储
如果我们的图片想要动态更新，我们就必须想办法把图片存储在云服务器中。 云开发的云存储功能非常适合我们存储图片。 下面我就教大家如何将图片保存到云存储中。
第一步进入云开发控制台，找到云存储。
然后进入我们新建的文件夹，点击“上传文件”上传文件。
然后我们可以随意点击我们上传的一张图片，就可以得到该图片对应的链接。
https开头的图片链接可以直接在浏览器中打开。
但https开头的链接是有相应的有效期的。 因此，如果我们的图片在小程序中展示，我们建议您使用以cloud开头的图片链接。
以cloud开头的链接在浏览器中无法显示，但在我们的小程序中可以显示，并且永久有效。
5-3、添加图片链接到轮播集合
我们已经能够获取图像的链接，因此我们可以将链接添加到我们的轮播图像集合中。
如果我们想在主页轮播中显示多个图像，我们可以向其添加多个图像链接。
这里记住，每条数据都使用imgUrl数组来保存图片链接。
5-4. 获取首页轮播图片数据
我们的数据已经准备好了，下一步就是在小程序中请求云开发数据库中存储的数据。 我们后面只需要更改云开发数据库中的数据，小程序中的数据就可以动态更改。
我们在 home.js 中定义请求数据的方式如下。
可以看到我们请求数据成功了，但是复制的时候却是空数据。 这是因为我们的云开发数据库权限需要设置为所有人都可读。
因为当我们创建homeImgs集合时，默认是只有创建者可以读写。 因此，当我们直接在小程序中请求时，是无法请求到数据的。 将权限更改为所有用户均可读取。
我们再求一下数据看看。
这时候我们添加的三个图片链接数据就都可以请求了。接下来我们将这个数据显示在页面上
5-5、渲染底部轮播
We need to rely on the swiper and swiper-item components to render the bottom carousel image on the page, so we need to define the following code in home.wxml.
Then the code in home.js also needs to be slightly modified.
This way our data can be displayed on the page.
But we have a problem here
5-6, optimize the carousel image
First set the mode of the picture so that the picture is full. The mode attribute of image is used here, as shown below.
I'll give you the link to the official documentation:
The mode tailoring mode here can be set according to your own needs.
The home.wxml code is as follows:
The code in home.wxss is as follows:
It can be seen that our picture fills the screen at this time, but there will be clipping
This depends on the setting of the mode clipping parameter of our image component. As for setting the clipping mode, you can set this according to your own business scenario. The best thing is that the designed image fully conforms to the ratio. This way there won't be any problems with clipping.
5-7, set manual rotation
We want to set the manual rotation of the carousel, etc., in fact, to set some properties of the swiper component. In fact, the officials have given it to them.
Here is also a link to the corresponding official document for you, you can set it according to your own needs.
I only set the following two properties here
Sixth, there are nine grids on the home page, seven grids, eight featured products, nine product category pages, ten product list pages, eleven search page pages, and the search results page is being continuously updated. 。 .There will also be a supporting video explanation later, so stay tuned.
