微信小程序中引用第三方（自定义）组件（Taro版）
发布时间
阅读量：
阅读量
当我们使用Taro框架开发微信小程序时，在开发过程中我们会常用到第三方组件库的支持。比如，在开发过程中我们会常用到ECharts来制作数据可视化图表。以下将演示如何在Taro框架内集成并使用ECharts-for-Weixin组件（具体实现代码可参考GitHub仓库：echarts-for-weixin），其中的引用位置通常位于/pages/echart/echart.js。
使用方法
- 首先需要在配置文件配置引用路径：
// echart.config.js
usingComponents: {
'ec-canvas': '../../components/ec-canvas/ec-canvas' // 书写第三方组件的相对路径
}
代码解读- 引入组件：
// 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>
代码解读- 引入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;
}
代码解读- 需要注意样式设置。使用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）浏览自定义组件或第三方组件的书写格式是否正确，并了解常见的书写规范；通常情况下，自定义组件可能会遇到这类书写问题，请参考官方文档中对自定义组件书写的规范说明获取详细指导
全部评论 (0)
还没有任何评论哟~