vue组件实践-开发图片预览

甲方需求

开发一个像微信朋友圈图片预览界面，可以左右滑动查看图片

需求分析

了解客户基本需求，从需求点上去获取功能需求与具体的代码实现，需求分析也是很重要滴~~

需求分析.png

功能分析

根据需求分析实际上代码要实现的需求，是否需要改善，或则选择合理的方案，不要客户的需求就全盘接受，需要适当权衡客户所需。所以继需求分析后就是功能分析，该功能具体实现有什么难点，是否需要调整方案等。

功能分析.png

版式设计

虽然对于许多开发人员而言认为并不需要会什么设计，但是作为新一代的开发人员会点相关的技能还是有必要的，至少自己脑海里得有一个图形知道自己要做什么，这样可以在设计师未设计前提前做好准备，先人一步。

版式设计

开始开发

开始开发是否也不要立马就拿起键盘就一波走，管他三七二十一就是干，万一卡带了怎么办，那么就理一理功能实现思路走走流程吧。

开发流程导图.png

HTML代码

CSS样式代码

JS功能代码

测试调用

接下来开始在父类组建中使用组建：
1.引用组件，使用 import 名称 from 路径
2.在template中写入组建名称，注意以标签的方式，如果有下划线可以用大写单词首字母拼接。
3.需要在组件标签上写上对应的传参或则回调方法。

知识点解析

1.scoped属性：
在style设置该属性，表示该样式只适用当前模板下；如果想要在该样式下使用预处理语言less,配置好less加载引擎后在style标签上添加lang="less"就可以使用。
2.父组建向子组建通信
需要使用props，它可以是一个json对象，也可以是一个数组，如:

props{value1:String,value2:Array}，
props["value1","value2"]

*注意写好参数类型语法报错
3.子组件向父组建通信
需要使用emit(方法名，参数)调用，如：

this.$emit('onmaskclose', false);

*其中方法名使用全小写，不然可能会出问题。
4.watch的作用
用于监听data中值的变化,大概的使用方式：

export default {
    data: {
      valueName: 'abc'
    },
    watch: {
      valueName(newValue, oldValue) {
      // 值更新
    },
     immediate: true, //关键
     deep: true
    } 
}

5. 加载延迟回调：

this.$nextTick(() => {
    //延时回调代码
})

nextTick是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM。
6.在编写代码时要保持代码整洁：
*变量或者定义方法尽量保证命名规范，见名知意；
*代码中尽量不要出现重复功能代码块，能够封装的就封装起来；
*代码编写过程中写好注释，不要认为自己能够看懂或则都是英文会英文的都能看懂之类的想法。

甲方新增需求三连（甲方加钱￥2000）

需求1连：

需求内容：当图片大于一张时，顶部显示总张数与当前张数，底部根部添加滑动指引，可以点击具体指引跳转具体某一张图。
完成状态：待完成

需求2连：

需求内容：当图片大于一张时，添加手势滑动切换，手势滑动到最后一页后从头开始。
完成状态：待完成

需求3连：

需求内容：当图片大于一张时，图片可点击跳转打开对应图片链接。
完成状态：待完成

甲方更改需求三连（甲方加钱￥5000）

需求1连：

需求内容：查看当前图片时，支持图片放大缩小。
完成状态：待完成

需求2连：

需求内容：如果当前图片为全景图片时，可支持360度全景查看视角，并支持陀螺仪旋转查看。
完成状态：待完成

工具&环境

*思维导图工具：MindMaster
*原型图工具：Mockplus
*开发IDE：HBuilder
*编译环境：node+npm

结语

本篇文章也算自己在平时开发中的一些总结，并且对此进行记录，希望能够给看这篇文章的你们也能留下一点点收获。
最后提醒自己：
一切的焦虑不安都源自于自己不会总结与归零，还有让自己从零开始。