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

小程序依然采用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. 之因此要作这个留言列表栏，是为了方便我舅管理，不至于要我去为他提供一个后台管理吧；
4. 联系咱们栏就是一个打电话功能；
5. 联系地址直接使用微信内置地图查看位置；

在线留言页

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

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

关于咱们页

1. 因为能利用的资源实在匮乏，全部内容都是本身网上查找；

2. 符合本身的审美就先凑合用；

留言列表页

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

欢迎体验：

​