如今小程序已经充斥这我们的生活，腾讯阿里头条都在分食这个大蛋糕，虽说他们之前的实现大同小异，但是一份代码可以编译成不同平台的话 还是给我们开发带来了很大的便利性，所以今天就入手了京东的Taro。
注意：taro基于react语法规范开发的，所以之前没接触过react的小伙伴，希望这篇文章能够对你有所帮助
1.安装及使用
安装之前需要node的环境，没有环境的小伙伴自行配置一下
因为国内的网络环境使用npm 安装的时候可能会报错 建议使用yarn
⚠️yarn install 出错
yarn ERR! Maximum call stack size exceeded
降级 ： yarn install -g npm@5.4.0
升级 ： yarn install -g npm 升级到最新版
2.数据
之前小程序都是使用data,这里面使用state
this.setState({
name: '捡豆豆'
});
这个地方就有个注意点：在设置完数据之后立即使用name 此时name的值还是上一次的,它设置数据是异步的，所以要在它回调之后才能拿到修改的值
this.setState({
name: '捡豆豆'
},()=>(
console.log('name',name)
));
3.图片
本地图片的使用有两种方式 improt require
import bottomListIv2 from '../../../res/image/example2.png'
<Image src={require('../../../res/image/icon_look.png')}/>
⚠️<Image src={'../../../res/image/icon_look.png'}/>这种写法是可以编译引用的 如下写法是不可以的，因为没有预编译，打包之后是找不的 所以推荐以上两种方式⬆️⬆️
this.setState({
url: '../../../res/image/icon_look.png'
});
<Image src={this.state.url}/>
4.组件传值
子组件通过this.props拿到主组件传递过来的值
//主组件
class Index extends Component {
this.state = {
name: "捡豆豆",
title: 'taro教程'
}
render() {
return (
<View>
<Name name={this.state.name} />
<Link site={this.state.title} />
</View>
);
}
}
//子组件
class Name extends Component {
render() {
return (
<View>{this.props.name}</View>
);
}
}
class Link extends Component {
render() {
return (
<View>
{this.props.title}
</View>
);
}
}
看到这里 小伙伴知道怎么从主组件拿值 那是否有疑问，主组件怎么调用子组件呢🤔️
两种方式
1. Ref 可以用来绑定到 render() 输出的任何组件上
1⃣️用字符串创建 ref
<TabView ref='tabView' />
//加载更多的时候拿到子组件 调用它的加载方法
onReachBottom() {
var tab = this.refs.tabView
tab.onReachBottom();
}
2⃣️通过函数创建 ref（推荐）
<TabView ref={c=>this.TabView=c}/>
//加载更多的时候拿到子组件 调用它的加载方法
onReachBottom() {
if(this.TabView){
this.TabView.onReachBottom()
}
}
2.props掉用方法传递自身
//子组件tabview中
componentWillMount() {
this.props.onInitTabView(this)
}
//主组件中
<TabView onInitTabView={c=>this.TabView=c}/>
onReachBottom() {
if(this.TabView){
this.TabView.onReachBottom()
}
}
5.事件处理
class Index extends Component{
state = {name:'Hello world!'}
preventPop(name, e){ //事件对象e要放在最后
e.preventDefault();
alert(name);
}
render(){
return (
<View>
<p>hello</p>
{/* 通过 bind() 方法传递参数。 */}
<a href="https://reactjs.org" onClick={this.preventPop.bind(this,this.state.name)}>Click</a>
</View>
);
}
}
⚠️此处有两个注意的点：
1⃣️onClick={this.preventPop(this.state.name)} 直接传值 这种方式虽然也能接收到值 但是不允许的
2⃣️onClick={this.preventPop.bind(this,this.state.name)}传值时 事件对象 e 要排在所传递参数的后面 接收的时候要注意
6.条件渲染
function UserGreeting(props) {
return <h1>欢迎回来!</h1>;
}
function GuestGreeting(props) {
return <h1>请先注册。</h1>;
}
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <UserGreeting />;
}
return <GuestGreeting />;
}
render(
return (<Greeting isLoggedIn={false} />
)
)
true && expression 总是返回 expression，而 false && expression 总是返回 false。因此可以&&来做条件渲染
<View>
<h1>Hello!</h1>
{unreadMessages.length > 0 &&
<h2>
您有 {unreadMessages.length} 条未读信息。
</h2>
}·
</View>
7.列表遍历
<ScrollView className='top_sv' scrollX>
{topList.map(list => (
<View className='top_list_item' key>
<Image className='top_list_item_bg' src={list.image}></Image>
<Text className='top_list_item_title'>{list.foodname}</Text>
<View className='top_list_item_bottom'>
<Image className='top_list_item_avatar' src={list.url}></Image>
<Text className='top_list_item_name'>{list.name}</Text>
</View>
</View>
))}
</ScrollView>
小伙伴们如果这篇文章对你学习taro有用的话，赶紧关注一下 后面再继续更新❤️❤️
