云开发版校园二手商城小程序技术选型1-2

菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技

云开发版校园二手商城小程序技术选型1-2

从今天开始，我们将带领大家实现校园二手商城小程序云开发版。

技术选型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、在线客服

客户可以直接在小程序中给客服发送消息

客服可以管理网页或微信消息

网络客户服务

小程序客服

1-17、反馈

客户可以直接在小程序上提出建议，建议中可以添加图片。

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

1-18、购物车页面

购物车是空的

2.cms 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. 轮播图数据表修改权限

修改该表的权限为所有用户可读，只有创建者可读可写。

3-4. 修改产品表权限

将goods表的权限修改为所有用户可读，仅创建者可读可写。

源代码的简要说明（可选）

首先，让我逐页介绍一下每一页。

云函数如下

我将为您提供视频中每个页面的代码的快速和一般性解释。 本节可以作为可选阅读。 稍后我会一小程序。

前面学习了小程序和云开发的基础知识后，今天我们将带领大家实现一个综合项目，推出一个属于自己的微信商城小程序。

小程序基础学习入口

如果你有小程序基础知识，可以跳过上面的基础，直接看下面。 如果您没有小程序基础知识，建议您先学习以上基础知识，然后再看小程序商城开发。

1.开发准备1-1、注册一个小程序

这里需要强调一下，我们这里实现的是一个商城小程序，所以我们必须注册一个自己的小程序。 关于小程序的注册，建议大家看我之前的基础视频。 后面学习支付的时候我们会教大家如何将项目切换到企业小程序。 所以，*好能直接注册一个企业小程序。 如果您无法注册企业小程序，也可以先注册个人小程序。

关于注册小程序，我在这里说几点。

注册只需前往小程序官网即可。

注册时选择小程序即可

只需如实填写以下步骤即可。 如果您在注册过程中有任何疑问，可以在下方留言。

1-2、获取小程序Appid

我们上面注册完小程序后，就可以去小程序网页后台获取appid

我们拿到appid之后，*好记在记事本上。 每次都要到小程序后台获取，很麻烦。

1-3、下载开发工具

工欲善其事，必先利其器。 我们开发小程序的时候也是一样。 这里首先要下载微信官方提供的小程序开发工具。 当然，市场上还有其他开发工具。 石头哥这里推荐大家使用官方的工具。 毕竟我们可以更快的使用一些官方的更新。

下载和安装相对简单。 去官方下载地址下载即可。

开发工具下载地址如下：

这里的安装都是万无一失的，就不赘述了。

1-4. 创建自己的微信小程序项目

以上开发工具安装完毕后，我们可以双击打开，然后新建一个小程序项目

然后填写一些项目信息

这里强调一下，对于后端服务，一定要记得选择不使用云服务。 因为你选择使用它，项目中就会为我们创建大量无用的目录，你必须一一删除。

项目创建完成后如下

至此，我们的项目就创建完成了。 下一节我们将开始正式开发自己的商城小程序。

2.初始化项目

上面我们创建好基础项目后，我们来改造项目，初始化我们的商城小程序项目。

2-1、创建图片目录放置图标

我们通常创建的默认项目是单个页面。 如果我们想要实现下图所示的多页面效果，就必须使用它来实现多页面。

如果我们要使用它，就需要使用图标，所以我们需要创建一个目录来放置图标。

然后把我提前给你准备好的图标放到图片里就可以了。

我将在辅助学习材料中为您提供这些图标。

2-2、创建多个页面

关于小程序中快速创建页面，我在小程序基础知识中已经讲过很多次了。 我这里就不详细说了。 只需在 app.json 中创建以下三个页面即可。

2-3、设置实现多页面布局

创建完以上三个页面后，我们就可以设置多页面布局了。

将以下配置添加到app.json。

这样我们就可以实现一个可以自由切换的多页面小程序了。

至此我们的项目初始化就完成了。

3.初始化全局样式

我们需要在小程序很多地方使用一些通用的、相同的颜色或者字体大小。 如果我们每个地方都写一个颜色值，以后如果需要改变主题颜色，就要修改很多地方，所以我们需要将颜色定义为全局变量，在需要颜色的地方使用。 这样以后当主题颜色发生变化时，我们只需要单独改变全局颜色，就可以方便在其他地方使用全局颜色了。 据说，过去的人种树，未来的人乘凉。

3-1、在app.wxss中定义全局颜色

首先让我定义一个全局主题颜色，如下：

这里记住，我们面前的--是固定的写法。 只能使用以这种方式定义的全局变量。

3-2、使用全局颜色变量

这是主页上的一段文字，演示了全局颜色变量的使用。

我们在 home.wxml 中定义一个演示选择器

然后在home.wxss中使用它

使用全局样式变量的语法也是固定的。 变量名必须用 var() 括起来。

这样，我们就可以在需要统一颜色的地方使用我们定义的颜色变量。

3-3、更改顶栏样式。

您可以看到我们默认的顶部栏具有白色背景和黑色文本。

对应的代码在app.json中

那么如果我们想变成这样

有必要改变其中的几个值。

这样我们的顶部导航栏和我们的底部主题颜色就可以保持统一。

3-4、全球字体大小保持统一

如果字体大小统一的话就更容易了。 我们只需要在app.wxss页面中设置font-size即可，如下

这样我们就可以将整体字体大小设置为32rpx。

4.首页自定义搜索框的实现

我们的搜索框会在多个页面上使用，所以我们把搜索框做成一个自定义组件，这样我们就可以在其他地方方便的使用我们的搜索框。

老规矩，先看效果图

4-1、自定义搜索框组件

我们这里使用自定义组件，需要以下3步

4-1-1、创建自定义组件

首先我们需要创建一个目录专门用来存放自定义组件，然后在其中创建一个新组件，如下所示。

我们先在自定义的.wxml中随意写一句，然后在首页引用这个自定义组件，看看是否可以显示。

4-1-2、声明引用

引用自定义组件时，必须首先在 home.json 中声明引用。

这里我们引用了自定义组件并命名它

4-1-3、使用自定义组件

声明了上面的引用后，我们就可以将其作为组件来使用，如下

这样我们就可以看到这个自定义组件可以显示在我们的首页了

4-2. 美化自定义搜索框

上面我们定义了搜索框组件，并成功在首页使用了它，但是样式不是我们想要的，所以这里需要对样式进行美化。

4-2-1、自定义wxml布局

首先我们需要在 wxml 中定义搜索框的布局

我们这里定义的主要是用于点击跳转。 当我们点击这里的时候，我们需要跳转到页面，所以我们需要先创建页面。

至于如何新建页面，我已经讲过很多次了。 不知道的同学可以看看我的基础小程序课程。

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、首页轮播图的实现

本节我们将实现首页顶部的轮播功能。

老规矩，先看效果图

5-1、启用云开发

由于我们的顶部轮播图片需要做成动态数据，所以这个数据必须存储在数据库中。常用的存储数据的数据库有以下几种

由于mysql数据库需要Java、PHP或者自己开发后端，比较麻烦，所以我们*好使用我们云开发自带的数据库。

关于云开发的激活以及云开发的一些基础知识，不是本节的重点。 我之前在云开发基础课程中讲过。 如果你没有云开发基础，可以看看我的云开发课程。

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

也可以去b站搜索‘编程小石头’观看石头哥提供的福利视频课程。

大家开启云开发后，记得在app.js中初始化云开发环境

5-1-1、云开发环境初始化

我们上面创建了云开发后，需要去云开发控制台获取云开发环境ID。

建议大家直接复制这里的云开发环境ID，不要手写，容易出错。

如上图，可以在app.js中初始化云开发环境。 只有初始化了云开发环境ID，才能使用云开发功能。

5-1-2、创建首页轮播图对应的数据集合

我们这里创建一个数据表云开发版校园二手商城小程序技术选型1-2，在小程序云开发中称为数据集合。

如上图所示，我们创建一个名为的数据集合，用于存储首页轮播的图片链接。

5-2、上传图片至云存储

如果我们想要动态更新我们的图片，就必须想办法把图片存储在云服务器中。 云开发的云存储功能可以很好的为我们存储图片。 下面我们教您如何将图片存储到云存储中。

首先进入云开发控制台，找到云存储。

然后进入新建的文件夹，点击“上传文件”即可上传文件。

然后我们可以点击我们上传的任意一张图片来获取该图片对应的链接。

https开头的图片链接可以直接在浏览器中打开。

但https开头的链接是有相应的有效期的。 因此，如果我们的图片是在小程序中展示的话，我们建议您使用以cloud开头的图片链接。

以cloud开头的链接在浏览器中无法显示，但在我们的小程序中可以显示，并且永久有效。

5-3、为轮播图片集合添加图片链接

我们已经能够获取到上面图像的链接，因此我们可以将获取的图像链接添加到我们的轮播图像集合中。

如果我们想在主页轮播中显示多个图像，我们可以向其添加多个图像链接。

这里请记住，字段用于存储每个数据中的图像链接。

5-4. 获取首页轮播图片数据

我们的数据已经全部准备好了。 接下来就是在小程序中请求云端开发数据库中存储的数据。 我们后期只需要更改云开发数据库中的数据，小程序中的数据就可以动态更改。

我们在home.js中定义请求数据的方法如下。

可以看到我们请求数据成功了，但是打印的时候却是空数据。 这是因为我们的云开发数据库权限需要设置为所有人都可读。

因为当我们创建一个集合时，默认是只有创建者才能读写。 因此，当我们直接在小程序中请求时，是无法请求到数据的。 只需将此处的权限更改为所有用户均可读取即可。

让我们再次请求数据。

这时候我们添加的三个图片链接数据就都可以被请求了。接下来我们要把这些数据显示在页面上

5-5、渲染顶部轮播图

我们需要使用 and-item 组件来渲染页面上的顶部轮播图片，所以我们需要在 home.wxml 中定义以下代码。

那么home.js中的代码也需要稍微修改一下。

This way our data can be on the page.

But we have a here

5-6, the image

First set the mode of the so that the is . The mode of image is used here, as shown below.

I will give you the link to the :

The mode mode here can be set to your own needs.

The home.wxml code is as :

The code in home.wxss is as :

It can be seen that our fills the at this time, but there will be

This on the of the mode of our image . As for the mode to be set, you can this to your own . The best thing is that the image is with the . This way there won't be any .

5-7, set up

We need to set up the of the , which is to set some of the . In fact, the have it.

Here we also give you the link, so you can make to your own needs.

I only set the two here

Sixth, there are nine grids on the home page, seven grids, eight , nine pages, ten list pages, pages, and the page is being . 。 .There will also be a video later, so stay tuned.

炫佑科技专注互联网开发小程序开发-app开发-软件开发-网站制作等