Taro 框架小程序开发

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>