初识泰罗奥特曼

Van 摄影-->喜欢摄影的IT从业人员（Base上海）😁

Taro 作为儿时最喜欢的奥特曼角色之一，宇宙警备队总教官！现如今 Taro 成为了京东开源的适配多端框架！

快速搭建了一个泰罗

前提：保证 node 版本>=8.0.0 的情况

Step1.全局安装 Taro

$ yarn global add @tarojs/cli

Step2.使用命令创建模板项目

$ taro init MyFirstTaro

Step3.使用 yarn 安装依赖

$ cd MyFirstTaro
$ yarn install

编译预览及打包

目前我只需要适配微信小程序，所以只对微信小程序进行编译预览及打包

$ yarn dev:weapp --watch //添加watch来监听文件修改
$ yarn build:weapp --watch

文件配置

格式化工具

VsCode 安装好格式化插件 prettierrc 的前提下

.prettierrc.js

/**
 * 默认的一些配置
 * printWidth: 80,
 * tabWidth: 2,
 * useTabs: false
 * quoteProps:as-needed 对象的属性只有需要时才添加引号
 * jsxSingleQuote: false jsx中使用单引号
 * trailingComma: none 数组和对象的尾逗号
 * bracketSpacing: true 对象左右大括号各有一个空格 { foo: bar }
 * jsxBracketSameLine: false jsx中标签多行属性的第一个 > 是单独一行还是在行尾
 * arrowParens: avoid 箭头函数只有一个参数时，尽可能地省略括号
 */
module.exports = {
  singleQuote: true,
  semi: false,
  arrowParens: "always",
  trailingComma: "es5" // 是否使用尾逗号，有三个可选值：<none|es5|all>
};

// 单引号，无分号，箭头函数参数必有括号，尾逗号

project.config.json 配置
Taro 模板创建的项目默认拥有 project.config.json 这一项目配置文件，但 只能用于微信小程序，要适配其他平台要进行相应 json 文件的配置，具体可看Taro 官网-项目配置

{
  "miniprogramRoot": "dist/",
  "projectname": "MyFirstTaro",
  "description": "Can't Tell U",
  "appid": "wxf694b87c0666666",
  "setting": {
    "urlCheck": true,
    "es6": false,
    "postcss": false,
    "minified": false,
    "coverView": true,
    "babelSetting": {
      "ignore": [],
      "outputPath": ""
    }
  },
  "compileType": "miniprogram",
  "simulatorType": "wechat",
  "simulatorPluginLibVersion": {},
  "condition": {}
}

与原生写法的那些不同

• bindfocus改用onFocus替代

<Input bindfocus={this.onFocus} />  => <Input onFocus={this.onFocus} />

• bindtap改用onClick替代

<View bindtap={this.onTag} /> => `<View onClick={this.onTag} />`

• animationEnd改用onAnimationEnd替代

<CustomElement animationEnd={this.props.onAnimationEnd} /> => <CustomElement onAnimationEnd={this.props.onAnimationEnd} />

• maxlength="15"改用maxLength={15}替代
• input中password改写为

Taro页面模版

import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import './app.less'
import './index.less'

class LoginFindpassword extends Component {
  constructor(props) {
    super(props)
    this.state = {}
  }
  // 项目配置
  config = {
    navigationBarTitleText: '忘记密码',
  }
  componentWillMount() {}
  componentDidMount() {}
  componentDidShow() {}
  componentDidHide() {}
  // JS方法
  render(){
    const {} = this.props;
    const {  } = this.state;
    return(
        <View className='page'>
          <Text>Hello Taro</Text>
        </View>
    )
  }
}
export default LoginFindpassword

未完待续，继续认识泰罗😁