前端
一次h5开发踩坑记录
GzhiYi · 2018-10-15

时间

这个h5开发时间是在国庆前两天,通过比较短的时间完成开发、设计稿还原以及上线。在这记一下踩过的一些小坑或者说是小技巧。

使用框架

原本想直接了当用jQuery,毕竟用jQuery开发是真的快而且紧急情况可控。缺点是写起来会比较乱,维护也比较麻烦。但最后还是放弃,想尝试新的技术。最后试用了几套框架|库后,决定使用vux进行编写。

Vux

tim 20181015093748

使用原因:

  1. 使用vue-cli构建,几乎不用配置其余东西,内建命令让开发和打包生产版十分便捷。
  2. vux有大量组件而且github上有非常多的issue记录,遇到问题可以快速定位解决。
  3. vue生态给力,写起来舒舒服服。

主要坑

由于第一次用vux写h5,难免会遇到不少问题,不仅是框架本身的问题,还有其他业务上需要攻克的问题。就记录下踩过的坑:

  • background-image在部署的时候路径不对。

修改vue-cli的build文件夹下的utils.js为如下: util

这样在 CSS 中:background-image: url("./assets/bg.jpg"),不管是在开发环境下还是在生产环境下,背景图都可以读出来

  • 怎么生成图片并在微信端支持长按保存图片?

以前也做过类似的,但没做过微信支持长按保存图片的。首先当然是要用到将html转为canvas然后再考虑转为图片。

  1. 库:html2canvas
  2. 用法非常简单,指定挂载的元素进行转化。
html2canvas(document.body).then((canvas) => {
    console.log(canvas);    // 这个是生成的canvas
    const base64Code = canvas.toDataURL("image/png");    //将生成的canvas通过api`toDataURL`转为base64格式图片。
});
  • 怎么保存图片?

不是已经生成图片了吗?生成就可以可以保存了。没错,但是业务问题,在生成的图片上还要包含可点击的按钮和一个超链接。可以想到,可以将按钮和超链接定位到生成的图片上。可是存在这样的问题,不同的移动端呈现的结果可能不一致,这会直接导致页面显示出现问题,进而影响使用体验。这种覆盖的想法最后放弃了。

最后的做法:将生成的图片的透明度设置为0覆盖到原本要渲染的元素上,然后提高可点击按钮的层级。 tim 20181015100607

  • 存在无法分享到朋友圈的问题

微信浏览器唤起的分享菜单,存在点击分享到朋友圈出现卡死问题。 排查过程: 在页面操作第一步和第二步都不会有这个问题,在生成图片的第三步就出现无法分享的问题。在想是不是生成图片太大了导致太卡顿了?在开发调试过程,打开vue开发工具查看第三步data的时候,发现非常卡顿。这样就可以认定是图片造成的卡顿了。

最后找到的原因:canvas生成的base64编码的图片码十分长,直接导致vue处理的时候出现卡顿严重进而影响页面分享效果。最后的解决方案:将base64转为file上传,最后展示返回的url图片。

  const base64Code = canvas.toDataURL("image/png")
  // 去掉url的头,并转换为byte。以下步骤生成JavaScript blob文件
  const bytes = window.atob(base64Code.split(',')[1])
  const ab = new ArrayBuffer(bytes.length)
  const ia = new Uint8Array(ab)
  for (let i = 0; i < bytes.length; i++) {
    ia[i] = bytes.charCodeAt(i)
  }
  let files = self.blobToFile(new Blob([ab], { type: 'png' }), 'post')
  let formData = new FormData()
  formData.append("file", files, `myPost-${new Date().getTime()}.png`);
  self.$http.post(config.fileUploadURL, formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  }).then (uploadRes => {
    if (uploadRes.data.code === 200) {
      self.imageBase = uploadRes.data.url
    }
  })
  // blob图片转为文件的函数
  blobToFile (theBlob, fileName){
    theBlob.lastModifiedDate = new Date();
    theBlob.name = fileName;
    return theBlob;
  }

成品

虽然国庆过了,但是还是贴出来哈哈。 活动

如果你对这页内容有疑问,欢迎联系我!
邮箱
github