春节活动小结

此次春节活动为拼图活动。
用户选择一些元素，进行位移、旋转、缩放以及层级堆叠等操作，拼成一张自己的专属图片。
流程大致为：服务端读取当前进行的阶段，加载不同对应资源 — 用户选择自己喜欢的元素，进行操作，完成拼图 - 生成带logo的最终拼图上传服务端。

开发

1. 页面划分

编辑页

完成页

---

页面切换(v-if与v-show)

页面切换的实现方式主要有两种，一种是通过vue-router（或v-if），在页面切换过称中，会完整触发组件的生命周期，每一次渲染都是新的组件；另一种方式是通过v-show模拟，只是一种隐藏。
这里之前的需求是在完成页，可以返回到编辑页继续编辑，如果使用v-if的方式，编辑页中的组件状态无法保存，所以使用的v-show的方式实现编辑页的隐藏。
编辑完成页，需要在页面加载完成之后触发上传，所以需要在切换到编辑完成页时，执行回调，这里使用了v-if。

2. 组件划分

• TheTitleBar——全屏标题栏

  props

  参数	说明	类型	必填	默认值
  title	标题	String	是

  Event

  事件	说明	回调参数
  back	返回按钮被点击
  close	关闭按钮被点击

• TheConfirm——二次确认弹窗

  props

  参数	说明	类型	必填	默认值
  text	确认文本	String	是

  Event

  事件	说明	回调参数
  cancel	取消按钮被点击
  confirm	确认按钮被点击

• SelectTabs——选择区标签切换

  props

  参数	说明	类型	必填	默认值
  tabs	标签列表	Array	是
  activeIndex	当前激活标签	Number	是

  Event

  事件	说明	回调参数
  changeTab	标签被点击	需要激活的标签

  ps：

  因为切换标签时，需要切换对应内容，所以activeIndex是作为props传进来的，修改需要changeTab传递出去。
  tab.active的动画效果。

• SelectSwapper——横向滚动

  props

  参数	说明	类型	必填	默认值
  activeIndex	当前激活标签	Number	是
  maxIndex	最大数量	Number	是

  Event

  事件	说明	回调参数
  changePage	滑动范围超过阀值，需要触发改变页面	是否是向左滑动

  ps：

  这里既可以左右滑动，又可以上下滑动，需要在第一次触发touchmove的时候，判断滑动方向。理论上在touchend中也应该对方向判断，实际实现上，感觉不做判断更好（iOS多次在第一次触发touchmove的时候，判断出现偏差，好像和-webkit-overflow-scrolling有关）。
  isMoveHorizontal需要三个状态：true、false、undefined。

3. CanvasItem

4. iPhone X适配

<meta  name="viewport" content="viewport-fit=contain" />

`viewport-fit`主要有`contain`和`cover`。  
`contain`描述的为缩放视口以适合显示在内的最大矩形，`cover`是会填充整个设备。  
感觉上应该是使用`contain`，但是大部分适配中是使用的`cover`，使用安全区域变量适配。

top: constant(safe-area-inset-top); /* iOS 11.0-iOS 11.1 */
top: env(safe-area-inset-top);
bottom: constant(safe-area-inset-bottom); /* iOS 11.0-iOS 11.1 */
bottom: env(safe-area-inset-bottom);
```  
目前我做的都是用的`absolute`来适配的。

#### 5. 非纯色背景

background-repeat和min-height结合使用。

## 调试

#### 1. PC端

- chrome
- vue-devtools

#### 2. 移动端

- charles——接口
- vconsole——JavaScript、接口
- chrome的remote devices——样式、JavaScript、接口

    ```java
    // 必须从您的应用中启用 WebView 调试。要启用 WebView 调试，请在 WebView 类上调用静态方法
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
        WebView.setWebContentsDebuggingEnabled(true);
    }

• Xcode + safari

  

iPhone X适配调试
1. 添加meta标签
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
2. 在Xcode开启的iPhone X模拟器中打开网页
3. 添加到桌面
4. 桌面Safari中开发标签中，选择相应模拟器