手把手带你从零开始写一个云开发版的微信商城小程序

2021-01-17 14:57 389人阅读评论(0)

我们经过前面小程序基础和云开发基础的学习，今天就来带大家实现一个综合项目，上线一款属于自己的微信商城小程序。

小程序基础学习传送门

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

小程序前端项目模块

1，商品首页
2，商品列表页
3，购物车
4，授权登陆页
5，商品搜索页
6，商品收藏
7，商品分类（含排序功能）
8，商品详情页
9，支付结算页面
10，订单列表
11，个人中心
12，意见反馈
13，会员功能
14，管理员功能
15，联系客服

云开发后台模块

1，云开发管理商品
2，云开发实现搜索功能
3，云开发实现用户管理
4，云开发实现支付功能
5，管理员功能

一，开发准备工作

1-1，注册一个小程序

这里需要给大家强调下，我们这里是实现商城小程序，所以我们就必须注册一个属于自己的小程序，关于小程序的注册，建议大家去看下我前面的基础视频。我们后面学习支付的时候，会教大家如何把项目切换为企业小程序，所以你如果能直接注册企业小程序最好，如果不能注册企业小程序，就先注册个人小程序也行。
关于注册小程序，我这里说几点

1，一个邮箱只能注册一个小程序
2，注册小程序必须用自己真实身份信息
3，注册企业小程序的话，必须要有营业执照（选看部分）

大家注册只需要去小程序官网就行。

注册的时候选择小程序即可

后面的步骤如实填写即可。如果注册过程中有任何问题，可以在下面留言。

1-2，拿到小程序Appid

我们上面注册好小程序以后，可以去小程序网页后台拿到appid

我们拿到appid后最好记在一个记事本上，每次都要来小程序后台拿比较麻烦。

1-3，下载开发者工具

工欲善其事必先利其器，我们开发小程序也是一样，这里必须先下载微信官方提供的小程序开发者工具。当然了，市面上也有别的一些开发工具，这里石头哥是建议大家使用官方提供的工具，毕竟官方的一些更新我们能更快的使用到。

下载安装就比较简单了。只需要去官方下载地址下载即可。

开发工具下载地址如下：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
这里的安装都是傻瓜式的，我就不再啰嗦了。

1-4，创建属于自己的微信小程序项目

上面开发者工具安装好以后，我们双击打开即可。然后新建一个小程序项目

然后填写一些项目的信息

这里强调一点，后端服务一定要记得选择不使用云服务。因为你选择使用了，项目里会给我们创建大量的无用目录，你还得一个个删除。
项目创建好以后如下

到这一步我们项目就创建好了，下一节就来开始正式的开发我们自己的商城小程序了。

二，初始化项目

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

2-1，创建图片目录用来放置图标

我们正常创建的默认项目是一个单页面，我们要想实现下面效果所示的多页面就要借助tabBar来实现多页面。

我们要使用tabBar就需要用到图标，所以我们要创建一个放图标的目录。

然后把我提前给大家准备好的图标放到image里即可。

这些图标我会在配套学习资料里给到大家。

2-2，创建多个页面

关于小程序里页面的快速创建我小程序基础里讲过很多遍了，这里就不再啰嗦，直接在app.json里创建下面三个页面即可

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

上面三个页面创建好以后，我们就可以通过tabBar来设置多页面布局了。
在app.json里添加如下配置。

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

到这里我们的项目初始化就完成了。

三，初始化全局样式

我们在小程序里需要多处用到一些公共的，相同的颜色或者字体大小。我们如果每个地方都写上一个颜色值，后期如果需要更换主题颜色时，要修改很多地方，所以我们要把颜色定义一个全局的变量，来供需要使用到颜色的地方使用。这样后期主题颜色有变化时，我们只需要单独改变这个全局的颜色，其他地方使用到这个全局颜色的地方就方便了。所谓前人栽树后人乘凉。

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

我这里先定义一个全局的主题颜色如下：

这里要记住，我们themeColor前面的 - - 是固定写法。只有这样定义的全局变量，才能使用。

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

这里以首页里的一个文字，来给大家演示全局颜色变量的使用。
我们在home.wxml里定义一个demo的选择器

然后在home.wxss里使用

使用全局样式变量的语法也是固定的。必须是var()包裹着变量名。
这样我们就可以在任何需要统一颜色的地方，使用我们定义好的颜色变量了。

3-3，改变navigationBar顶部栏样式。

可以看出我们默认的顶部栏是白色背景，黑色文字。

对应代码是app.json里的window

那我我们如果想变成下面这样的

就要把window里的几个值做下改变。

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

3-4，全局字体大小保持统一

字体大小统一，就比较容易了，我们只需要在app.wxss的page里设置font-size即可，如下

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

四，首页自定义搜索框的实现

我们的搜索框，会在多个页面使用，所以我们这里把搜索框做成一个自定义组件，这样就可以在别的地方很方便的使用我们的搜索框了。
老规矩，先看效果图

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

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

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

首先我们要创建一个专门存放自定义组件的目录components，然后在conpontents里新建一个searchInput组件如下。

我们先在自定义组件searchInput.wxml里随便写一句话，然后在首页里引用这个自定义组件，看能不能展示出来。

4-1-2，声明引用

引用自定义组件时，就要先在home.json里声明引用。

这里我们引用完自定义组件，并命名为searchInput

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

上面声明好引用以后，我们就可以当成一个组件来使用了，如下

这样我们就可以看出，我们的首页里就可以展示出来这个自定义组件了

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

我们上面定义好了搜索框组件，也在首页里成功的使用了，但是样式不是我们所要的，所以这里我们要做样式的美化。

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

首先我们要在wxml里定义好我们搜索框的布局

我们这里定义的navigator主要是做点击跳转使用的，我们这里点击的时候需要跳转到search页，所以我们还要先创建search页

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

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数据库

由于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集合时，默认的是仅创建者可读写。所以我们直接在小程序里请求时，是请求不到数据的。这里把权限改为所有用户可读即可。
我们再来请求下数据看看。

这个时候我们添加的3条图片链接数据就可以全部请求到了。接下来我们就要把这些数据显示到页面上了

5-5，渲染顶部轮播图

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

然后home.js里的代码也要稍做改造。

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

但是我们这里有问题

1，图片没有铺满全屏
2，轮播图的提示点也没有
3，轮播图不能自动滚动
下面我们就来解决这些问题

5-6，优化轮播图

首先设置图片的mode，让图片铺满。这里用到了image的mode属性，如下图。

我把官方文档的链接给到大家：
https://developers.weixin.qq.com/miniprogram/dev/component/image.html
这里的mode裁剪模式，大家可以根据自己的需求设置。

home.wxml代码如下：

home.wxss里的代码如下：

可以看出，我们的图片这个时候撑满了屏幕，但是会有裁剪

这个取决于我们image组件的mode裁剪参数的设置，至于设置那种裁剪模式，这个你可以根据自己的业务场景来定，最好的是设计出来的图片完全符合比例。这样就不会有裁剪的问题了。

5-7，设置自动轮播

我们要设置轮播图的自动轮播等属于，其实就是来设置swiper组件的一些属性。其实官方都有给出来的。

这里也把对应的官方文档链接给到大家，大家可以根据自己的需求去做设置。
https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
我这里只设置下面两个属性

indicator-dots：显示指示点
autoplay：自动轮播
这样我们完整的轮播图功能就实现了。

关于轮播图的点击和跳转，我们后面章节再做讲解，这节主要是带大家实现动态的轮播图功能。

转载：https://blog.csdn.net/qiushi_1990/article/details/111505612

查看评论

飞道的博客