最近在写一个活动小程序，其中有一个抽奖组件，测试的时候发现Canvas在Ios下的渲染问题。

如果用户使用苹果设备，按住Canvas绘制区域时滑动页面，会导致页面卡死，只有重启小程序才能恢复。

但是Android用户却没有任何问题。

初步排查

初步排查怀疑是Canvas这种原生组件在绘制的时候出现了问题导致的。

但是查询微信官方文档论坛，发现有人遇到了同样的问题。

原生组件渲染问题的官方回复，后续版本修复

但是这篇提问是在19年5月份发的，微信官方就是10月实现了原生组件同层渲染，来解决这个问题。我检查了下基础库版本，是2.21.2，远超过要求。

最近要快速开发个小程序，心想着要是按微信推荐那样开发得累死，所以研究了下如何使用mpvue+Vant+npm快速构建微信小程序。

基础架子

首先用mpvue来拉一个基础的架子，这样方便我们后续集成一些其他的东西。

#安装vue-cli，有可以跳过
npm install -g vue-cli@2.9

#使用vue-cli创建mpvue项目
vue init mpvue/mpvue-quickstart 你的项目名

#安装依赖啥的
cd 你的项目目录
yran
yarn dev

集成npm

首先在你的项目目录下，新建lib目录，用处存放第三方npm包。

我在真机调试下，调试小程序Canvas，一直无法绘制，我以为是Echarts不兼容导致的。

实际上，这TMD的是微信开发者工具的问题，真机和模拟器都没问题。