微信小程序使用lime-echart踩坑记录

一、使用echarts包

微信小程序项目使用的是uni-app,插件是lime-echart,版本一开始安装的是lime-echart-0.7.9;在项目分包之后,为了避免主包过大,就将这个插件也一并搬到了分包中,在微信开发者工具中表现出来的问题,在切到分包所在的模块时,就会导致页面报错,错误信息如下:

页面[src/manager/fund/components/charts/barChart/index]错误:
Error: module 'src/manager/uni modules/lime-echart/static/echarts.min.js’ is not
defined, require args is "../../../../uni modules/lime-echart/static/echarts.min.js'
at I (WASubContext.js?t=we...03658929&v=2.30.0:1)
at r (WASubContext.js?t=we....3658929&v=2.30.0:1)
at index.js:3
at I (WASubContext.js?t=we....3658929&v=2.30.0:1
at :4736:7
at dowhenAllScriptLoaded (:5391:12)
at HTMLScriptElement.scriptLoaded (:5413:5)
at HTMLScriptElement. (:5438:22)
(env: windows,mp,1.06.2301160; lib: 2.30.)

Error: module 'src/manager/uni modules/lime-
echart/static/echarts.min.js’ is not defined,require args is
../../../../uni modules/lime-echart/static/echarts.min.js'
at I (WASubContext.js?t=we..03658929&v=2.30.0:1)
at r (WASubContext.is?t=we...3658929&v=2.30.0:1
at index.js:3
at I (WASubContextjs?t=we..03658929&v=2.30.0:1)
at :4736:7
at dowhenA1lScriptLoaded (:5391:12)
at HTMLScriptElement.scriptLoaded (:5413:5)
at HTMLScriptElement. (:5438:22)
(env: windows,mp,1.06.2301160; lib: 2.30.0)

在开发时要正常使用图表,就必须在echarts.min.js文件中改动些东西,重新编译后就能正常使用,但是在体验版和开发版中是正常使用的,每次重启项目后都必须要经过这一个步骤有点让人不能忍受,所以就重新又读了一遍文档,发现在该插件中,如果是vue3必须要使用esm格式的包才行,于是就顺着文档提供的地址去下载vue3使用的包,地址:https://github.com/apache/echarts/tree/master/dist,找到并下载了echarts.esm.min.js改名为echarts.min.js直接将路径下uni_modules/lime-echart/static/echarts.min.js的文件替换了esm格式的文件,保存重启后发现直接在编译阶段就报错了,然后我就到component中搜索了一下static目录下是否有引用文件,排除一下是否是因为我替换了js文件导致的,结果发现了在APP-NVUE模式下有引用到static/index.html文件,想着反正也不会用到这个模式,索性就将html文件中的引用都先注释了,然后项目正常启动,测试了一下基本上使用正常。

二、使用定制echarts

从插件下载的包或者下载的esm.min.js包都是很大的全量包,微信小程序包有大小的限制,所以插件大小能小就小,插件文档中也提供了官方定制地址:https://echarts.apache.org/zh/builder.html,定制包后最小也有500kb以上,不过总比全量包要小很多,但是vue3需要使用esm格式的包,官方定制化后的包也没有这种格式的,从插件的示例组件中有提供引入的方法,先把原文贴出来:

// nvue 不需要引入
// #ifdef VUE2
import * as echarts from '@/uni_modules/lime-echart/static/echarts.min';
// #endif
// #ifdef VUE3
// #ifdef MP
// 由于vue3 使用vite 不支持umd格式的包,小程序依然可以使用,但需要使用require
const echarts = require('../../static/echarts.min');
// #endif
// #ifndef MP
// 由于 vue3 使用vite 不支持umd格式的包,故引入npm的包
import * as echarts from 'echarts/dist/echarts.esm';
// #endif
// #endif

在项目中引用的方式由import改为require引用该插件,然后这个js文件必须要放到插件的static目录下,重新启动运行项目,基本没有问题,预览后你就会发现代码包的总体积成功减了下来,完美!

但是,如果你的js包要是放到static目录外面,你的项目在编译的时候就不会把这个js文件打包到小程序中,一旦切换到使用图表的页面中就会立即报错,找不到js文件;因为uniapp中使用require中不会在项目编译的时候就将引用到的包一起编译,require是运行时调用的,所以在项目中引用到了地址却没有找到对应的js文件就会立即报错。

简单总结一下:

  • vue3必须要使用esm包
  • 定制包的时候,使用require来引用,并且只能放在插件下的static目录中
  • 如果不会用到APP-NVUE模式,可以将static/index.html文件中引用到的文件都移除,省得看到报错心理不爽

三、定制图表过程

直接从百度上搜索echarts官网,切到文档中,选择入门篇-》获取echarts,直接翻页到最底部就能获取到定制功能。

你可能感兴趣的:(vue,微信小程序,微信小程序)