Taro 从 0 搭建微信小程序：小白工作记录

2024-02-12 11:30:58

作为一名 Android 开发小白，最近我踏上了拓宽技术视野之旅，尝试用 Taro 框架构建一个微信小程序。由于 Taro 采用 React 风格，而我之前一直使用 Vue，因此这对我来说是一次全新的体验。

在这个过程中，我将详细记录我的学习心得，希望为和我一样的小白提供一些指引，帮助大家轻松入门 Taro。

本文的目标是创建一个简单的 Todo 小程序，用来记录工作任务。下面，我将分步介绍具体实现过程。

首先，需要安装必要的依赖项。在终端中输入以下命令：

npm install -g @tarojs/cli

安装完成后，使用 Taro CLI 创建一个新项目：

taro init my-todo

进入项目目录，安装依赖项：

cd my-todo
npm install

接下来，在 src/pages/index/index.js 文件中编写 Todo 组件：

import Taro, { useState } from '@tarojs/taro'

export default function Todo() {
  const [todos, setTodos] = useState([])

  const addTodo = () => {
    setTodos([...todos, ''])
  }

  const removeTodo = (index) => {
    const newTodos = [...todos]
    newTodos.splice(index, 1)
    setTodos(newTodos)
  }

  return (
    <View>
      {todos.map((todo, index) => (
        <View key={index}>
          <Text>{todo}</Text>
          <Button onClick={() => removeTodo(index)}>删除</Button>
        </View>
      ))}
      <Button onClick={addTodo}>添加</Button>
    </View>
  )
}

最后，在 src/app.js 文件中配置路由：

import { Component } from '@tarojs/taro'
import { Router } from '@tarojs/router'
import Index from './pages/index/index'

export default class App extends Component {
  config = {
    pages: [
      'pages/index/index'
    ]
  }

  render() {
    return <Router mode="hash" routes={[{ component: Index }]} />
  }
}