1.简介
Taro 是一个开放式跨端跨框架解决方案，支持使用 React/Vue/Nerv 等框架来开发 [微信](https://mp.weixin.qq.com/) / [京东](https://mp.jd.com/?entrance=taro) / [百度](https://smartprogram.baidu.com/) / [支付宝](https://mini.open.alipay.com/) / [字节跳动](https://microapp.bytedance.com/) / [QQ](https://q.qq.com/) / [飞书](https://open.feishu.cn/document/uYjL24iN/ucDOzYjL3gzM24yN4MjN) 小程序 / H5 / RN /鸿蒙等应用。（2021.12.8新发布的V3.5 宣布支持鸿蒙）
现如今市面上端的形态多种多样，Web、React Native、微信小程序等各种端大行其道。当业务要求同时在不同的端都要求有所表现的时候，针对不同的端去编写多套代码的成本显然非常高，这时候只编写一套代码就能够适配到多端的能力就显得极为需要。
2.框架支持
Taro 3 中可以使用完整的 React / Vue / Vue3 / Nerv 开发体验
3.UI - Taro UI
安装命令： npm i taro-ui@next
一款基于 Taro 框架开发的多端 UI 组件库。
# Taro UI 特性：
-
基于 Taro 开发 UI 组件
-
一套组件可以在多端适配运行（ReactNative 端暂不支持）
-
提供友好的 API，可灵活的使用组件
4.Taro相关注意
4.1. 长列表渲染
在taro使用中，需要渲染长列表，而且长列表数据多且复杂时，建议使用虚拟列表渲染,只渲染可视范围内数据，不会造成页面卡顿！
vue.gif
import VirtualList from '@tarojs/components/virtual-list'
<VirtualList
height={500} /* 列表的高度 */
width='100%' /* 列表的宽度 */
itemData={data} /* 渲染列表的数据 */
itemCount={dataLen} /* 渲染列表的长度 */
itemSize={100} /* 列表单项的高度 */
>
{Row} /* 列表单项组件，这里只能传入一个组件 */
</VirtualList>
4.2.回到顶部按钮
-首先监听页面是否有滚动（通过usePageScroll），滚动超过阈值后出现按钮
-点击按钮后，通过Taro.pageScrollTo回到顶部
import { usePageScroll } from '@tarojs/taro';
import Taro from '@tarojs/taro';
const [showBackTop, setShowBackTop] = useState<boolean>(false) // 是否显示回到顶部按钮
// 回到顶部
const handleBackTop = () => {
setShowBackTop(false)
Taro.pageScrollTo({
scrollTop: 0, // 滚动到页面的目标位置，单位 px
duration: 0, // 滚动动画的时长，单位 ms
selector: 'scroll' // 选择器, css selector (rn 不支持该属性)
})
}
// 监听用户滑动页面事件
usePageScroll((payload) => {
const { scrollTop } = payload;
scrollTop > 80 ? setShowBackTop(true) : setShowBackTop(false)
})
4.3. 时间选择兼容ios
时间选择ios只识别‘年/月/日’这种格式，其他格式需转换成此格式
4.4.input快速输入闪动
绑定旧值，监听onChange事件设置旧值的拷贝值，==避免组件依赖值更新==
import { AtInput } from 'taro-ui'
const [formData, setFormData] = useState(initState)
const [selfFormState, setSelfFormState] = useState(initState)
const handleChange = (type, value) => {
const newState = {
...selfFormState,
[type]: value
}
setSelfFormState(newState)
return value
}
<AtInput
name='value'
title='标准五个字'
type='text'
placeholder='标准五个字'
value={formData.name}
onChange={(val) => {
handleChange('name', val)
}}
/>
4.5.picker选择器样式
image.png
该样式是基于微信原生的picker，想换色还未找到好办法，目前我们只能重写picker了
在Taro UI表单组件中，还有很多不完善的地方，也有可扩展性差的问题，所以在做表单时很多都需要进行重写才能满足需求，这点体验性差！
5.总结
由于本人只是中间介入使用Taro开发微信小程序的需求，还有很多没有发现的坑以及亮点，但是有一种，从入门到放弃的赶脚～如有问题，请指出哈，大家一起学习！
网友评论