Taro 初探踩坑

安装

Taro 项目基于 node，请确保已具备较新的 node 环境（>=8.0.0），推荐使用 node 版本管理工具 nvm 来管理 node

 $ npm install -g @tarojs/cli

使用

初始化一个名为myApp的项目:

 $ taro init myApp

之后按照官网说明输入您的配置，忘了截图了，各位自由发挥吧

编译

执行命令

 $ npm run dev:weapp

这个时候坑出现了，报错提示没有XXX模块（没有截图，名称忘了）

于是，我执行命令

 $ npm install XXX

报错：

image

原因：

需要安装Visual Studio

解决方式：

通过官网下载安装VS（我下载的是2017）

注意的是在安装VS2017的过程中需要选上Common Tools for Visual C++的选项，因为默认是不选择的

最后把npm的vs版本设置成2017（不执行这个貌似也可以）

打开命令行，输入

 npm config set msvs_version 2017

安装设置完VS后，执行 npm install XXX，之后执行npm run dev:weapp

到这基本成功了，

之后自行下载并打开微信开发者工具，然后选择项目根目录进行预览。

（大坑注意：一定要下载稳定版本，我当初下载了最新的版本，弄了很久没有出来Hello world!）

image

Taro项目结构分析

image

由于个人习惯，开发中我是用webstrom开发，下面是一个简单的demo

image

生命周期函数

生命周期方法	作用	说明
componentWillMount	程序被载入	对应微信小程序onLaunch
componentDidMount	程序被载入	对应微信小程序onLaunch，在componentWillMount之后执行
componentDidShow	程序展示出来	对应微信小程序onShow
componentDidHide	程序被隐藏	对应微信小程序onHide

路由

在 Taro 中，路由功能是默认自带的，不需要开发者进行额外的路由配置。

// 跳转到目的页面，打开新页面
Taro.navigateTo({
  url: '/pages/page/path/name'
})

// 跳转到目的页面，在当前页面打开
Taro.redirectTo({
  url: '/pages/page/path/name'
})

传参

// 传入参数 id=2&type=test
Taro.navigateTo({
  url: '/pages/page/path/name?id=2&type=test'
})

我们可以使用this.$router.params来获取路由上的参数。

组件

Taro 以 微信小程序组件库 为标准，结合 jsx 语法规范，定制了一套自己的组件库规范，具体可以自行去看文档

 //listItem.tsx
import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import './listItem.scss'
export default class ListItem extends Component {
  skipToDetail(){
    /* 必须得这样写=。= */
    this.props.onClick()
  }
  render() {
    const { title, description } = this.props
    return (
      
        {title}
        {description}
      
    )
  }
}

主页

import Taro, {Component, Config} from '@tarojs/taro'
import {View, Text} from '@tarojs/components'
import ListItem from '../../components/ListItem'
import './index.scss'
import img0 from './img/11.jpg'
import img1 from './img/22.jpg'
import img2 from './img/33.jpg'

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

  componentWillMount() {
  }

  componentDidMount() {
  }

  componentWillUnmount() {
  }

  componentDidShow() {
  }

  componentDidHide() {
  }

  skipToDetail({title, description}) {
    Taro.navigateTo({
      url: `/pages/detail/index?title=${title}&description=${description}`
    })
  }

  render() {
    const listSet = [
      {title: '标题一', description: '描述一'},
      {title: '标题二', description: '描述二'},
      {title: '标题三', description: '描述三'},
    ]
    return (
      
        
          {[img0, img1, img2].map(img => ())}
        
        {listSet.map(item => (
          ))}
      
    )
  }
}

详情

//detail/index.tsx
import Taro, {Component} from '@tarojs/taro'
import {View} from '@tarojs/components'
import './index.scss'

export default class Index extends Component {
  componentWillMount() {
  }

  config = {
    navigationBarTitleText: '详情页'
  }

  render() {
    const {title, description} = this.$router.params
    return (
      
        详情
      
    )
  }
}

demo预览，点击标题可以跳转到详情

image