微信商城小程序开发：云开发版校园二手商城小程序技术选型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网页管理后台

可视化网页后台使用的视云开发自带的cms（内容管理）在这里

2-1、登录页面

2-2、管理后台

我们可以在这里

查看主页上推荐的产品

功能比较多，我会在视频类中用视频来演示，比较直观。

3. 数据库

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

配套资料1、讲解视频

我会在B站免费为大家提供视频课程，欢迎关注，欢迎来到三联。

2、配套说明

配套笔记分为线上版和线下电子书版。

在线笔记将在csdn上免费给大家，欢迎关注，笔记会持续更新。

3.支持石头哥3-1，源码及配套资源获取

目前，源码和配套资源暂时不免费。毕竟，创建起来并不容易。需要的话，可以私聊石头哥，换米换。

3-2、笔记电子书

我还有一套用于笔记的电子书。也可以私聊石头哥，获取电子书版的配套笔记。电子书笔记方便以后查询知识点，当然要换米。

3-3、配置商城小程序商业版

可以联系石哥配置商城小程序商业版

4. 问题解答(●’◡’●)

此外，Stone Brother 还提供配套的接听服务。当然，在知识付费时代，石头哥需要米来回答。毕竟石哥精力有限，石哥也需要吃面包。石哥推出了包月、包年的答疑服务。学习过程中有任何问题，或者工作中遇到任何编程问题，都可以来石哥

石头哥目前可以回答以下问题

源版本

我目前提供以下两个版本的源码，不同的源码适用于不同的场景。目前重点是模拟支付版，所以源码导入部分一定要仔细阅读。

因为商业版需要营业执照，很多同学不能满足这个条件，所以我这里主要使用模拟支付版。

1.模拟支付版 2.真实微信支付版

真实支付属于商业版。如需商业版，请单独联系石哥。

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

我的源代码会在配套资料中提供给付费用户，年卡用户也可以获得

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、部署云功能

必须部署云目录中的云功能

打开Cms可视化网页管理后台

在我们成功导入上面的源代码并成功初始化云开发环境后，我们将打开cms可视化网页的后端。

2-1、进入云开发控制台激活内容管理（CMS）

如下图，点击激活内容管理（CMS）

点击激活后，会出现如下弹窗，点击确定即可。不要被付款吓倒，官方每个月都会给我们发一定的免费额度。基本能学就够了。

确认了以上之后，我们才开启了现收现付功能，因为使用cms必须要开通现收现付。所以点击再次打开。如下所示

点击激活后，会出现如下弹窗，点击下一步即可。

然后我们需要设置登录内容管理后台的账号和密码，然后点击确定。

然后我们等待内容管理功能被激活，这需要几分钟。

开启成功后，我们可以通过如下地址进入管理后台。

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

以上打开后，就可以通过后台地址登录管理后台了。如下

2-3、创建项目

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

自己输入项目名称和项目id

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

至此，我们的cmd可视化网页管理后台就创建好了。让我们教你如何导入数据。

导入数据及修改数据库权限3-1、cms后台导入内容模型

只需导入我提前为您准备的内容model.json文件

导入后可以看到以下表格

3-2、新建轮播数据

在这里微信商城小程序开发，你只需要在小程序首页上传你想展示在轮播中的图片即可。

上传后别忘了点击创建

可以看到我们小程序首页的轮播图代替了你传递的那个。

3-3、修改轮播数据表的权限

将lunbotu表的权限改为所有用户可读，只有创建者可以读写。

3-4、修改产品表的权限

将商品表的权限改为所有用户可读，只有创建者可以读写。

源代码的一般解释（可选）

首先，让我告诉你pages中的每一页

云函数如下

我会在视频中快速粗略地解释每个页面的代码。此部分可用作选项。后面我会教你写一个自己的校园二手商城小程序。

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

小程序基础学习门户

如果你有小程序的基础，可以跳过上面的基础，直接看下面的。如果你没有小程序的基础，建议先完成以上基础，再看小程序商城的开发。

一、开发准备工作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-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-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 中定义搜索框的布局

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

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

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开头的链接无法在浏览器中显示，但可以在我们的小程序中显示，并且永久有效。

5-3、添加图片链接到轮播收藏

我们已经可以获取到上面图片的链接，那么我们就可以将获取到的图片链接添加到我们的轮播收藏中了。

如果我们的主页轮播要显示多张图片，我们可以添加多张图片链接。

这里要记住，imgUrl 字段是用来保存每个数据中的图片链接的。

5-4、首页获取轮播数据

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

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

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

因为我们在创建homeImgs集合的时候，默认只有创建者可以读写。因此，当我们直接在小程序中请求时，是无法请求数据的。您可以在此处更改所有用户的阅读权限。

让我们再次询问数据。

这时候我们添加的3个图片链接数据都可以请求了。接下来，我们将在页面上显示这些数据。

5-5、渲染顶部轮播

我们想借助 swiper 和 swiper-item 组件来渲染页面顶部的轮播，所以在 home.wxml 中定义如下代码。

那么home.js中的代码也应该稍作修改。

这样我们的数据就可以显示在页面上。

但是我们这里有个问题

5-6、优化轮播

首先设置图片的模式，使图片被覆盖。这里用到了image的mode属性，如下图。

我会给你官方文档的链接：

这里的模式裁剪模式，你可以根据自己的需要进行设置。

home.wxml的代码如下：

home.wxss 中的代码如下：

可以看到此时我们的图片填满了屏幕，但是会有裁剪

这取决于我们图像组件的模式裁剪参数的设置。至于设置哪种裁剪模式，你可以根据自己的业务场景来决定。最好的是设计的图片完全成比例。这样就不会出现种植问题。

5-7、设置自动旋转

我们要设置轮播等的自动轮播，其实就是设置swiper组件的一些属性。其实官方已经给出了。

这里也给出了对应官方文档的链接，大家可以根据自己的需要进行设置。

我这里只设置了以下两个属性

六、首页九个方块，七，特色产品八，产品分类页面九，产品列表页面十，搜索页面十一，搜索结果页面不断更新。. . 稍后会有配套视频讲解，敬请期待

【昱远信息系统定制开发】