内容简介：历史的发展，小程序风行一时，安卓/ios/H5/微信小程序/支付宝小程序/头条小程序，产品经理让你适配这么多，你的心情如何呢？然而总会有人给咱们造出合适的工具，解放生产力，一次编码，多端运行。开始探索之旅吧！安装 Taro 开发工具 @tarojs/cli使用 npm 或者 yarn 全局安装，或者直接使用npx
历史的发展，小程序风行一时，安卓/ios/H5/微信小程序/支付宝小程序/头条小程序，产品经理让你适配这么多，你的心情如何呢？然而总会有人给咱们造出合适的工具，解放生产力，一次编码，多端运行。开始探索之旅吧！
taro安装
安装 Taro 开发工具 @tarojs/cli
使用 npm 或者 yarn 全局安装，或者直接使用npx
$ npm install -g @tarojs/cli $ yarn global add @tarojs/cli
使用命令创建模版
$ taro init multiportApp
按照自己情况选择安装即可
启动
进入对应目录，执行命令启动。
npm run dev:h5
会出现启动成功的界面，如下
自动就会打开浏览器，出现hello world界面，表示项目启动成功了！
todolist功能实现
添加数据
在pages/index/index.js文件中添加如下
constructor(props){
super(props);
this.state={
val:'',
todos:[
{
title:'吃饭',
done:false
},
{
title:'睡觉',
done:false
},
{
title:'coding',
done:false
}
]
}
}
渲染数据
render () {
return (
<View className='index'>
<Text>Hello world!</Text>
{
this.state.todos.map((item,index)=>{
return <View key={index}>{item.title}</View>
})
}
</View>
)
}
列表渲染搞定。
添加输入框和按钮
引入组件
import { View, Text,Input,Button } from '@tarojs/components'
render修改
render () {
return (
<View className='index'>
<Text>Hello world!</Text>
<Input value={this.state.val} onInput={this.handleInput}></Input>
<Button onClick={this.handleClick}>添加</Button>
{
this.state.todos.map((item,index)=>{
return <View key={index}>{item.title}</View>
})
}
</View>
)
}
添加方法
handleInput=(e)=>{
this.setState({
val:e.detail.value
})
}
handleClick=()=>{
this.setState({
todos:[...this.state.todos,{title:this.state.val,done:false}],
val:''
})
}
一个简单的todolist就算完成了，界面有点丑，继续优化！
优化，引入UI库
安装taro-ui
npm install --save taro-ui
简单配置
由于引用 node_modules 的模块，默认不会编译，所以需要额外给 H5 配置 esnextModules ，在 taro 项目的 config/index.js 中新增如下配置项：
h5: {
esnextModules: ['taro-ui']
}
全局引入
在app.scss中引入
@import 'taro-ui/dist/style/index.scss'
在index.js中引入
import { AtList, AtListItem } from "taro-ui"
修改render
render () {
return (
<View className='index'>
<Text>Hello world!</Text>
<Input value={this.state.val} onInput={this.handleInput}></Input>
<Button onClick={this.handleClick}>添加</Button>
<AtList>
{
this.state.todos.map((item,index)=>{
return <AtListItem key={index} title={item.title}></AtListItem>
})
}
</AtList>
</View>
)
}
添加滑块开关，改变item状态
<AtListItem key={index} title={item.title} className={{'done':item.done}} isSwitch switchIsCheck={item.done} onSwitchChange={(e)=>this.handleChange(e,index)}></AtListItem>
增加一个isSwitch,switch切换事件，class。
增加事件
handleChange=(e,i)=>{
console.log(e,i);
const todos=[...this.state.todos];
todos[i].done=e.detail.value;
this.setState({
todos
})
}
在同级目录下index.scss中增加样式
.done{
color: red;
text-decoration: line-through;
}
效果
h5效果
微信小程序中的效果
这就是这个框架的威力，感谢taro开发团队。)
最后在说一句，正在找工作，坐标北京，各位大佬有合适的机会推荐下哈！
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
无线：网络文化中激进的经验主义
[英] 阿德里安·麦肯齐 / 张帆 / 上海译文出版社 / 2018-9
本书研究了无线是如何成为当代人类经验的主角的。从路由器、智能电话、电子书、城市到在线工作、服务协议、玩具以及国家等各个方面，人们已经感觉到了无线技术所引发的变革。本书作者援引一个世纪之前的哲学技术来分析当代最前沿的后网络时代的人类状况。基于威廉•詹姆斯的实用主义哲学相关的彻底经验主义，作者提出了把失序的无线网络世界与人们的感知匹配起来的新方式。一起来看看 《无线：网络文化中激进的经验主义》 这本书的介绍吧!
