taro多端实践初探

历史的发展，小程序风行一时，安卓/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开发团队。

同步发表于我的博客

最后在说一句，正在找工做，坐标北京，各位大佬有合适的机会推荐下哈！