ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

用Taro做个微信小程序Todo, 小白工作记录

2020-04-20 18:07:31  阅读:285  来源: 互联网

标签:index Taro 微信 list inputVal taro Todo


微信小程序框架: Taro

做微信小程序的框架, 几个比较主流的:

前两者都是Vue风格的, Taro是React的.

本篇本着学习的目的, 用Taro做一个简单的小程序.
代码在这里: https://github.com/mengdd/mini-program-todo
这是预览图:
todo list

背景:
一直做Android开发, 最近想把其他各种技术都撸一撸, 拓展一下视野.
之前练过微信小程序原生开发的例子, 基本上只知道个大概, 翻书马冬梅, 合书马什么梅?
所以这次用框架了, 觉得还是要有个输出, 这样印象深刻一些.

所以本文是从一个小白的角度, 手把手做练习的.

Taro程序环境

这部分参考:

要有node环境, 推荐用nvm来管理.

需要安装CLI工具:

npm install -g @tarojs/cli

创建项目并运行

创建项目

创建模板项目:

taro init myApp

在这个阶段会有一些问题要回答.

* 请输入项目介绍! My awesome project blablabla.
* 是否需要使用 TypeScript ? Yes
* 请选择 CSS 预处理器(Sass/Less/Stylus) Sass
* 请选择模板 默认模板

完了之后会自动安装依赖:

npm install

然后就成功啦!

运行

Taro需要运行不同的命令, 将Taro代码编译成不同端的代码, 然后在对应的开发工具中查看效果.

这里仅说微信小程序. 还是需要微信开发者工具:
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

import这个项目就行了.

开发前微信开发者工具的项目设置要注意:

需要设置关闭ES6转ES5功能, 开启可能报错.
需要设置关闭上传代码时样式自动补全, 开启可能报错.
需要设置关闭代码压缩上传, 开启可能报错.

这些默认都是关闭的.

微信小程序的编译预览及打包:

npm script

$ npm run dev:weapp
$ npm run build:weapp

或者:

$ taro build --type weapp --watch
$ taro build --type weapp

加上--watch会监听文件修改, 去掉会对代码进行压缩打包.

运行编译命令之后就可以在微信开发者工具中预览了. 是显示一个Hello World.

项目结构

因为创建项目的时候用了TypeScript, 所以项目结构是这样的:

├── dist                   编译结果目录
├── config                 配置目录
|   ├── dev.js             开发时配置
|   ├── index.js           默认配置
|   └── prod.js            打包时配置
├── src                    源码目录
|   ├── pages              页面文件目录
|   |   ├── index          index页面目录
|   |   |   ├── index.scss index页面样式
|   |   |   └── index.tsx  index页面逻辑
|   ├── app.scss           项目总通用样式
|   ├── app.tsx            项目入口文件
|   └── index.html          
└── package.json

如果需要创建组件, 可以在src下创建component目录来统一存放组件.

"Hello world!"就在index.tsx中.

IDE

关于IDE:
我发现用微信开发者工具是打不开这些后缀名为scsstsx的文件的.
微信开发者工具只能用来预览.

后来用了Intellij, 是能查看文件了,
但是开始写代码之后, 发现没有自动提示, 也没有自动格式化工具.

又下了个VS CODE:

brew cask install visual-studio-code

格式化的快捷键是:
Shift + Alt + F.

后来我在Text Editor设置里勾选了Format On Save.

编写代码

Step 1: 静态页面显示

先弄几个数据静态显示一下:

export default class Index extends Component {
  config: Config = {
    navigationBarTitleText: '首页'
  }

  constructor(props) {
    super(props)
    this.state = {
      list: ['get up', 'eat breakfast', 'study',]
    }
    inputVal: ''
  }

  render() {
    let { list, inputVal } = this.state

    return (
      <View className='index'>
        <View className='list_wrap'>
          <Text>Todo List</Text>
          {
            list.map((item, index) => {
              return <View>
                <Text>{index + 1}.{item}</Text>
              </View>
            })
          }
        </View>
      </View>
    )
  }
}

然后命令行运行:

taro build --type weapp --watch

就会直接显示出来结果. 之后的修改也是随时呈现.

这里IDE报告两个TypeScript的问题:

Property 'list' does not exist on type 'Readonly<{}>'

和:

Property 'inputVal' does not exist on type 'Index'.

按照这里的方法修改的:

interface MyProps {
}

interface MyState {
  list: Array<string>;
  inputVal: string;
}

export default class Index extends Component<MyProps, MyState> {
//...
}

代码中设置值的时候调用this.setState().

Step 2: 添加和删除项目

加上输入框, 添加和删除按钮的对应方法.
完整代码:

interface MyProps {
}

interface MyState {
  list: Array<string>;
  inputVal: string;
}

export default class Index extends Component<MyProps, MyState> {
  config: Config = {
    navigationBarTitleText: '首页'
  }

  constructor(props) {
    super(props)
    this.state = {
      list: ['get up', 'eat breakfast', 'study',],
      inputVal: ''
    }

  }

  addItem() {
    let { list } = this.state
    const inputVal = this.state.inputVal

    if (inputVal == '') return
    else {
      list.push(inputVal)
    }
    this.setState({
      list,
      inputVal: ''
    })
  }

  removeItem(index) {
    let { list } = this.state
    list.splice(index, 1)
    this.setState({
      list
    })
  }

  inputHandler(e) {
    this.setState({ inputVal: e.target.value })
  }

  render() {
    let { list, inputVal } = this.state

    return (
      <View className='index'>
        <Input className='input' type='text' value={inputVal} onInput={this.inputHandler.bind(this)} />
        <Text className='add' onClick={this.addItem.bind(this)}>添加</Text>
        <View className='list_wrap'>
          <Text>Todo List</Text>
          {
            list.map((item, index) => {
              return <View className='list_item'>
                <Text>{index + 1}.{item}</Text>
                <Text className='del' onClick={this.removeItem.bind(this, index)}>删除</Text>
              </View>
            })
          }
        </View>
      </View>
    )
  }
}

Step 3: 样式调整

用了这里面的样式: https://juejin.im/book/5b73a131f265da28065fb1cd

然后企图调整button的对齐. (CSS不太擅长, 请轻拍, 请指教.)

.input {
    display: inline-block;
    margin: 32px;
    border: 1px solid #666;
    width: 65%;
    vertical-align: middle;
}
.list_wrap {
    padding: 32px;
}
.list_item {
    margin: 20px 0;
}
.add,
.del {
    display: inline-block;
    width: 120px;
    height: 60px;
    margin: 0 10px;
    padding: 0 10px;
    font-size: 22px;
    line-height: 60px;
    text-align: center;
    border-radius: 10px;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    justify-content: center;
    vertical-align: middle;
}
.add {
    background-color: #5c89e4;
    color: #fff;
    border: 1px solid #5c89e4;
}
.del {
    background-color: #fff;
    color: #5c89e4;
    border: 1px solid #5c89e4;
    position: absolute;
    right: 32px;
}

Taro命令

快速生成新的页面文件:

Taro create --name [页面名称] 

参考

最后, 欢迎关注微信公众号: 圣骑士Wind
微信公众号

标签:index,Taro,微信,list,inputVal,taro,Todo
来源: https://www.cnblogs.com/mengdd/p/mini-program-todo-using-taro.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有