1、在如下配置中，pages/market/index 页面引入 pages/marketModule/index的组件，此时会报
app.config.ts
export default defineAppConfig({
pages: [
'pages/myShop/index',
'pages/market/index',
'pages/crowd/index',
'pages/mine/index',
'pages/login/login',
"pages/login/phoneSign",
// 'pages/webView/index',
],
// https://developers.weixin.qq.com/community/develop/doc/000ac4c62b82d80c879e9d2ce56400
subpackages:[
{
root:'shopPackages',
name:'shopPackages',
pages:[
'pages/likeAccounts/index'
],
},
{
root:'marketPackages',
name:'marketPackages',
pages:[
'pages/marketModule/index',
'pages/brandInfo/index',
'pages/searchPage/index',
]
}
],
window: {
backgroundTextStyle: 'light',
navigationBarBackgroundColor: '#fff',
navigationBarTitleText: 'WeChat',
navigationBarTextStyle: 'black'
},
tabBar: {
custom: true,
color: '#000000',
selectedColor: '#DC143C',
backgroundColor: '#ffffff',
list: [
{
pagePath: 'pages/myShop/index',
selectedIconPath: 'images/brand_active.png',
iconPath: 'images/brand.png',
text: '店铺'
},
{
pagePath: 'pages/market/index',
selectedIconPath: 'images/shop_active.png',
iconPath: 'images/shop.png',
text: '市场'
},
{
pagePath: 'pages/crowd/index',
selectedIconPath: 'images/market_active.png',
iconPath: 'images/market.png',
text: '人群'
},
{
pagePath: 'pages/mine/index',
selectedIconPath: 'images/mine_active.png',
iconPath: 'images/mine.png',
text: '我的'
}
]
},
debug:true,
lazyCodeLoading:'requiredComponents' // 启动时 只加载需要的文件
// 'entryPagePath':'' 指定小程序默认启动路径
})
原因： 配置中pages/market/index与pages/marketModule/index都是路径，小程序不能这么处理 解决方法：将配置中的pages/marketModule/index去掉，只把marketModule当作一个组件使用
2、taro-react-echarts echart 使用该组件时 代码如下：
import React, { useEffect, useState } from "react";
import {useMemo,useRef} from 'react'
import Taro from "@tarojs/taro";
import Echarts from 'taro-react-echarts'
import * as echarts from "@/ec-canvas/echarts";
import { View } from "@tarojs/components";
import { legend,grid,axisLable,axisLine } from "../echart.config";
import './index.scss'
const PieEchart = ({data,show,showTitle,money,height,width="100%"})=>{
const page = useMemo(() => Taro.getCurrentInstance().page, []);
const option = {
tooltip: {
trigger: 'item',
show:false,
},
legend: {
show:false,
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['75%', '90%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center',
},
emphasis: {
// disabled:true,
label: {
show: true,
fontSize: 20,
fontWeight: 'bold',
formatter: `{a|${showTitle}}\n {b|${money}}`,
rich: {
a: {
color: '#aaa',
lineHeight: 22,
align: 'center',
fontSize: 12
},
b: {
color: '#000',
lineHeight:28,
align: 'center',
fontSize: 14,
fontWeight:500
},
}
}
},
labelLine: {
show: false
},
data: data ??[
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
]
}
]
};
const echartsRef = useRef(null);
const echartWidth = useState(()=>{
return width !== '100%'?Taro.pxTransform(width):'100%'
})
useEffect(()=> {
if(!echartsRef.current) return
echartsRef.current?.setOption(option)
echartsRef.current?.dispatchAction({
type:'highlight',
seriesIndex:0
})
},[data,money,echartsRef.current])
return (
<View id="petra">
<Echarts
echarts={echarts}
option={option}
isPage={false} // 很重要不然切换后出不来
style={{widht:echartWidth, height: Taro.pxTransform(height)}}
onChartReady={(instance) => {
echartsRef.current = instance
}}
/>
</View>
);
}
export default PieEchart
如果该组件在tab切换后才显示，如果不在Echarts组件中加isPage={false} 则图表死活出不来，很痛苦，但是没找到原因。 参考 www.cnblogs.com/ZerlinM/p/1…
3、在第二问中 正常配置后，偶尔会遇到有数据，页面初始化，y轴不渲染；数据发生改变后，渲染的仍然是上次的数据；解决如下：
import React, { useEffect,useState } from "react";
import {useMemo,useRef} from 'react'
import Taro from "@tarojs/taro";
import Echarts from 'taro-react-echarts'
import * as echarts from "@/ec-canvas/echarts";
import { View } from "@tarojs/components";
import { legend,grid,axisLable,axisLine,axisTick } from "../echart.config";
import './index.scss'
const LineEchart = ({height,data,xAxisData,yLabelFormat,tooltipFormatter,legendOptions={}})=>{
const echartsRef = useRef(null)
// 使用ref存储最新的值，这样当数据发生变化后，会立即拿到最新数据
const optionRef = useRef({})
useEffect(()=> {
const ref = echartsRef?.current
// 初始化 echart第一次渲染的时候 y轴数据不为空
optionRef.current = {
legend:{
...legend,
...legendOptions,
right:10,
top:0,
itemHeight:2,
itemWidth:8,
icon:'rect',
textStyle: {
color:'#666',
fontSize: Taro.pxTransform(20)
},
zIndex:1000
},
grid:{
...grid,
containLabel: true
},
tooltip: {
trigger: 'axis',
show: true,
confine: true,
className: 'echartsTooltip',
backgroundColor: 'rgba(56, 96, 244, 0.10)',
renderMode: 'richText',
zIndex:10,
textStyle:{
textShadowBlur: 10, // 重点
textShadowColor: 'transparent', // 重点
},
formatter: tooltipFormatter && tooltipFormatter
},
xAxis: {
type: 'category',
data: xAxisData??['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick:false,
axisLine,
axisLabel:axisLable,
axisTick
},
yAxis: {
type: 'value',
axisLine,
axisLabel:yLabelFormat?{
...axisLable,
formatter: yLabelFormat
}:axisLable,
splitLine: {
show: false
}
},
series:data
}
// 数据更改后，拿到最新的值，重新渲染，保证渲染的是最新的值，第一次是拿不到ref的
if(ref) {
ref.setOption(optionRef.current,true)
}
},[xAxisData,data,echartsRef?.current])
return (
<View >
{
Object.keys(optionRef.current).length && <Echarts
echarts={echarts}
option={optionRef.current}
isPage={false}
// style自定义设置echarts宽高
style={{widht: '100%', height: Taro.pxTransform(height)}}
onChartReady={(ref)=> {
// 一定要在此处拿到ref
echartsRef.current = ref
ref.setOption(optionRef.current,true)
}}
/>
}
</View>
);
}
export default LineEchart
4、小程序隐藏滚动条
前面不需要加任何标签：
::-webkit-scrollbar {
display:none;
width:0;
height:0;
color:transparent;
}
