微信小程序中引用第三方（自定义）组件（Taro版）

Posted 2023-02-25 诗渊

在使用 Taro 开发微信小程序的时候，我们可能会用到第三方的组件库，例如我们经常会用到 echarts 进行图表展示，下面就以 Taro 中使用 echarts-for-weixin为例，讲解一下如何在微信小程序中使用第三方组件,。 这里假设我们的引用页面为/pages/echart/echart.js。

使用方法

1. 首先需要在配置文件配置引用路径：

// echart.config.js

usingComponents: 
    'ec-canvas': '../../components/ec-canvas/ec-canvas' // 书写第三方组件的相对路径
  

2. 引入组件：

// echart.jsx

constructor(props) 
    super(props);
    this.state = 
      ec: 
        onInit: initChart // 初始化echart
      
    ;
  

// 组件引入
<View className='content'>
  <ec-canvas id='mychart-dom-area' canvas-id='mychart-area' ec=this.state.ec></ec-canvas>
</View>

3. 引入echarts.js文件，并加上初始化函数

// echart.jsx
import * as echarts from '../../components/ec-canvas/echarts'

let chart = null;

function initChart(canvas, width, height) 
  chart = echarts.init(canvas, null, 
    width: width,
    height: height
  )
  canvas.setChart(chart);

  const option = 
    // the options...

  ;
  
  chart.setOption(option)
  return chart;

4. 需要注意一下样式，echarts默认是没有宽高的，如果不单独设置的容器的宽高的话，显示不出来

// echart.scss
.content
   width: 100%;
   height: 400rpx;

   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
   box-sizing: border-box;

至此，图标应该能正常显示了，贴上 echart.jsx 中比较主要代码

// echart.jsx

import React,  Component  from 'react';
import Taro from '@tarojs/taro';
import  View  from '@tarojs/components'
import * as echarts from '../../components/ec-canvas/echarts'
import './echart.scss'

export default class Echart extends Component 
  constructor(props) 
    super(props);
    this.state = 
      ec: 
        onInit: initChart
      
    ;
    
  

  componentWillMount() 

  componentDidMount() 
    setTimeout(() => 
      // 获取echart 示例，异步获取数据并渲染
      console.log(chart);
      const newOption = ;
      chart.setOption(newOption)
    , 2000);
  

  componentWillUnmount() 

  componentDidShow() 

  componentDidHide() 

  render() 
    return (
      <View className='content'>
        <ec-canvas id='mychart-dom-area' canvas-id='mychart-area' ec=this.state.ec></ec-canvas>
      </View>
    );
  


let chart = null;

function initChart(canvas, width, height) 
  chart = echarts.init(canvas, null, 
    width: width,
    height: height
  )
  canvas.setChart(chart);

  const option = 
    // the options
  ;

  chart.setOption(option)
  return chart;

常见问题排查

在微信小程序中使用第三方组件或者自定组件时，可能会出现以下报错：

SystemError (jsEnginScriptError)
Component is not found in path "components/ec-canvas/ec-canvas.js" (using by "pages/echart/echart")
Error: Component is not found in path "components/ec-canvas/ec-canvas.js" (using by "pages/echart/echart")

通常可以从以下几个方面查找原因：
（1）路径引用配置是否正确：对应页面的配置文件xxx.json（taro为xxx.config.js）加上类似如下配置

usingComponents: 
    'ec-canvas': '../../components/ec-canvas/ec-canvas' // 书写第三方组件的相对路径
  

该路径为相对路径，一定要写到对应文件，即使是index.js文件也不能省略。

（2）查看自定义组件或者第三方组件写法是否正确，一般自定义组件可能会出现该类问题，具体参考官方文档中对自定义组件书写的规范说明