Wechat applet framework: Taro

Do wechat small program framework, a few more mainstream:

  • The officialWePY: Tencent. Making. IO/wepy/docume…
  • The Meituanmpvue: Mpvue.com/mpvue/#-htm…
  • Jingdong’sTaro: taro.aotu.io/

The first two are Vue style, Taro is React.

This article in line with the purpose of learning, Taro to do a simple small program. The code is here: github.com/mengdd/mini…

Address: juejin.cn/post/684490…

Background: I’ve been working on Android, and recently I wanted to expand my horizons with other technologies. Before the micro channel small program native development example, basically only know about, turn book Ma Dongmei, close book ma what may? So this time with the frame, I think there should be an output, so impressed some.

So this article is from a small white Angle, hand in hand to do the exercise.

Taro Program Environment

Reference for this part:

  • The official document: nervjs. Making. IO/taro/docs/R…
  • Getting Started: nervjs. Making. IO/taro/docs/G…

To have a Node environment, NVM is recommended for management.

The CLI tool needs to be installed:

npm install -g @tarojs/cli
Copy the code

Create the project and run it

Create a project

Create template project:

taro init myApp
Copy the code

There will be some questions to answer at this stage.

* Please enter project introduction! My Awesome Project blablabla. * Whether to use TypeScript? Yes * Please select CSS preprocessor (Sass/Less/Stylus) Sass * Please select template Default templateCopy the code

Dependencies will be automatically installed when finished:

npm install
Copy the code

And there it is!

run

Taro needs to run different commands to compile the Taro code into different end codes, and then view the results in the corresponding development tools.

Here only micro letter small program. Still need WeChat developer tools: developers.weixin.qq.com/miniprogram…

Import the project.

Note the project Settings of wechat developer tools before development:

You need to disable the ES6 to ES5 function. If this function is enabled, an error may occur. Need to set to turn off the upload code style automatic completion, enable may report an error. You need to set the disable code compression upload, enable may report an error.Copy the code

These are all off by default.

Compilation preview and packaging of wechat applets:

npm script

$ npm run dev:weapp
$ npm run build:weapp
Copy the code

Or:

$ taro build --type weapp --watch
$ taro build --type weapp
Copy the code

Add — Watch listens for file changes, and removing it compresses the code.

After running the compile command, you can preview it in the wechat developer tool. Is to display a Hello World.

The project structure

Because the project is created with TypeScript, the project structure looks like this:

├ ─ ─ dist directory compiled results ├ ─ ─ the config configuration directory | ├ ─ ─ dev. The development of a js configuration | ├ ─ ─ index. The default configuration | js └ ─ ─ the prod. Js packaging configuration ├ ─ ─ the SRC source directory | ├ ─ ─ pages Page file directory | | ├ ─ ─ index index page directory | | | ├ ─ ─ index. The SCSS index page styling | | | └ ─ ─ index. The benchmark index page logic | ├ ─ ─ app. The SCSS total project general style | ├ ─ ─ App. The TSX project entry documents | └ ─ ─ index. The HTML └ ─ ─ package. The jsonCopy the code

If you need to create components, you can create a Component directory under SRC to store them all.

“Hello world!” It’s in index.tsx.

IDE

About IDE: I found it impossible to open these files with the suffix SCSS and TSX using wechat developer tools. Wechat developer tool can only be used for preview.

When I used Intellij, I was able to view files, but when I started writing code, THERE was no automatic prompt and no automatic formatting tool.

Here’s another VS CODE:

brew cask install visual-studio-code
Copy the code

The formatting shortcut is Shift + Alt + F.

Later I checked Format On Save in the Text Editor setting.

Write the code

Step 1: Static page display

Let’s get a few data static display:

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

  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>
    )
  }
}

Copy the code

Then run the command line:

taro build --type weapp --watch
Copy the code

It will display the results directly. Subsequent changes are also present at any time.

Here the IDE reports two TypeScript problems:

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

And:

Property 'inputVal' does not exist on type 'Index'.
Copy the code

Modified according to the method here:

interface MyProps {
}

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

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

Call this.setState() when setting values in code.

Step 2: Add and remove items

Add input box, add and delete button corresponding method. Complete code:

interface MyProps {
}

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

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

  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)}> Add </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, the index)} > delete < / Text > < View >})} < / View > < / View >)}}Copy the code

Step 3: Adjust your style

Use this style: juejin.cn/book/684473…

Then try to adjust the alignment of the button.

.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;
}

Copy the code

Taro command

Quickly generate new page files:

Taro create --name [page name]Copy the code

reference

  • taro github
  • awesome taro
  • Wechat developer tools
  • Gold mining booklet: Taro multi-terminal development and implementation of the principle of project combat