微信小程序使用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 <anonymous>:4736:7
at dowhenAllScriptLoaded (<anonymous>:5391:12)
at HTMLScriptElement.scriptLoaded (<anonymous>:5413:5)
at HTMLScriptElement.<anonymous> (<anonymous>: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 <anonymous>:4736:7
at dowhenA1lScriptLoaded (<anonymous>:5391:12)
at HTMLScriptElement.scriptLoaded (<anonymous>:5413:5)
at HTMLScriptElement.<anonymous> (<anonymous>: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,直接翻页到最底部就能获取到定制功能。

相关推荐
alxraves6 小时前
零代码AI助手:用大模型自动生成微信小程序界面与逻辑
人工智能·微信小程序·notepad++
秃头披风侠_郑6 小时前
【uniapp】一文让你学会微信小程序+APP+H5全平台实战指南
前端·微信小程序·uni-app
爱勇宝1 天前
一个家庭成长小程序的 MVP 复盘:看到用户在用我很欣慰
微信小程序·产品·设计
这是个栗子2 天前
uni-app微信小程序开发:高频核心 API(三)
微信小程序·小程序·uni-app
quweiie2 天前
thinkphp8结合jwt与微信小程序接口鉴权
微信小程序·小程序·thinkphp接口·接口鉴权
didiplus4 天前
我在GitHub刷到一个诗词API,顺手写了款小程序
微信小程序
小码哥0684 天前
医院陪诊小程序怎么开发-医院陪诊小程序源码功能-微信小程序 医院健康陪诊陪护系统
微信小程序·小程序·医院陪诊·陪诊系统·陪诊陪诊
书中枫叶5 天前
从「上次几点喂奶」到全栈小程序:我做了个喂宝助手
mongodb·微信小程序·node.js
ssshooter5 天前
小程序分包页面报 "has not been registered yet" 的隐蔽根因:一个动态 import 拖垮整个分包
前端·javascript·微信小程序
JudithHuang7 天前
受够了带广告的单位换算 App,我自己做了一个微信小程序
微信小程序