Echarts在Taro微信小程序开发中的踩坑记录

背景

近期笔者在使用Taro进行微信小程序开发,当引入Echarts图表库时,微信检测单包超限2M的一系列优化措施的踩坑记录,期望能指导读者少走一些弯路。

为什么选择Echarts?

微信小程序目录市面上使用最多的两款图表库,如下:

对比两款图表库优缺点刚好相反。

  • echarts-for-weixin:功能强大,但体积非常大
  • wx-charts:功能相对简单,但体积小

由于笔者对echarts使用较熟悉,且需求图表需要支持的部分功能wx-charts不支持,所以最终选择使用echarts-for-weixin,踩坑之旅就此开始。

单包超过2M,如何处理?

笔者引入echarts-for-weixin,快乐的做完需求,准备上传代码发布微信小程序体验版,坑就此开始...

当单包超过2M上限,则上传代码出现异常,出现上面弹窗提示。

微信小程序官方要求,单包不超过2M,整包不超过16M

遇到单包超过2M,优化方案有如下两种:

  • 微信分包加载subpackages
  • 单包体积优化(缩减代码、压缩、静态资源CDN等等)

由于笔者本次开发需求属于新功能,所以把新功能模块采用独立的分包路由加载,但分包后,还是出现单包超过2M的限制。

经过分析发现业务模块引用的echarts组件,会被Taro打包到common.js模块,导致所有的分包模块都会重复计算echarts的size,导致旧分包模块超过2M的限制。

为什么echarts-for-weixin会被打包到common.js模块?

原因是echarts被echarts-for-weixin组件和外部业务组件所依赖,导致Taro认为echarts.js被多个模块所依赖,所以打包到common.js。

为了解决此问题,采用splitChunks打包配置,将echarts单独模块打包,然后在对应的依赖页面(addChunkPages)注入依赖,配置如下:

// echartChunkName echarts打包后的输出路径
 mini: {
  webpackChain(chain) {
   chain.merge({
    optimization: {
     splitChunks: {
      cacheGroups: {
       [echartChunkName]: {
        name: echartChunkName,
        priority: 50,
        test(module) {
         return /subpackages[\\/]homeworkPage[\\/]studyData[\\/]ChartLine[\\/]ec-canvas[\\/]echarts.js/.test(
          module.resource
         );
        },
       },
      },
     },
    },
   });
  },
  addChunkPages(pages, pagesNames) {
   pages.set("subpackages/homeworkPage/studyData/ChartLine/index", [echartChunkName]);
   pages.set("subpackages/homeworkPage/studyData/ChartLine/ec-canvas/ec-canvas", [echartChunkName]);
  }
 }

Taro通过mini.webpackChain自定义webpack配置,请参考官网文档

webpack分包配置splitChunks,请参考官网文档

通过mini.addChunkPages设置分包依赖,请参考官网文档

经过以上处理,common.js体积恢复正常,以为就此结束。

结果新的坑又出现了......如下图:

echarts-for-weixin组件找不到echarts模块依赖...

经过一系列的分析,发现Taro对原生微信组件splitChunks分包打包的依赖注入有问题官方还没有修复此问题...

需要在Taro编译成功后,手动修改编译后的ec-canvas.js,注入echarts依赖,如下图:

经过上面的处理,终于正常运行,单包超过2M的问题也全部解决。

以为到此就结束了?

笔者总不能在每次编译后,手动修改编译后的文件吧,如果哪天发版本忘记手动修改,将导致线上问题,风险高。

因此需要写一个Taro打包hack插件,自动注入编译后的echarts依赖代码。

书写Taro编译插件很简单,请参考官方文档即可,插件代码如下:

const fs = require('fs');
const path = require('path');
module.exports.default = module.exports = (ctx, options) => {
 ctx.onBuildFinish(() => {
  console.log('echarts构建hack注入')
  const target = path.join(ctx.paths.outputPath, 'subpackages/homeworkPage/studyData/ChartLine/ec-canvas//ec-canvas.js');
  const data = fs.readFileSync(target, 'utf8');
  fs.writeFileSync(target, `require("../../echartCommon");${data}`)
 })
}

注:Taro版本2.2以上才支持自定义插件

最后

Echarts在Taro微信小程序开发踩坑记录到此接近尾声,希望能给正准备在Taro微信小程序使用echarts图表库的读者一些帮助。

到此这篇关于Echarts在Taro微信小程序开发中的踩坑记录的文章就介绍到这了,更多相关Taro微信小程序 Echarts内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 微信小程序中使用echarts的实现方法

    刚开始学微信小程序,有说的不对的地方大家可以提出! 首先体验示例小程序 在微信中扫描下面的二维码即可体验 ECharts Demo: 下载 为了兼容小程序 Canvas,我们提供了一个小程序的组件,用这种方式可以方便地使用 ECharts. 首先,下载 GitHub 上的 ecomfe/echarts-for-weixin项目. 其中,ec-canvas 是我们提供的组件,其他文件是如何使用该组件的示例. ec-canvas 目录下有一个 echarts.js,默认我们会在每次 echarts-

  • 微信小程序遍历Echarts图表实现多个饼图

    如何在微信小程序中使用Echarts可以看我的另一个教程:点击查看 首先看一个简单的例子 1.wxml文件 <view style='width:100%;height:200rpx'> <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas> </view> 2.js文件 import *

  • 微信小程序中使用ECharts 异步加载数据的方法

    官网例子都是同步的,怎么引入及同步demo请移步官网 <view class="container"> <ec-canvas id="mychart-dom-multi-bar" canvas-id="mychart-multi-bar" ec="{{ ecBar }}"></ec-canvas> <ec-canvas id="mychart-dom-multi-scatte

  • 微信小程序使用echarts获取数据并生成折线图

    微信小程序使用echarts,实现左右双Y轴,动态获取数据,生成折线图 本来使用的是wxcharts,但发现实现不了左右双y轴的效果,就换成echarts 要实现这样的效果,需要以下几步: (1)去github下载插件,放进自己的项目里 只需要将名称是ec-canvas的文件夹放进自己项目里. 像这样: (2)分别写小程序的四个文件 ① echart.json { "usingComponents": { "ec-canvas": "../../ec-ca

  • 微信小程序中使用ECharts 异步加载数据实现图表功能

    具体代码如下所示: <view class="container"> <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas> </view> import * as echarts from '../../ec-canvas/echarts'; var barec = n

  • 微信小程序Echarts图表组件使用方法详解

    1:下载 GitHub 上的 项目 2:但项目下载之后,打开小程序开发工具,可以看到效果如下,适配性还是比较完美的. 如果是在项目里面引入组件的话,打开从github上面下载的代码,将ec-canvas文件夹复制黏贴到你的项目里面. 好的,组件已经复制到了我的项目里面,现在我想实现一个折线图,现在开始去组件里面搬运复制黏贴代码了. wxml <!--index.wxml--> <view class="container"> <ec-canvas id=&

  • 基于mpvue小程序使用echarts画折线图的方法示例

    第一次使用mpvue框架来写小程序,项目开发直接搬用mpvue-shop(一个仿网易严选的小程序开发项目),项目结构清楚,实现了大部分功能,对于初次使用mpvue的小伙伴们来说,是一个很好的选择. 关于组件的选择: 1.echarts-for-weixin,官方echarts的小程序版本.使用参考:echarts-for-weixin介绍,如果你是原生开发小程序版本,这个组件非常适合你,开发过程中可使用echarts官方提供的所有配置和Api,但并不适合mpvue项目. 2.wx-charts,

  • 微信小程序在ios下Echarts图表不能滑动的问题解决

    问题现象 这个问题的现象说起来很简单. 小程序页面中有一篇很长的文章,内部有一个Echarts图表,手指上下滑动观看内容. 但是手指滑动区域在Echarts图表上时,页面却不能滑动了. 如下图: 追踪问题原因 因为在小程序上渲染图表用到的是echarts-for-weixin这个组件,而这个组件确实不支持一些Echarts功能. 所以最开始我怀疑是这个组件的问题,认为它把我的滑动事件给吞了. 为了确认这个问题,我直接在这个组件ec-canvas旁加了个兄弟节点view,然后用绝对定位将其覆盖在e

  • 微信小程序Echarts覆盖正常组件问题解决

    最近公司的项目中需要在小程序内使用echarts组件来展示数据,同时因为使用了自定义导航栏以及蒙版层,导致Echarts图形覆盖于所有组件的上方,不符合设计要求. 尝试解决的思路: z-index:Echarts使用的是微信原生canvas,优先级高,z-index完全无效. cover-view:因为page中含有一些如input之类的无法与cover-view进行嵌套使用的元素,故cover-view也无法奏效. wx.canvasToTempFilePath:wx.canvasToTemp

  • Echarts在Taro微信小程序开发中的踩坑记录

    背景 近期笔者在使用Taro进行微信小程序开发,当引入Echarts图表库时,微信检测单包超限2M的一系列优化措施的踩坑记录,期望能指导读者少走一些弯路. 为什么选择Echarts? 微信小程序目录市面上使用最多的两款图表库,如下: echarts-for-weixin--echarts微信小程序版本 wx-charts--基于微信小程序的图表库 对比两款图表库优缺点刚好相反. echarts-for-weixin:功能强大,但体积非常大 wx-charts:功能相对简单,但体积小 由于笔者对e

  • 微信小程序开发篇之踩坑记录

    最近参与开发了公司的第一款小程序,开发体验基本类似于基于webview的混合式开发,可以调用官方强大的api,但也有一些坑或者说不习惯的地方.这篇文章从实用性出发,记录了开发过程中的一些问题: 1. 样式优先级混乱 在使用button组件时,发现在class中设置width不生效,下面贴上代码: .my-button{ width: 140rpx; height: 60rpx; line-height: 60rpx; padding: 0; } 经过微信调试工具排查后,发现user agent的

  • 微信小程序获取手机号的踩坑记录

    前言 最近在开发小程序遇到这样一个问题, 在用户点击授权后去解密手机号时会出现第一次失败,第二次成功的情况.研究了一段时间,终于找到比较合理的解决方案,在此记录并总结一下,希望可以帮助到大家. 需求描述 在用户点击获取电话按钮后, 将用户在微信内设置的电话解密显示在联系电话输入框内 具体代码 <view class="cu-form-group"> <view class="title text-black">联系电话</view>

  • 原生微信小程序开发中 redux 的使用详解

    前提 复杂场景中有不少数据需要在多个不同页面间来回使用和修改.但是小程序页面直接的数据通信方式十分的简单.通常情况需要自己维护一个全局的对象来存放共有数据.但是,简单的维护一个共有数据实体,会随着业务逻辑的不断复杂化而变的过分庞大,并且数据的修改往往无法很好的溯源.加之公共数据实体中数据的修改和页面的UI之间没有太好的同步手段,往往需要在页面和对应的数据实体中同时都维护一份相同的数据,操作十分的不方便. 之前使用过Taro以react+redux的结构来开发微信小程序,依托redux整体上可以解

  • 微信小程序 开发中遇到问题总结

    微信小程序 开发中遇到问题总结 1.由于小程序wx.request()方法是异步的,在app.js执行ajax后,各分页加载app.js的全局数据时,无法按顺序加载.例: //app.js App({ ajax:function(){ let that = this; wx.request({ url: 'https://a.com/url.php', method: 'GET', success: function(e){ that.data = 123; } }) }; }) //conte

  • 微信小程序开发中var that =this的用法详解

    在微信小程序开发中,var that =this的声明很常见.举个例子,代码如下! 示例代码1 //index.js Page({ data: { toastHidden: true, }, loadData: function () { var that = this//这里声明了that:将this存在that里面 wx.request({ url: 'test.php', data: {a: 'a', b: 'b'}, header: { 'content-type': 'applicat

  • 深入解析微信小程序开发中遇到的几个小问题

    本地图片不显示,开发工具运行是没问题的,但真机调试却显示不了 item.img = '/goods/img/图片.png' <image src=" { { item.img } } " class="image"> </image> 经过仔细观察发现,路径是没问题的,问题在于图片名不能是中文的,把它改成字母+数字就好了. 使用FileSystemManager.readdir(Object object)方法读取本地文件夹中的所有图片,报错

  • 微信小程序开发中的疑问解答汇总

    前言 最近总结一篇微信小程序解答,作为小程序填坑人深有体会这里的变化,小程序刚发布消息的时候我就说了一个观点,只要小程序提供的组件或API丰富,稳定,兼容性好,才能实现小程序快速开发的理念,先如今还有很多组件的兼容不理想,有一些还在的优化中,因基于小程序这个平台开发限制很大,只能坐等中...如果想用第三方库来实现,小程序明文规定不支持第三方库的做法,这样做最终小程序审核环节百分百的不通过. 1.scroll-view 在 iOS 上存在 bug 在使用这个组件开发页面的时候,因自带滚动效果,Y

  • 详解如何在微信小程序开发中正确的使用vant ui组件

    微信小程序终于可以支持npm导入第三方库了(https://developers.weixin.qq....),但是这种导入模式和使用模式有别于我们使用的npm调用.今天我按照有赞新出的vant小程序ui库来讲解如何导入npm资源. 第一步: 在小程序工程的根目录下执行: npm i vant-weapp -S --production 第二步: 保证当前你的微信开发者工具是最新版本,然后点击执行"构建npm" 构建成功后会提示: 同时项目根目录中会多出一个目录"minipr

  • 微信小程序自定义tabBar的踩坑实践记录

    微信官方文档对自定义 tabBar 的阐述较为潦草,在开发自定义 tabBar 过程中我踩了很多坑,因此在此处做个总结. 我使用 Vant Weapp作为 UI 组件库,下面以此组件库为例. 定义 tabBar 创建自定义 tabBar 文件 创建一个与 /pages 的同级目录,命名为  /custom-tab-bar,注意目录层级与目录命名问题,不可用其他名称命名. 在 /custom-tab-bar 下创建四个文件: index.js index.json index.wxml index

随机推荐