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 文件 主要是该页面的配置信息 一般可以展示 该页面的导航栏 标题、颜色等信息
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‘