Taro 簡介：Taro 是一個(gè)開放式跨端跨框架解決方案，支持使用 React/Vue/Nerv 等框架來開發(fā) 微信 / 京東 / 百度 / 支付寶 / 字節(jié)跳動(dòng) / QQ / 飛書 小程序 / H5 / RN 等應(yīng)用。

開發(fā)前需要了解的知識(shí)：React Hooks、微信小程序語法等

安裝
詳細(xì)的安裝步驟可以點(diǎn)擊 Taro

# 使用 npm 安裝 CLI
$ npm install -g @tarojs/cli

# 使用命令創(chuàng)建模板項(xiàng)目
taro init myApp(your project name)

# 進(jìn)入項(xiàng)目根目錄
$ cd myApp

# 使用 npm 安裝依賴
$ npm install

# 編譯運(yùn)行 具體編譯成 xx 小程序 可以查看目錄下的 package.json 文件中 scripts 屬性
$ npm run dev:weapp
$ npm run build:weapp

安裝完項(xiàng)目后，如果是微信小程序，還需安裝微信開發(fā)者工具，安裝后，再打開編譯運(yùn)行的項(xiàng)目，就可以看到效果了。一定要編譯運(yùn)行，將 Taro 程序裝換成 微信小程序 的語法，才能運(yùn)行成功。

項(xiàng)目說明

// 原生微信小程序
- pages
    - index
        - index.js
        - index.json
        - index.wxml
        - index.wxss
// Taro 開發(fā)小程序項(xiàng)目目錄
- pages
    - index
        - index.config.js
        - index.jsx
        - index.less

注意：微信小程序標(biāo)簽和 html 標(biāo)簽有區(qū)別：div -> view，span -> text 等等，而在 Taro 中要想編譯成多端小程序，要將原生的標(biāo)簽首字母大寫 view -> View ，text -> Text

鉤子函數(shù)
開發(fā)小程序的過程中，常用的鉤子函數(shù)是：

import { useState, useEffect } from "react";
import Taro, { getCurrentInstance, useReachBottom, pageScrollTo, useDidShow } from "@tarojs/taro"; 

一個(gè)簡單的下拉刷新控件的實(shí)現(xiàn)：

const [refresh, setRefresh] = useState<boolean>(false);

// 自定義下拉刷新被觸發(fā)
const onRefresh = () => {
  setRefresh(true);

  setTimeout(() => {
    setRefresh(false);
  }, 1000);
};

// 自定義下拉刷新被復(fù)位
const onRestore = () => {
  // 觸發(fā)相關(guān)請求
};

<ScrollView
  onRefresherRefresh={onRefresh}
  onRefresherRestore={onRestore}
  refresherEnabled
  refresherTriggered={refresh}
>
<View>下拉刷新</View>
</ScrollView>