Taro v3.3.3 h5和百度小程序开发踩坑记录
这几个月在做百度小程序和对应的h5，由于小程序和h5有很多共用的组件，接口是一样的，主要差别是部分模块小程序有而h5没有，部分模块h5有而小程序没有，以及部分样式差别。因此决定用taro开发，方便后续小程序和h5的更新迭代维护。然而，用taro开发h5遇到了不少坑，如果小程序和h5差别很大的话，建议不要用taro开发h5，可以考虑h5和小程序独立开发。接下来分享我在开发过程中遇到的坑点🎈……
百度小程序
1. 百度动态库 echart
文档：https://smartprogram.baidu.com/docs/develop/framework/echarts/
ECharts 动态库是智能小程序基于 Apache ECharts 实现的图表动态库，提供了图表在小程序中的使用方法。
（1）使用方法
- 项目声明引用动态库
export default {
pages: [],
window: {},
// 引用动态库
dynamicLib: {
echartsLib: {
provider: "echarts_5_1_2"
}
}
};
- 在每个使用到图表组件的页面，配置文件
export default {
usingComponents: {
chart: "dynamicLib://echartsLib/chart"
}
};
- 图表组件（举个例子）
import React, { useEffect, useState } from "react";
import { View } from "@tarojs/components";
import { IObj } from "@interface";
import styles from "./index.module.less";
// 主要颜色
const mainColor = "rgba(0, 0, 0, 0.25)";
// 标记线条颜色
const markLineColor = "rgba(0, 0, 0, 0.1)";
// 主题颜色数据
const themeData: any = {
red: {
areaBgColor: "rgba(248, 53, 53, 0.2)",
color: "rgb(248, 53, 53)"
},
purple: {
areaBgColor: "rgba(157, 51, 255, 0.2)",
color: "rgb(157, 51, 255)"
},
green: {
areaBgColor: "rgba(119, 210, 23, 0.2)",
color: "rgb(119, 210, 23)"
},
yellow: {
areaBgColor: "rgba(255, 154, 20, 0.2)",
color: "rgb(255, 154, 20)"
},
blue: {
areaBgColor: "rgba(19, 176, 255, 0.2)",
color: "rgb(19, 176, 255)"
}
};
function ChartYear(props) {
const { themeType = "blue" } = props;
const [option, setOption] = useState<IObj>();
useEffect(() => {
const theme = themeData[themeType]; // 当前主题颜色数据
const xAxisData: string[] = [];
const markLineData: any[] = [];
for (let i = 1; i <= 12; i++) {
const xAxisText = i + "月";
const markLineItem = {
xAxis: i - 1
};
xAxisData.push(xAxisText);
markLineData.push(markLineItem);
}
const optionValue = {
// 画布边距
grid: {
top: "4%",
bottom: "12%",
left: "8%",
right: "4%"
},
xAxis: {
type: "category",
data: xAxisData,
boundaryGap: false,
axisLabel: {
fontSize: 11,
interval: 0
},
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: mainColor
}
}
},
yAxis: {
type: "value",
boundaryGap: [0, "30%"],
min: 0,
max: 100,
splitLine: {
show: false // 不显示分割线（横线）
},
axisTick: {
show: false // 不显示刻度
},
axisLine: {
lineStyle: {
color: mainColor
}
},
axisLabel: {
fontSize: 11
}
},
series: [
{
data: [100, 20, 40, 30, 90, 50, 100, 100, 20, 40, 30, 90],
type: "line",
smooth: true,
// 区域填充样式
areaStyle: {
color: theme.areaBgColor
},
symbol: "emptyCircle",
symbolSize: 6,
itemStyle: {
color: theme.color
},
lineStyle: {
color: theme.color,
width: 3
},
markLine: {
symbol: ["none", "none"],
label: { show: false },
data: markLineData,
lineStyle: {
color: markLineColor,
width: 0.5,
type: "solid"
}
}
}
]
};
setOption(optionValue);
}, [themeType]);
return (
<View className={styles.chart}>
{option && (
<View className={styles.chart_main}>
<chart option={option}></chart>
</View>
)}
</View>
);
}
export default ChartYear;
（2）踩坑点
💡 ：需要保证chart有高度和宽度，不然图表显示不出来。如下图，有chart元素，但是因为没有设置宽高，因此chart元素的宽高为0，所以图表没有显示出来，设置宽高之后就正常了（可在chart元素的直接父级元素设置宽高）。
没有设置宽高：
设置了宽高：
2. 自定义导航栏
文档：https://smartprogram.baidu.com/docs/develop/framework/process/
（1）使用方法
- 项目声明中使用自定义导航栏
export default {
pages: [],
window: {
// 使用自定义导航栏
navigationStyle: "custom"
}
};
- 接下来开发导航栏组件，然后在需要使用自定义导航栏的页面使用该组件
（2）踩坑点
百度小程序可以自定义顶部导航栏，但是会保留右侧的胶囊按钮，二级页面还会保留返回按钮，自定义导航栏设计及开发的时候需要给这两个预留位置，避免出现遮挡的情况。
当 swanNativeVersion >=2.28.0（swanNativeVersion 可由 swan.getSystemInfo、swan.getSystemInfoSync 获取）时，小程序框架将回收二级页面（非首页 / 非 Tab 页）左上角返回按钮的自定义权限。在小程序二级页面使用自定义导航栏时，小程序框架将提供统一的返回按钮控制方案。详情请参考非兼容性升级。
一级页面：
二级页面：
3. 其他
- 使用webview，顶部导航栏不会有首页按钮，
- 使用webview的页面无法使用自定义导航栏
- 小程序和h5需要同主体，在申请小程序和配置域名的时候需要留意这个问题，主体尽量干净
- 滚动穿透，使用样式解决
- https://github.com/Cecilxx/echarts-taro3-react 百度小程序不适用
h5
1. navigateTo ios h5 百度app 跳转问题
- 问题：ios设备在百度APP内使用 navigateTo 异常，没有跳转到对应页面
- 目前采取的解决方案： ios 百度环境 navigateTo 改成 redirectTo
2. Taro.pageScrollTo ios环境无法滚动到顶部
- 一开始进入页面的时候加了 Taro.pageScrollTo，导致再次调用这个方法时无法滚动到顶部
- 解决方案：去掉页面初始滚动就可以了
3. 其他
- taro h5 中不支持 mode='region'。因为地址 JSON 数据太大（Picker mode 为 region）
浙公网安备 33010602011771号