前提：因为需要做个采集的h5，想用React写，因此选择了Taro+Taro UI，其实之前也写过，但是在正式项目中并没有使用过，因此踩了一些坑

Taro官网： ​​​​​​Taro 介绍 | Taro 文档

一、搭建项目

可以从官网的快速入手进行搭建，并且引入Taro UI

二、生命周期

• onLoad()

• componentWillMount ()

• componentDidMount ()

• onReady() 只有页面组件才会触发
• onHide() 只有页面组件才会触发
• onLaunch() 对应小程序
• componentDidShow() 程序启动，或切前台时触发 对应onShow
• componentDidHide() 程序切后台时触发 对应onHide
• onPageNotFound() 程序要打开的页面不存在时触发
• onPullDownRefresh() 监听用户下拉动作
• onReachBottom() 监听用户上拉触底事件。
• onPageScroll (Object) 监听用户滑动页面事件
• onAddToFavorites (Object) 监听用户点击右上角菜单“收藏”按钮的行为，并自定义收藏内容

三、React Hooks

并没有所有组件都采用React Hooks，只在表单组件采用了

1. 接受父组件传来的数据（props）

2. 使用useState这个状态钩子

import { useState } from 'react'
export default function cForm(props) {
	const { info, formTitle, setForm, rules, submitForm } = props
	const [formInfo, setFormInfo] = useState(info)
    const handleChange = (item) => {
		return async evt => {
			let value
			switch (item.type) {
				case 'picker': case 'date':
					value = evt.detail.value
					break
				default:
					value = evt
					break
			}
			setFormInfo({ ...formInfo, [item.id]: value })
		}
	}
    return (
		<View>
			<AtForm className='cform'>
				{contentElemnt}
			</AtForm>
			<AtButton type='primary' className='mt50 ml30 mr30 center' onClick={handleClick}>下一步</AtButton>
		</View>
	)
}

四、踩过的坑

1. CheckboxGroup （PS：忘记那时候踩了啥坑，先记录一下）

changeIsSureRead(evt) { // 已阅读
    this.setState({ isSureRead: evt.detail.value.length > 0 })
}

<CheckboxGroup onChange={this.changeIsSureRead.bind(this)}>
	<Checkbox value='1' ><View className='check'>已阅读并同意<Text className='text-blue'>《用户须知》</Text>的内容</View></Checkbox>
</CheckboxGroup>

2.Taro-ui 表单校验不好

详细请参考另外一篇文章：Taro UI 表单验证_周皮皮皮皮皮皮的博客-CSDN博客

3. 打包后图片显示不出来，Taro UI的字体在h5上面显示超级大

一开始，图片显示不出来，是因为我写在css里面，后面我将图片改成图片引入。但是后面css的又可以显示出来了，所以莫名其妙

<Image src={require('../../assets/images/loginbg.png')} className='bg-login'></Image>

打包出来后，Taro UI字体在H5上面超级无敌大，解决方法如下

安装依赖

npm install postcss-px-scale -dev

在config的index.js加上以下代码

 在对应位置加上以下代码

// 找到相应位置加上这两块代码
'postcss-px-scale': {
	enable: true,
	config: {
		scale: 0.5, //缩放为1/2
		units: 'rpx',
		includes: ['taro-ui']
	}
},

esnextModules: ['taro-ui'],