三爱公众号开发个人部分详解

时间：2020-06-03 18:51:36 阅读：47 评论：0 收藏：0 [点我收藏+]

三爱公众号个人开发部分思路

1、开发前准备

1.1、分析项目需求

1.2、理清项目流程走向

1.3、查找公共组件，避免重复开发相同组件

1.4、各个成员分配任务（我们根据个人擅长方面分配）

1.5、我主要做三爱首页、三爱搜索页、三爱购物车、三爱医生简介详情页、三爱医生预约时间页、三爱医院地址和医生展示页，我这边对于底部的Tabbar切换占有率超过60%，这个公共组件就由我来做

1.6、分析完我的几个页面、经过开会商议、我们决定使用Vue+Vant来实现三爱公众号的项目

2、我的任务各个页面效果图和分析

1、首先我需要先用vant ui实现底公共Tabbar组件

这个组件我用到了路由跳转，点击变色和跳转相应页面

注意！我需要在Tabbar组件中的mounted生命周期函数中通过window.localtion.href的末尾取值实现刷新Tabbar变色不混乱问题

2、三爱首页

页面分析

1、头部：搜索需要点击跳转搜索页（头部搜索我选择使用vant）

2、轮播图：使用vant ui的轮播图

3、每日养生：使用vant ui 的NoticeBar 通知栏

4、下边的样式用的fontSize官网的class图标

5、下边的商品列表下边还要用到就要拆分成一个组件使用了，加入购物车需要一个弹出层，vant有相应的效果，为提高编码效率使用vant ui 较多，加入购物车我们可以把数据存在localStrage里边，避免刷新丢失

3、三爱搜索页

[ 技术分享图片

页面分析

1、头部搜索没有按钮加入回车事件双向绑定value值

2、搜索历史应该是个数组，当我们回车事件触发后把value值添加进这个搜索历史数组中

3、清空历史记录这个操作，当点击的时候让搜索历史这个数组等于一个空数组即可

4、下边的热销产品数据就是跟上边首页的数据就是一样的我们就可以把它拆分成一个公共组件引入进去，

4、购物车页面

[ 技术分享图片

页面分析

1、头部有一个编辑，当我们点击的时候编辑字体变为完成，底部的总价元素隐藏，结算变为删除，可以通过vue指令v-show来完成，实现选中删除，当我们点击编辑的时候让所有的商品的绑定的布尔值等于false，点击删除循环判断布尔值为true的情况下玄幻购物车数据删除，然后v-show取反

2、内容部分分为三块，左侧复选框，同样使用vant ui毕竟样式比较美观，中间图片，右边商品详细信息，使用flex布局，1:2:4划分，注意右侧有一个步进器，由于vant样式有限我选择自己写，数量绑定商品的num，判断如果商品数量等于1的时候，减号按钮隐藏，如果大于1，显示，注意！要通过visitility属性进行隐藏显示，保留其物理空间，如果使用display，会造成显示隐藏的时候页面跳动，当我们加减操作时传过去一个商品id，通过id找到商品在数组中对应的位置，操作其数量。注意！这里我们购物车数据要用到监听或者计算属性，避免出现页面数据不实时更新问题

3、单选反选操作，我们的需求是选中计算价格，到这边我们会发现一个需求，就是商品加入购物车的时候需要用到一个属性绑定单选框，默认设为false，通过v-model绑定，在我们的计算属性里边计算价格，我们可以循环购物车数据，然后判断我们的这个属性是否等于true，如果等于true，则参与计算，还有一方面，就是单选全部选中后，全选自动选中，这个方法就需要我们的全选也要v-model绑定一个布尔值，默认为false，单选的事件触发时，我们通过every方法判断是否全部选中，如果every方法的返回值为true则全选按钮绑定的值赋值为true

every方法地址https://www.runoob.com/jsref/jsref-every.html

当我们点击全选后循环所有的商品让他们绑定的布尔值等于全选绑定的布尔值