taro小程序与react结合
2018-12-20 本文已影响0人
mensionyu
- yarn global add @tarojs/cli 安装taro包
- taro init todos 使用taro创建一个项目
- npm run dev:weapp 开启项目
使用微信开发者工具打开项目的dist目录,编译成小程序的目录
src目录是使用taro+react框架写的js页面
index.js代码如下
import Taro, { Component } from '@tarojs/taro';
import { View, Text } from '@tarojs/components';
import './index.scss';
export default class Index extends Component {
config = {
navigationBarTitleText: '首页'
}
constructor(props) {
super(props);
this.state = {
list: [
'起床',
'吃饭',
'打农药'
],
inputValue: ''
}
}
componentWillMount() {
}
componentDidMount() {
}
componentDidUpdate() {
}
componentWillUnMount() {
}
addItem () {
let { list } = this.state;
const inputValue = this.inputValue;
if (inputValue == '') return;
list.push(inputValue);
this.setState({
list,
inputValue: ''
})
}
delItem(index){
let { list } = this.state;
list.splice(index,1);
console.log(index);
this.setState({
list,
})
}
inputHandler(e) {
this.inputValue = e.target.value;
}
render () {
const { list , inputValue } = this.state
return (
<View className="index">
<View className="list_wrap">
<Text>Todo List</Text>
<Input className="input" type="text" value={inputValue} onInput={this.inputHandler.bind(this)}/>
<Text className="add" onClick={this.addItem.bind(this)}>添加</Text>
{
list.map((item, index) => {
return <View>
<Text>{index + 1}.{item}</Text>
<Text className="del" onClick={this.delItem.bind(this,index)}>删除</Text>
</View>
})
}
</View>
</View>
)
}
}
Index组件内方法的this绑定使用bind()或bind(params) 这是这个框架的特别之处
gitup已经有很清楚的说明:https://github.com/NervJS/taro
使用taro完成小程序开发 https://segmentfault.com/a/1190000016794779
接口api封装参考文章地址https://segmentfault.com/a/11...