uni-app、Vue3 + ucharts 图表 H5 无法渲染
当学习成为了习惯，知识也就变成了常识。感谢各位的 点赞、收藏和评论。
新视频和文章会第一时间在微信公众号发送，欢迎关注：李永宁lyn
文章已收录到 github，欢迎 Watch 和 Star。
简介
从问题定位开始，到给框架（uni-app）提 issue、出解决方案(PR)，再到最后的思考，详细记录了整个过程。
前序
当你在业务中不幸踩了开源框架的某些坑，这是你的不幸，但这同时也是你的幸运，因为这是你给自己简历中增加亮点的绝佳机会。
而给开源社区贡献 PR 是你证明自己技术侧拥有 P7 实力的绝佳方式，P7 的评判标准无非是业务和技术，业务上有收益，技术上有深度和广度（别人有的你能做的更好，别人没有的你能有）。
这次整个过程历时 3-4 天，在此之前我也没读过 uni-app 和 ucharts 的源码，所以这里把整个过程分享出来也是给大家一个解决问题的思路。
环境
- uni-app cli 版本 3.0.0-alpha-3030820220114011
- hbuilder 版本 3.3.8.20220114-alpha
- ucharts 版本 uni-modules 2.3.7-20220122
现象
uni-app、vue3 + ucharts 绘制图表，开发环境正常，但是打包上线后，H5 无法绘制图表，也不报任何错误。
| 开发 | 线上 | |
|---|---|---|
| APP | 正常 | 正常 |
| H5 | 正常 | 无法绘制 |
问题定位
给 ucharts 的社区提 issue，经过交流，维护者 “怀疑“ 是 uni-app 的 vue3 的 renderjs 有问题，但是他也给不了一个肯定的答复，让去 uni-app 的社区提 issue 而且示例中不能用 ucharts。个人对于该回答持怀疑态度，于是决定自己去定位问题。
怀疑是 ucharts 的 bug
- ucharts 视图部分的关键代码
<view ...其它属性 :prop="uchartsOpts" :change:prop="rdcharts.ucinit"><canvas ...属性 />
</view>
这里有一个知识点需要补充：当 prop 发生改变，change:prop 的回调会被调用，这是 uni-app 框架提供的能力，但官方文档没有提及，从源码中可以看到。
- 看了 ucharts 的源码，绘制图表时的代码执行过程如下：
可是打包后的 H5 线上环境，当执行 this.uchartsOpts = newConfig 之后却没有触发 change:prop 事件，所以这看起来似乎是 uni-app 的 view 组件有问题
感谢 ucharts 官方，在定位问题过程中，和社区进行交流后，ucharts 免费赠送了一个永久超级会员，感谢
uni-app、Vue3 + ucharts 图表 H5 无法渲染相关推荐
- uni app中使用图表
关于在uni app中运用图表 今天写项目,需要在uni app中使用图表,我使用的是ucharts. 具体操作如下 1.下载 ucharts可以直接在uni app的插件市场下载安装. 先在插件市场 ...
- uni app(H5)中软键盘弹出,固定定位绝对定位元素位置发生错乱
一.问题如下 最近用uni app写项目,发现H5软键盘弹起,导致我固定定位的按钮被顶了上去,如图 二.解决方法 1.让其在输入框获取焦点时隐藏 百度了许多,有让输入框获取焦点时让按钮隐藏的方法,失去 ...
- uni App+H5 实现人脸识别
uni App+H5 实现人脸识别 通过h5的视频video管理设备摄像头(不要关),在打开视频摄像时快照截取人脸照片传送到后台通过API接口调用百度人脸识别结果并通过返回数据解析自己业务需求. 1. ...
- vue3+ts 之echarts的使用 以及 echarts 图表初始不渲染,代码改变之后才渲染
vue3+ts 之echarts的使用 以及 echarts 图表初始不渲染,代码改变之后才渲染 前言 一.按需引入 ECharts 图表和组件 二.使用步骤 1.还是先上代码叭 2. 上实现效果 ! ...
- uni.app H5(微信公众号定位) uni.getLocation
最近在开发公众号,由于之前经常使用uni,app写APP,索性就用uni.app来开发公众号了, 不过也遇到了一个问题,就是在公众号的首页要获取用户的定位.我看了看官网的API 有个uni.getLo ...
- uniapp 使用秋云uCharts图表组件、echarts图表组件
一.uniapp 使用秋云uCharts图表组件 1.我们的项目是依赖uniapp的vue-cli项目 操作:将uni_modules目录复制到src目录,即src/uni_modules. 2.页面 ...
- uCharts图表在小程序中的使用
1.uCharts 简介 高性能跨平台图表库,支持H5.APP.小程序(微信小程序.支付宝小程序.钉钉小程序.百度小程序.头条小程序.QQ小程序.360小程序).Vue.Taro等更多支持canvas ...
- uni app实现WIFI功能(只支持安卓APP)
uni app实现WIFI功能 一.前言 二.使用 uni-WIFI 三.使用h5+ api 一.前言 最近需要在uniapp上实现WiFi功能,将个人的研究结果记录如下(都只支持安卓APP) 使用 ...
- 切换 uniapp_万能前端框架uni app初探03：底部导航开发
前言 本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
最新文章
- 几款表贴LED反向电流特性
- 黑马程序员C语言基础（第四天）数据类型
- C语言再学习 -- 关键字sizeof与strlen
- C语言实现希尔排序shell sort算法之二(附完整源码)
- 消息（6）——WCF，构建简单的WCF服务，MTOM编码
- python读单行文本求平均值_利用Python读取json数据并求数据平均值
- python决策树 value_机器学习 | 算法笔记（四）- 决策树算法以及代码实现
- phpcms内容页 调用 上一级栏目id，catname等信息 - 代码篇
- 对数据库进行先查询后插入的解决方案
- redis-springboot-redistemplate更改序列化方式
- 自己在win10中添加ADO控件步骤总结
- win10 C语言qt调试,如何在Windows中调试Qt(MSVC)应用程序
- 气象信息无线监测采集系统
- C语言 怎么求字符串的长度，实例讲解（简洁）
- 如何让计算机查找不到无线网络,笔记本电脑搜索不到无线网络怎么办？
- arm服务器的芯片编年史,64位ARM新篇章 历数史上经典64位处理器
- Sketch for Mac (矢量绘图软件) v81.1
- 快速屏蔽百度热榜百度广告百度推广
- 《Modelica教程》by Fritzson 导言部分
- 使用dreamweaver制作采用DIV+CSS进行布局——美食甜品店铺加盟企业HTML静态网页 ——学生美食网页设计作品静态HTML网页模板源码
热门文章