Taro 跨端开发框架

# 安装 Taro CLI
npm install -g @tarojs/cli
 
# 创建新项目
taro init myApp
 
# 选择框架和模板
# - 框架：React/Vue/Nerv
# - 模板：默认模板/TypeScript 模板

myApp/
├── config/                 # 项目编译配置目录
│   ├── dev.js             # 开发环境配置
│   ├── index.js           # 默认配置
│   └── prod.js            # 生产环境配置
├── src/                   # 源码目录
│   ├── pages/             # 页面文件目录
│   │   └── index/         # 示例页面
│   ├── app.config.js      # 全局配置
│   ├── app.js             # 项目入口文件
│   └── app.scss           # 全局样式
├── package.json
└── project.config.json    # 微信小程序项目配置

import { Component } from 'react'
import { View, Text } from '@tarojs/components'
import './index.scss'
 
export default class Index extends Component {
  state = {
    title: 'Hello Taro!'
  }
 
  componentWillMount() {}
 
  componentDidMount() {}
 
  componentWillUnmount() {}
 
  componentDidShow() {}
 
  componentDidHide() {}
 
  render() {
    return (
      <View className='index'>
        <Text>{this.state.title}</Text>
      </View>
    )
  }
}

import { useState, useEffect } from 'react'
import { View, Text } from '@tarojs/components'
 
export default function Index() {
  const [count, setCount] = useState(0)
 
  useEffect(() => {
    console.log('组件挂载完成')
  }, [])
 
  return (
    <View>
      <Text>计数: {count}</Text>
      <Button onClick={() => setCount(count + 1)}>增加</Button>
    </View>
  )
}

// app.config.js
export default {
  pages: [
    'pages/index/index',
    'pages/user/index',
    'pages/about/index'
  ],
  window: {
    backgroundTextStyle: 'light',
    navigationBarBackgroundColor: '#fff',
    navigationBarTitleText: 'WeChat',
    navigationBarTextStyle: 'black'
  },
  tabBar: {
    list: [
      {
        pagePath: 'pages/index/index',
        text: '首页'
      },
      {
        pagePath: 'pages/user/index',
        text: '我的'
      }
    ]
  }
}

// 平台特定代码
if (process.env.TARO_ENV === 'weapp') {
  // 微信小程序特定代码
} else if (process.env.TARO_ENV === 'h5') {
  // H5 特定代码
} else if (process.env.TARO_ENV === 'rn') {
  // React Native 特定代码
}

// 使用 Taro 提供的样式单位
.container {
  width: 750rpx; // 小程序
  height: 100vh; // H5
  padding: 20px; // 通用
}

npm install @tarojs/redux @tarojs/redux-h5 redux react-redux

import { Provider } from 'react-redux'
import { store } from './store'
 
function App({ children }) {
  return (
    <Provider store={store}>
      {children}
    </Provider>
  )
}

npm install mobx mobx-react

import Taro from '@tarojs/taro'
 
// 发起请求
Taro.request({
  url: 'https://api.example.com/data',
  method: 'GET',
  success: (res) => {
    console.log(res.data)
  }
})

// 设置存储
Taro.setStorage({
  key: 'userInfo',
  data: { name: 'John', age: 25 }
})
 
// 获取存储
Taro.getStorage({
  key: 'userInfo',
  success: (res) => {
    console.log(res.data)
  }
})