8月项目回顾

发表于 | 分类于

开车了项目回顾总结

问题回顾（技术问题，业务问题皆可，或者项目中使用的新技术，插件，解决方案）

问题1 safari浏览器抖动问题

问题描述：(问题的背景，出现场景)

描述： Safari浏览器，多个input框聚焦输入，当input失去焦点时，页面会整体往上移动，导致底部留白，并且页面其他按钮错位？

解决方案（代码，截图）

解决： 当前页面，没有激活状态的input框是，在将页面复原。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 可以附上代码
  const reg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/;
  let msg='';
  if (this.boardNumber.replace(/^ +| +$/).length === 0) {
    return;
  }
  if (!reg.test(this.boardNumber)) {
    msg = '请输入正确的车牌格式';
  }
  if (msg) {
    this.$toast.show({text: msg})
  }
  if (document.activeElement.tagName.toLowerCase() !== 'input') {
    window.scrollTo(0,0);
  }

问题2 clipboardjs多个按钮复制

问题描述：(问题的背景，出现场景)

vue组件中循环渲染‘复制’按钮，当全局只创建一个clipboard对象或者不动态绑定‘文本复制源’，那么每个按钮复制的文本会相同？

1
2
3
4
5
6
// 动态指定文本源
new ClipboardJS('.btn', {
    target: function(trigger) {
        return trigger.nextElementSibling;
    }
});

解决方案（代码，截图）

在每个按钮的点击事件中，均创建一个clipboard对象，并且动态地绑定按钮对应的文本元素

1
2
3
4
5
6
7
8
9
<input
  type="text"
  :value="awardInfo.snCode"
  id="sncode"
  :class="{['sncode'+index]:true}"
  :ref="'sncode'+index"
  style="position: absolute;opacity: 0;top: -0.4rem;"
/>
<button class="operator"  :class="{['copyBtn'+index]:true}" @click="copyLink(awardInfo.prizeType)" >复制劵码</button>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 copyLink(prizeType) {
  console.log(1111)
  let _this = this,
    clipboard = null;
  clipboard = new this.$clipboard(`.copyBtn${_this.index}`,{
    target: function() {
      return _this.$refs['sncode'+ _this.index]
    }
  });
  // }
  this.domPoint('KZQ003001','点击复制券码');
  clipboard.on('success', function() {
    // console.log(_this.text)
    _this.$toast.show({
      text: '复制成功',
      type: 'success'
    });
    // clipboard.destroy();
  });
  clipboard.on('error', function() {
    _this.$toast.show({text: '复制失败', type: 'fail'});
  });

}

问题3 动画按顺序执行

问题描述：(问题的背景，出现场景)

项目中遇到，一次可能走2段或多段弧线的问题，如果一次循环执行运动函数，那么会执行跳到最后一段弧线初始位置并执行动画，前面的弧线没有动画效果？

1
2
3
4
5
6
7
// draw 是每段曲线的运动函数
 let arr = this.points.slice(currentSiteIndex, targetSiteIndex);
  const lastIndex = arr.length - 1,
    self = this;
  arr = arr.forEach((item, index) => {
      draw.apply(self, [...item,150,20,true])(3)
  })

解决方案（代码，截图）

采用动画队列的思想，前面弧线运动动画执行完后，再执行数组队列中的下一段弧线。

1
2
3
4
5
6
7
8
9
// nextRun
function nextRun(self,arr,index) {
  let point = arr[index];
  draw.apply(self,point)(3)
}
// draw 动画执行完，判断
if (index <= self.toRunPoints.length-1) {
  nextRun(self,self.toRunPoints,index)
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 // 根据起点查找弧线，执行
runCar(currentSiteIndex, targetSiteIndex) {
  let arr = this.points.slice(currentSiteIndex, targetSiteIndex);
  const lastIndex = arr.length - 1,
    self = this;
  arr = arr.map((item, index) => {
    if (targetSiteIndex == 12 && index == lastIndex) {

      /*
        * 需要判断最后一段弧线
        * draw.apply(self, [...item,150,20,true])(3)
        */
      item = [...item, index, 150, 20, true];
    } else {
      item = [...item, index];
      // draw.apply(self,[item)(3)
    }
    return item;
  });
  this.toRunPoints = arr;
  // 动画按队列执行
  nextRun(self, arr, 0);
}

问题4 Http 转态为0

问题描述：(问题的背景，出现场景)

开车了项目‘看咨询添加加速机会’，需要跳转页面，inituer接口没有完成，导致加速机会没有及时刷新？

解决方案（代码，截图）

initUser接口的状态码为0，是ajax的send没有执行，所以我们需要等咨询请求完成后，再跳转页面和initUser()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 // 看资讯
showInfomation(str) {
  const self = this;
  getInfomation().then(res => {
    const {code, msg} = res;
    if (code == 0) {
      // 初始化
      self.initUser(1).then(()=>{
        window.location.href =
    'https://owner.car.cmbchina.biz/information-h5/details.html?informationId=MAZcLgfZ&popup=true';
      });
    } else {
      window.location.href =
    'https://owner.car.cmbchina.biz/information-h5/details.html?informationId=MAZcLgfZ&popup=true';

      self.$toast.show({text: msg, type: 'fail'});
    }
  });
  if (str!='isnpc') {
    self.domPoint('KZQ001004','点击看资讯');
  }
}

问题5 原生audio在苹果手机不能成功播放

问题描述：(问题的背景，出现场景)

开车了项目要播放‘小车’运动时的背景音乐，使用原生的audio标签在苹果手机中兼容问题。

解决方案（代码，截图）

使用soundjs插件播放音频，注意soundjs与mock数据冲突。
具体代码：

1
2
<title>点亮回家路</title>
<script src="https://operation-kaichela.srv.cmbchina.biz/sound.min.js"></script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 注册音频
mounted() {
    window.createjs.Sound.alternateExtensions = ['mp3'];
    window.createjs.Sound.on('fileload', function() {
      console.log('sound ok')
    }, this);
    window.createjs.Sound.registerSound(require('../../public/car_music.mp3'), 'carMusic');
    // window.createjs.Sound.registerSound(require('../assets/media/btn_music.mp3'), 'btnMusic',1);

  }
// 播放
 carPlay() {
  this.instance = window.createjs.Sound.play('carMusic');
  this.instance.volume = 1;
  }

项目心得/改进/建议（个人或团队）

开车了小结

  1. 项目前期多花些时间，梳理，确认需求，团队应加强沟通，完善好客户的需求，也方便后期的测试。
  2. 对项目有一个概览，对于数据状态的管理需要认真思考，可和同事交流，让代码结构灵活一些，以便后期应对需求改动的情况。
  3. 经过了开车了项目的开发，我对h5嵌套页面这种开发模式有了一定的了解，但是许多地方还是一知半解，比如分享链接参数的传递，首先请求接口
    获取参数，拼接在链接上，通过微信分享，点击链接，会进入后端，后端重新获取参数，再重定向到前端页面。。。 这一系列流程，还是有些不理解，希望在后面的开发过程中，能理解这套方案。
  4. 项目中遇到以前没有用到的插件，可向导师求助，了解基本用法。如果在使用中，出现bug，一定要去官网查看相关API，搜索博客找到API的用法，我在项目中遇到使用clipboardjs多个按钮复制文本相同的问题，就是结合官网和博客解决的。
  5. 前期的话要规划好项目的状态管理，比如项目中有许多弹框，在开车了中有10个左右的弹框，每个弹框都需要一个变量记录其显示与隐藏的状态，并且全部在 home.vue组件中维护，通过sync层层传递到home.vue步骤很繁琐，后面的项目中会尝试在vuex中配置一个弹框字段的对象dialogConfig，每个弹框都有对应的字符串，再使用一个变量isDialogShow来取dialogConfig相应的字段，如果字符相同弹框就显示，isDialogShow直接设置为空就可以让弹框隐藏。

王者荣耀小结

  1. 基本了解了分享助力带参数的流程。首先，前端调用初始化接口获取到自己的userId，然后在微信分享链接后面传自己的userId给后台；用户点击分享链接，后端会重定向到前端的wxIndex.vue微信落地页，这里我们可以从url上面截取到 帮我助力的helpId和微信图像等信息，再通过短链拼接将helpId和微信图像等信息传给后台，后台再次重定向再App首页 ，前端就可以截取到helpId并通过助力接口传给后台，判断助力情况。
  2. 了解了唤醒登录和微信禁止分享功能，代码块已收藏到为知笔记。
-------------本文结束感谢您的阅读-------------