标签：uniapp 插件 浏览器 app h5 图表 组件 手机

今天继续说一下使用uniapp开发app遇到的坑----ecahrts直接导致手机模拟器白屏。

之前使用h5开发，然后通过hbuilderx打包成跨端app，此时的app类似h5套壳，本质上应该仍然是浏览器访问h5。这时候项目中使用的插件echarts可以非常正常的显示。
然后将echarts搬到uniapp后会发现，一边开发一边通过浏览器看，会觉得很不错，打开手机模拟器，一片空白！！！
浏览器一切正常的情况下，手机模拟器不仅白屏，而且还不知道为什么，把引入之类的全部注释，甚至是最后将依赖卸载，依旧无法解决问题！

这时候自然又是找度娘问问，后面发现不兼容，只好去插件市场安装一个专门的图表插件，
链接：https://ext.dcloud.net.cn/plugin?id=7978

下载了案例后，照猫画虎搞进项目，结果自定义图例也是浏览器生效，手机上不生效，那就暂时这样算了，接下来封装一下吧，为了后续复用。
看了案例后会发现 option整个对象放置在data中，然后setOption(option)，
按照往常web端的封装方式，一般固定的就不会想着后续传值操作，一般选择将需要改的比如：横纵坐标的值，进行操作，因此改成下面的样子：

浏览器依旧非常友好，一切正常，这时候看下手机，god，又白屏！！！
修修改改，最后发现手机只有这种情况可以正常显示，
1.使用案例中的监听方式，完整的option依旧放在data中

2.要传值的地方依旧使用 props（父传子那样），同时在changeOption方法中进行赋值，通过updateEcharts进行监听就可以正常更新视图了

3.父组件中直接在使用子组件的地方给子组件一个ref，然后通过父传子，同时在父组件调用子组件的方法来实现后续值的动态更新

这样操作就稳稳了！如果还要继续封装的话，就自己再搞吧！

标签：uniapp,插件,浏览器,app,h5,图表,组件,手机
来源： https://www.cnblogs.com/jocelyn11/p/16306611.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。