uni-app、Vue3 + ucharts 图表 H5 无法渲染_renderjs+vue3

作者：很楠不爱3 | 2024-02-21 13:05:08

踩

renderjs+vue3

当学习成为了习惯，知识也就变成了常识。感谢各位的点赞、收藏和评论。

新视频和文章会第一时间在微信公众号发送，欢迎关注：李永宁lyn

文章已收录到 github，欢迎 Watch 和 Star。

从问题定位开始，到给框架（uni-app）提 issue、出解决方案(PR)，再到最后的思考，详细记录了整个过程。

当你在业务中不幸踩了开源框架的某些坑，这是你的不幸，但这同时也是你的幸运，因为这是你给自己简历中增加亮点的绝佳机会。

而给开源社区贡献 PR 是你证明自己技术侧拥有 P7 实力的绝佳方式，P7 的评判标准无非是业务和技术，业务上有收益，技术上有深度和广度（别人有的你能做的更好，别人没有的你能有）。

这次整个过程历时 3-4 天，在此之前我也没读过 uni-app 和 ucharts 的源码，所以这里把整个过程分享出来也是给大家一个解决问题的思路。

uni-app、vue3 + ucharts 绘制图表，开发环境正常，但是打包上线后，H5 无法绘制图表，也不报任何错误。

	开发	线上
APP	正常	正常
H5	正常	无法绘制

给 ucharts 的社区提 issue，经过交流，维护者 “怀疑“ 是 uni-app 的 vue3 的 renderjs 有问题，但是他也给不了一个肯定的答复，让去 uni-app 的社区提 issue 而且示例中不能用 ucharts。个人对于该回答持怀疑态度，于是决定自己去定位问题。

<view ...其它属性 :prop="uchartsOpts" :change:prop="rdcharts.ucinit">
  <canvas ...属性 />
</view>
1
2
3

这里有一个知识点需要补充：当 prop 发生改变，change:prop 的回调会被调用，这是 uni-app 框架提供的能力，但官方文档没有提及，从源码中可以看到。

可是打包后的 H5 线上环境，当执行 this.uchartsOpts = newConfig 之后却没有触发 change:prop 事件，所以这看起来似乎是 uni-app 的 view 组件有问题

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/123960