taro demos & taro 组件库

taro demos & taro 组件库

ui demo

https://github.com/qit-team/taro-yanxuan

https://github.com/fengchunsgit/taro-meituan

tarojs/components

Text, View, Image

https://www.npmjs.com/package/@tarojs/components

https://taro-docs.jd.com/taro/docs/components/viewContainer/view.html

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

export default class PageView extends Component {
  constructor() {
    super(...arguments)
  }

  render() {
    return (
      <View className='components-page'>
        <Text>flex-direction: row 横向布局</Text>
        <View className='flex-wrp' style='flex-direction:row;'>
          <View className='flex-item demo-text-1'/>
          <View className='flex-item demo-text-2'/>
          <View className='flex-item demo-text-3'/>
        </View>
        <Text>flex-direction: column 纵向布局</Text>
        <View className='flex-wrp' style='flex-direction:column;'>
          <View className='flex-item flex-item-V demo-text-1'/>
          <View className='flex-item flex-item-V demo-text-2'/>
          <View className='flex-item flex-item-V demo-text-3'/>
        </View>
      </View>
    )
  }
}

taro 组件库说明

https://nervjs.github.io/taro/docs/components-desc.html

https://github.com/NervJS/taro/tree/2.x/packages/taro-components/src/components

https://github.com/NervJS/taro/blob/2.x/packages/taro-components/src/index.js

demo

import Taro, { Component, Config } from '@tarojs/taro'
import {
  View,
  Text,
  Image,
} from '@tarojs/components'
import './index.scss'

import {
  AtButton,
  AtFloatLayout,
} from 'taro-ui'

const log = console.log;

export default class TicketCard extends Component {
  config: Config = {
    navigationBarTitleText: '立即购票'
  }
  constructor () {
    super(...arguments)
    this.state = {
      current: 0,
      isOpened: false,
    }
  }
  gotoIndex () {
    Taro.navigateTo({
      url: '/pages/index/index',
      // url: '/pages/index',
    })
  }

  handleClose () {
    this.setState({
      isOpened: false,
    })
  }

  handleOpen () {
    this.setState({
      isOpened: true,
    })
  }
  componentWillMount () { }

  componentDidMount () { }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  render () {
    return (
      <View className='at-row'>
        <View className='at-col at-col-12'>
          <Text>TicketCard</Text>
          <Image className='img' src={require('../../assets/alipay.png')} />
        </View>
      </View>
    )
  }
}

---

微信组件

https://developers.weixin.qq.com/miniprogram/dev/component/

Taro UI

https://github.com/NervJS/taro-ui

https://github.com/NervJS/taro-ui/blob/dev/src/index.ts

https://github.com/NervJS/taro-ui/tree/dev/src/components

---

Taro 框架

https://nervjs.github.io/taro/docs/tutorial.html#页面配置

Taro 规范

https://nervjs.github.io/taro/docs/spec-for-taro.html

Taro 生命周期

https://nervjs.github.io/taro/docs/state.html

Taro 函数式组件

https://nervjs.github.io/taro/docs/functional-component.html#类函数式组件

Taro 最佳实践

https://nervjs.github.io/taro/docs/best-practice.html

refs

---

---

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---