一天实现一个产品类的小程序

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/qq_36070288/article/details/102501835

小程序依然采用mpvue+云开发实现！本文只介绍功能，如果有问题欢迎留言，乐意解答。

小程序由来

前几天我舅跟我说，他买的小程序提示长时间未使用可能会被冻结，简单看了下他小程序的功能，就是产品的展示，没其他功能，舅还说花了2万块，我说你这钱完全是打了水漂，等我有时间给你重新做一个。

界面展示

首页

产品详情页

 

个人中心页

 

 在线留言页

关于我们页

留言列表页 

功能介绍

 首页

1. 轮播图不用过多介绍，轮播图右下角的数字是自己手写的；
2. 搜索框，没有另起一页，直接输入可实现动态搜索产品；
3. 产品列表页，默认一页加载6条；
4. 每个产品右上角可能会出现hot标志，这里是否显示hot的条件是浏览量大于5，后面可以适当增大这个数字；

产品详情页

由于我舅提供的资料确实太少，所以详情做的难免有点粗糙，后面如果他有心想好好介绍他的产品我再好好改改

1. 详情页banner图，可预览；
2. 这里有个浏览量，即当进入详情走一遍针对这个产品浏览量+1的云函数，云函数实现了两个功能，先count数+1；后返回当前产品的详情内容；
3. 底部fixed一个按钮，方便用户去联系我舅咨询购买；

个人中心页

为了好看，这里还是放一下用户头像和姓名 

1. 默认进个人中心页，用户未授权，一旦用户授权后查看用户权限是否能查看留言列表功能，这里通过判断openId，这里的做法是当openId是我舅本人的时候，才展示留言列表栏，方便他进入留言列表页与客户联系；
2. 留言列表栏有个计数红点，红点个数通过云函数去读取数据库留言列表中read为false的项数之和；
3. 之所以要做这个留言列表栏，是为了方便我舅管理，不至于要我去为他提供一个后台管理吧；

在线留言页

为了凸显简单明了，这里要填的都是必填项 

1. 姓名，手机号，想要买的设备名称；
2. 手机号做了简单的校验，正则：/^1[3456789]\d{9}$/
3. 提交成功后给个提交成功的提示返回到个人中心页；

关于我们页

1. 由于能利用的资源实在匮乏，所有内容都是自己网上查找；

2. 符合自己的审美就先凑合用；

留言列表页 

1. 默认每一项当管理员第一次看到的时候，右上角会有一个小红点；
2. 一旦管理员拨打了某项客户的电话，我们这里走一下update相关的云函数，将这一项的read置为true，重新读取列表数组，则红点消失；
3. 当返回个人中心页时，建议使用onShow让数据重新渲染，可以动态更新计数小红点；

欢迎体验：