微信小程序的前端框架（如 Taro、uni-app）使用教程

import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'

export default class Index extends Component {
  render () {
    return (
      <View className='index'>
        <Text>Hello, World!</Text>
      </View>
    )
  }
}

<template>
  <view class="content">
    <text>Hello, World!</text>
  </view>
</template>

<script>
export default {
  data() {
    return {}
  }
}
</script>

import Taro, { Component } from '@tarojs/taro'
import { View, Button, Input } from '@tarojs/components'

export default class Index extends Component {
  state = {
    text: ''
  }

  handleInput = (e) => {
    this.setState({
      text: e.detail.value
    })
  }

  render () {
    return (
      <View>
        <Input onInput={this.handleInput} placeholder="请输入文字" />
        <Button onClick={() => Taro.showToast({ title: this.state.text })}>显示Toast</Button>
      </View>
    )
  }
}

<template>
  <view>
    <input @input="handleInput" placeholder="请输入文字" />
    <button @click="showToast">显示Toast</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      text: ''
    }
  },
  methods: {
    handleInput(e) {
      this.text = e.detail.value
    },
    showToast() {
      uni.showToast({
        title: this.text
      })
    }
  }
}
</script>

import Taro, { Component } from '@tarojs/taro'
import { View, Form, Input, Button } from '@tarojs/components'
import { Formik } from 'formik'
import * as Yup from 'yup'

const validationSchema = Yup.object().shape({
  email: Yup.string().email('无效的邮箱地址').required('邮箱是必填项'),
  password: Yup.string().min(6, '密码至少6个字符').required('密码是必填项')
})

export default class Index extends Component {
  render () {
    return (
      <Formik
        initialValues={{ email: '', password: '' }}
        validationSchema={validationSchema}
        onSubmit={values => Taro.showToast({ title: JSON.stringify(values) })}
      >
        {({ handleChange, handleBlur, handleSubmit, values, errors, touched }) => (
          <Form onSubmit={handleSubmit}>
            <Input
              name="email"
              value={values.email}
              onInput={handleChange('email')}
              onBlur={handleBlur('email')}
              placeholder="邮箱"
            />
            {touched.email && errors.email && <View>{errors.email}</View>}
            <Input
              name="password"
              value={values.password}
              onInput={handleChange('password')}
              onBlur={handleBlur('password')}
              placeholder="密码"
              password
            />
            {touched.password && errors.password && <View>{errors.password}</View>}
            <Button formType="submit">提交</Button>
          </Form>
        )}
      </Formik>
    )
  }
}

<template>
  <view>
    <form @submit="onSubmit">
      <input name="email" v-model="form.email" placeholder="邮箱" />
      <view v-if="errors.email">{{ errors.email }}</view>
      <input name="password" v-model="form.password" placeholder="密码" password />
      <view v-if="errors.password">{{ errors.password }}</view>
      <button form-type="submit">提交</button>
    </form>
  </view>
</template>

<script>
import { reactive, computed } from 'vue'
import * as Yup from 'yup'

export default {
  setup() {
    const form = reactive({
      email: '',
      password: ''
    })

    const validationSchema = Yup.object().shape({
      email: Yup.string().email('无效的邮箱地址').required('邮箱是必填项'),
      password: Yup.string().min(6, '密码至少6个字符').required('密码是必填项')
    })

    const errors = computed(() => {
      try {
        validationSchema.validateSync(form, { abortEarly: false })
        return {}
      } catch (err) {
        return err.inner.reduce((acc, error) => {
          acc[error.path] = error.message
          return acc
        }, {})
      }
    })

    const onSubmit = (e) => {
      e.preventDefault()
      if (Object.keys(errors.value).length === 0) {
        uni.showToast({
          title: JSON.stringify(form)
        })
      }
    }

    return {
      form,
      errors,
      onSubmit
    }
  }
}
</script>

import Taro, { memo, useMemo, useCallback } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'

const ExpensiveComponent = memo(({ name }) => {
  // 这里是昂贵的计算
  const result = useMemo(() => {
    // 模拟一个耗时的计算
    return name.split('').reverse().join('')
  }, [name])

  const handleClick = useCallback(() => {
    console.log('Clicked!')
  }, [])

  return (
    <View onClick={handleClick}>
      <Text>{result}</Text>
    </View>
  )
})

<template>
  <view v-memo="[name]">
    <text>{{ reversedName }}</text>
  </view>
</template>

<script>
import { computed } from 'vue'

export default {
  props: {
    name: String
  },
  setup(props) {
    const reversedName = computed(() => {
      // 模拟一个耗时的计算
      return props.name.split('').reverse().join('')
    })

    return {
      reversedName
    }
  }
}
</script>