甲方需求
开发一个像微信朋友圈图片预览界面，可以左右滑动查看图片
需求分析
了解客户基本需求，从需求点上去获取功能需求与具体的代码实现，需求分析也是很重要滴~~功能分析
根据需求分析实际上代码要实现的需求，是否需要改善，或则选择合理的方案，不要客户的需求就全盘接受，需要适当权衡客户所需。所以继需求分析后就是功能分析，该功能具体实现有什么难点，是否需要调整方案等。版式设计
虽然对于许多开发人员而言认为并不需要会什么设计，但是作为新一代的开发人员会点相关的技能还是有必要的，至少自己脑海里得有一个图形知道自己要做什么，这样可以在设计师未设计前提前做好准备，先人一步。开始开发
开始开发是否也不要立马就拿起键盘就一波走，管他三七二十一就是干，万一卡带了怎么办，那么就理一理功能实现思路走走流程吧。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
}
}
- 加载延迟回调：
this.$nextTick(() => {
//延时回调代码
})
nextTick是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM。
6.在编写代码时要保持代码整洁：
*变量或者定义方法尽量保证命名规范，见名知意；
*代码中尽量不要出现重复功能代码块，能够封装的就封装起来；
*代码编写过程中写好注释，不要认为自己能够看懂或则都是英文会英文的都能看懂之类的想法。
甲方新增需求三连（甲方加钱￥2000）
需求1连：
需求内容：当图片大于一张时，顶部显示总张数与当前张数，底部根部添加滑动指引，可以点击具体指引跳转具体某一张图。
完成状态：待完成
需求2连：
需求内容：当图片大于一张时，添加手势滑动切换，手势滑动到最后一页后从头开始。
完成状态：待完成
需求3连：
需求内容：当图片大于一张时，图片可点击跳转打开对应图片链接。
完成状态：待完成
甲方更改需求三连（甲方加钱￥5000）
需求1连：
需求内容：查看当前图片时，支持图片放大缩小。
完成状态：待完成
需求2连：
需求内容：如果当前图片为全景图片时，可支持360度全景查看视角，并支持陀螺仪旋转查看。
完成状态：待完成
工具&环境
*思维导图工具：MindMaster
*原型图工具：Mockplus
*开发IDE：HBuilder
*编译环境：node+npm
结语
本篇文章也算自己在平时开发中的一些总结，并且对此进行记录，希望能够给看这篇文章的你们也能留下一点点收获。
最后提醒自己：
一切的焦虑不安都源自于自己不会总结与归零，还有让自己从零开始。