# h5-share

**Repository Path**: yangjunjun/h5-share

## Basic Information

- **Project Name**: h5-share
- **Description**: 介绍 h5c 的幻灯片
- **Primary Language**: HTML
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://yangjunjun.gitee.io/h5-share
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2017-03-21
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

使用vue.js开发在线h5编辑器的一次总结

1. 开发思路 

组建一个大的json

2. 调试 
  chrome 
  断点, debuger 语句
  vue Devtools

2. 遇到的问题
  
  响应式 ( 数据变，视图不变化 )

3. vue 的两个特点 
  1. 响应式
  2. 组件化

4. 如果利用 jquery plugin 
  1. 拖曳
  2. 缩放
  
  问题
  需要在 dom 插入到 document 才起作用


5. 引入 vuex 
  开发 撤销和恢复 功能

6. vue 1.0 -> vue 2.0 升级（未确定）

## 目的

希望你们了解这样一种在线编辑器的开发思路，已经使用 vue 来辅助开发的好处以及可能遇到的问题。以后可以自己很快的开发类似的项目，
比如微信小程序，图片编辑器，表单生成器之类的项目。


让我先看一下，今天要讲的这个h5 编辑器的目的是什么，就是制作这样一种
h5 页面（有的叫h5幻灯片，不过市场，营销人员一般叫 h5, 咱们这里也就叫 h5 把，不然叫 html,css,js 编写的页面，太长了，咱们搞技术也不要太纠结这些名字问题了，在具体语境下大家都知道是什么就可以了。

我们看看都有什么，
1. 有很多页面
2. 页面有很多元素（文字，图片，按钮，表单）
3. 还有动画

如果我们数据的角度想想想，这个h5, 我们会发现，

多个页面就是数组
页面内的元素就是数组的内容
每中元素就是一个对象，对象有很多个属性（位置，颜色，内容等等）
动画（也是对象的属性）

好了，大家再想一下，这个如果用代码来表示，具体的来说用 json 来表示是什么样子的

[图片, h5 json ]

所以我们的 h5 编辑器的最终目的就是创造，编辑这样的一个 json 

[图片，h5  json]

[打开页面, 在线 h5 编辑器]
(一个高手花一晚上时间，用磁铁在磁盘上纯手工刻出一个win95系统出来）
如果编辑器挂了，其实我也可以利用这个手工编辑器来写 h5, 不过就是没有实时看到效果。所以我们还是要用我们的编辑器来做这个事情。

所以我们的 h5 编辑器本质山就是一个这就是这一个 json 编辑器，可以新建，编辑，
预览，保存等等。

然后我就想到了这个：（vue 官方示例todoMVC,）

【图片 https://fiddle.jshell.net/yangjunjun/0tv522wz/2/show/light/】

【操作】

这个 todoMVC demo 的实质也是在编辑一个 json 实质我们的一样，
再看一下代码，也很简单，说明我们使用 vue 来开发是可以的，可能还非常方面

【图片 h5c 编辑器】

页面的操作（增加，删除，复制，选中，排序？）
页面元素的（增加，删除，复制，选中，排序，具体属性的编辑）

这部分 vue 的特性

1. 响应式
【演示 h5c编辑器， 左边，中间，右边同时改变】
 
2. 组件化
 页面管理
 主编辑区域
 侧栏编辑器
 页面上的元素
 弹窗，滑动条


这部分遇到的问题：
1. 修改数据，没有响应

解决问题

调试 
1. chrome 浏览器
2. vue Devtools 是 chrome 的一个扩展
3. debugger; 打断点

## 讲一个组件开发的列子

具有 drag, resize 功能的 <drag>


## 2. 开发过程

1. H5（JSON）的编辑 
  增加页面，删除页面，复制页面
  页面元素的增加、删除，排序
  元素属性的编辑
2. 编辑的可视化
3. 插件的使用 (iScroll, jQuery drag, resize)
  iScroll ，数据改变，视图也改变，但是视图是异步改变，所以是要用 vm.$nextTick();
  jQuery drag, resize, 主要使用 <drag> 组件，其实要注意 this 的指向问题
4. 撤销，重做功能，引入 vuex

## 4. 总结

1. 数据驱动视图，数据第一
2. 组件化（业务组件化，功能组件化）
  功能细分，方面大家分工合作，也易于维护，升级
  代码复用
3. 学会调试（chrome 开发这工具，Vue Devtools, debugger, 打断点）