Taro 简介：Taro 是一个开放式跨端跨框架解决方案，支持使用 React/Vue/Nerv 等框架来开发 微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ / 飞书 小程序 / H5 / RN 等应用。
开发前需要了解的知识：React Hooks、微信小程序语法等
安装
详细的安装步骤可以点击 Taro
# 使用 npm 安装 CLI
$ npm install -g @tarojs/cli
# 使用命令创建模板项目
taro init myApp(your project name)
# 进入项目根目录
$ cd myApp
# 使用 npm 安装依赖
$ npm install
# 编译运行 具体编译成 xx 小程序 可以查看目录下的 package.json 文件中 scripts 属性
$ npm run dev:weapp
$ npm run build:weapp
安装完项目后，如果是微信小程序，还需安装微信开发者工具，安装后，再打开编译运行的项目，就可以看到效果了。一定要编译运行，将 Taro 程序装换成 微信小程序 的语法，才能运行成功。
项目说明
// 原生微信小程序
- pages
- index
- index.js
- index.json
- index.wxml
- index.wxss
// Taro 开发小程序项目目录
- pages
- index
- index.config.js
- index.jsx
- index.less
注意：微信小程序标签和 html 标签有区别：div -> view，span -> text 等等，而在 Taro 中要想编译成多端小程序，要将原生的标签首字母大写 view -> View ，text -> Text
钩子函数
开发小程序的过程中，常用的钩子函数是：
import { useState, useEffect } from "react";
import Taro, { getCurrentInstance, useReachBottom, pageScrollTo, useDidShow } from "@tarojs/taro";
一个简单的下拉刷新控件的实现：
const [refresh, setRefresh] = useState<boolean>(false);
// 自定义下拉刷新被触发
const onRefresh = () => {
setRefresh(true);
setTimeout(() => {
setRefresh(false);
}, 1000);
};
// 自定义下拉刷新被复位
const onRestore = () => {
// 触发相关请求
};
<ScrollView
onRefresherRefresh={onRefresh}
onRefresherRestore={onRestore}
refresherEnabled
refresherTriggered={refresh}
>
<View>下拉刷新</View>
</ScrollView>
