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开发微信小程序的需求，还有很多没有发现的坑以及亮点，但是有一种，从入门到放弃的赶脚～如有问题，请指出哈，大家一起学习！

Taro避坑指南