移动开发中项目遇到的问题和总结

我们在日常开发过程中会遇到很多问题，解决之后要及时的总结，当作以后的经验，避免遇到类似问题又不会了。这里我总结了我开发过程中遇到的问题，具体如下

html2canvas实现生成图片异常

html2canvas(this.$refs.imageDom, { backgroundColor: null, useCORS: true }).then(canvas => {
     //延迟执行确保万无一失，玄学
    setTimeout(() => {
    //转成图片，生成图片地址
         this.createFile(canvas.toDataURL("image/png"))//可将 canvas 转为 base64 格式
          }, 0)
      }).catch(error => {
    });

问题如下所示：

1. 生成图片区域中的dom元素中有img标签，生成图片后，img图片加载不出来

• 添加useCORS:true属性；
• 给要生成canvas的DOM中包含的每一个img标签添加crossorigin="anonymous"属性；
• 确保你的图片CDN服务器支持CORS访问，也就是会返回Access-Control-Allow-Origin等响应头。

2. 不支持box-show、box-radius
3. 生成图片背景色异常，需要在异常的背景色处的dom块元素，设置背景色，一般设置为白色

dart-sass

dart-sass使用前需要注意几点：

• dart-sass 和 node-sass都是用来将sass编译成css的工具，所以都依赖sass-loader。但node-sass 与 node.js 版本相关联，这就导致，一旦本地 node.js 升级，就会出现 node-sass 无法工作的情况
• npm 上的 dart-sass 包已被弃用，直接更名为 sass
• dart-sass 不支持/deep/，要改成::v-deep

常出问题

1. Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

主要是在写css中使用/出的错

css语法里面已经添加了/作为分隔符的使用。sass作为css的超集，也会跟进这个改动，所以sass2.0的时候 /就会被弃用。 但是在calc函数里面仍然是有效的，也就是说，我们以后用除法的时候，直接在calc函数里使用，或者除2的时候改成*0.5就没有问题了。本来css就是只在calc支持除法，所以问题不大。 官方给出的解决办法是math.div()方法，当然官方不会让你一个一个修改，给出了批量修改工具。

安装sass-migrator

yarn add -g sass-migrator

批量修改

sass-migrator division **/*.scss

编译之前

margin-right: #{$--tooltip-arrow-size/0.55};

编译之后

margin-right: #{math.div($--tooltip-arrow-size, 0.55)};

2.SassError: expected selector. /deep/

在写css中使用/deep/出的错，将/deep/替换成::v-deep即可。

3.SassError: expected identifier