[小程序学习2--Taro以及Taro-ui]

Taro 框架

Taro 是一个跨端跨框架的解决方案，Taro 框架也包含了丰富的组件库，比较常用的就是 表单组件。
一般在pc 端的系统中最常用的标签就是<dev> 而在小程序中使用的是<View> 标签
还有文本标签<Text>
但是在React中，我们要使用Taro 就要先引入才能使用

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

import React, { Component } from 'react'
import { View, Text } from '@tarojs/components'

export default class index extends Component {
  render () {
    return (
      <View className='index'>
        <Text>组件信息</Text>
      </View>
    )
  }
}

在创建小程序页面时，首先创建一个文件，比如说 创建登陆页面 ，首先创建文件Login ，该文件夹下包含三个文件 分别是

• index.config.js
• index.jsx
• index.scss

index.config.js 文件 主要是该页面的配置信息 一般可以展示 该页面的导航栏 标题、颜色等信息

export default {
  navigationBarTitleText: '',// 导航栏标题文字内容
  enablePullDownRefresh: true,//是否开启当前页面的下拉刷新。
  usingComponents: {},//页面自定义组件配置
  navigationBarBackgroundColor:'#F8F9FD' // 导航栏背景颜色
}

index.jsx 主要是用来展示页面信息，请求后端接口

import React,{Component} from 'react'
import {View,Text,Button} from '@tarojs/components'
export default class index extends Component{
   construstor(props){
   super(props)
    this.state = {
        code:null
     }
   }
   componentDidMount(){
   }
   render(){
      return (
           <View className="index">
              <View className="title">欢迎登录</View>
              <Button className="btn">登录</Button>
          </View>
     )
 }
}

index.scss 文件是 样式文件

.index{
   background-color:#fff;
   .title{
        text-align:center;
        font-size:14px;
        font-weight:400;
        line-height: 15px;
    }
    .btn{
        display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 16px;
		width: 351px;
		height: 54px;
		background: #D65659;
		box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.043);
		border-radius: 100px;
		color:#fff;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 17px;
		line-height: 54px;
    }
}

这样就完成了所写一个页面所需要的所有工作 ，但是不要忘了将这个页面路径添加到 app.config.js 的pages路径中

小程序中父组件获取子组件的值

现在有一个功能 父组件组要获取子组件输入框的值 ，在父组件中判断是否输入 ，如果没有输入则提示输入。
父组件 index.jsx 中

import React,{Component} from 'react'
import {View } from '@tarojs/component'
const Edit = (props) =>{

 const [vcCode, setVcCode] = useState('');
 
 const  handleVCChange = (code) => {
    setVcCode(code);
  }; 

 return(
 <View>
    <View>code的值为：{vcCode}</View>
    <ListCode onChange={handleVCChange}></ListCode>
</View>

  )

}
export default index

对于子组件

import React,{Component} from 'react'
import {View,Input } from '@tarojs/component'
const ListCode = (props) =>{

 const { onChange} = props;
 //  在这个函数里判断父组件传递过来的函数  如果存在 就将输入的值作为入参传递给父组件函数
  const handleInput = (e) => {
    if (onChange) onChange(e.detail?.value ?? '');
  };

 return(
    <View>
          <Input
            onInput={(e) => handleInput(e)}
            type="number"
            placeholder="请输入"
          />
    </View>
  )

}
export default ListCode

这就就可以完成父组件获取子组件的值

自定义小程序导航栏标题

对于小程序中的单个页面 可以在index.config.js中定义导航栏配置，也可以自定义导航栏的样式。

index.config.js 文件
export default{
   navigationBarTitleText: '首页'
   navigationBarTextStyle:'white' 
   navigationBarBackgroundColor：’#fff‘
}

也可以自定义导航栏，只需要加一行 navigationStyle：’custom‘ 就可以自己设置导航栏 ，可以设置导航栏的标题 以及返回键

navigationStyle：’custom‘