Taro-UI+VScode开发一个简单的页面

今天我们编写一个简单的页面，主要由输入框、选择器、图标、以及按钮等组件组成的一个页面。
首先我们先在cmd创建一个项目：
1.检查是否安装了Taro：

taro -v

如果没有安装，请进行安装taro

npm install -g @tarojs/cli

2.安装完成之后我们就可以进行项目的创建了：

taro init 项目名

可以看到我们的项目已经创建成功了。
我一般都会把项目都放在一个文件夹中，刚刚在创建的时候直接创建在C盘了，所以我们去把C盘中的项目剪切到专门的文件夹中。


当然我们也可以进入到该文件夹下再进行项目的创建。

创建好项目后我们在VScode中打开该项目。
然后进行下面步骤：

我们就可以在VScode上面直接启动项目了：

npm run dev:weapp

我们在微信开发者工具中导入该项目，要导入文件名为dist的文件。

在微信开发者中我们可以看到：

说明我们的项目已经运行成功。
3.在项目中安装Taro UI：

npm install taro-ui

添加完taro-ui的组件之后，我们就可以进行程序的编写了。
index。jsx中的代码：

import {
    View, Text, Picker, Button } from '@tarojs/components'
import Taro from '@tarojs/taro'
import {
    AtList, AtListItem } from 'taro-ui'
import {
    AtIcon } from 'taro-ui'
import {
    Component } from 'react'
import {
    AtLoadMore } from 'taro-ui'
import {
    AtButton, AtInput } from 'taro-ui'
import "taro-ui/dist/style/components/button.scss" // 按需引入
import './index.less'

export default class Index extends Component {
   
  handleClik() {
   
    this.setState({
   
      status: '提交成功'
    })
  }
  state = {
   
    selector: ['请选择', '今日头条', '百度信息流', '安居客端口', '商桥客户', '网络媒体', '公司后台', '公客', '自来客户', '上门客户', '来电客户', '360线索', '海口对接'],
    selectorChecked: '请选择',
    khyx: ['很强', '强', '一般', '不强'],
    khyxChecked: '请选择',
    zykh: ['是', '否'],
    zykhChecked: '请选择',
    zjys: ['200W以上', '1000W以上', '300-500W', '150-200W', '100W', '50-100W', '60-80W', '30-50W'],
    zjysChecked: '请选择',
    zxlp: ['阿斯顿楼盘', '王企鹅楼盘', '萨达姆楼盘', '预售的楼盘', '阿瑟东楼盘', '阿萨德楼盘'],
    zxlpChecked: '请选择',
    nl: ['29岁以下', '30-39岁', '40-49岁', '50-60岁', '60岁以上'],
    nlChecked: '请选择',
    gfmd: ['首套刚需', '二次改善', '度假', '养老', '投资', '商务接待', '投资兼度假'],
    gfmdChecked: '请选择',
    fwcx: ['东', '南', '西', '北', '东南', '西南', '东北', '西北'],
    fwcxChecked: '请选择',
    mjyq: ['80平米以', '80-120平米', '120-160平米', '160-200平米', '200平米以上'],
    mjyqChecked: '请选择',
    yxqy: ['海口区域', '广东区域', '广西区域', '三亚区域', '亚洲区域', '其他'],
    yxqyChecked: '请选择',
    fkfs: ['一次性', '分期', '按揭', '其他'],
    fkfsChecked: '请选择',
    khzy: ['事业单位', '国企', '外企', 'IT/电商', '金融投资', '房地产', '贸易出口', '电机/重工', '石/化/矿', '其他'],
    khzyChecked: '请选择',
    wylx: ['公寓', '商铺', '别墅', '商住', '海景', '住宅'],
    wylxChecked: '请选择',
    pprk: ['认可', '不认可', '不了解'],
    pprkChecked: '请选择',
    multiArray: [['无脊柱动物', '脊柱动物'], ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'], ['猪肉绦虫', '吸血虫']],
    objectMultiArray: [
      [
        {
   
          id: 0,
          name: '无脊柱动物'
        },
        {
   
          id: 1,
          name: '脊柱动物'
        }
      ], [
        {
   
          id: 0,
          name: '扁性动物'
        },
        {
   
          id: 1,
          name: '线形动物'
        },
        {
   
          id: 2,
          name: '环节动物'
        },
        {
   
          id: 3,
          name: '软体动物'
        },
        {
   
          id: 3,
          name: '节肢动物'
        }
      ], [
        {
   
          id: 0,
          name: '猪肉绦虫'
        },
        {
   
          id: 1,
          name: '吸血虫'
        }
      ]
    ],
    multiIndex: [0, 0, 0],
  }
  bindMultiPickerChange = e => {
   
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setState({
   
      multiIndex: e.detail.value
    })
  }
  bindMultiPickerColumnChange = e => {
   
    console.log('修改的列为', e.detail.column, '，值为', e.detail.value);
    var state = {
   
      multiArray: this.state.multiArray,
      multiIndex: this.state.multiIndex
    };
    state.multiIndex[e.detail.column] = e.detail.value;
    switch (e.detail.column) {
   
      case 0:
        switch