前言

讲师介绍

毫末科技有限公司-王腾达

课程安排

Taro介绍(7分钟)

框架入门(8分钟)

面向群体

掌握JavaScript技术的开发人员

Tips:如果掌握了React框架及其思想的话,入门Taro框架将会非常轻松

介绍

选择Taro框架,有以下几点理由:

  1. 多端统一(微信、百度、支付宝、字节跳动小程序,React-Native, H5等),一份代码,多端运行
  2. 支持React的开发方式(支持npm/yarn,CSS预编译、React语法、Redux/Mobx状态管理等)
  3. 优秀生态和开发者社区以及完善的文档

Taro预览

Taro遵循了React的语法规范,采用了与React一致的组件化思想、组建生命周期、JSX语法等,达到了与React一致的开发体验,下面我们来看一下Taro组件的基本结构

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

export default class Index extends Component {

  config = {
    navigationBarTitleText: '首页'
  }
  // 更改视图:数据写法1
  state = {
    name: 'Lida'
  }

  componentWillMount () { }

  componentDidMount () { 
    // 更改视图:数据写法2
    // this.setState({name: 'Lida'})
  }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  click () {
    this.setState({name: 'Nazi'});
  }

  render () {
    return (
      <View className='index'>
        <Text>Hello world!</Text>
        <Text class="name">{this.state.name}</Text>
        <Button onClick={this.click}>Change_name</Button>
      </View>
    )
  }
}

TaroUI

一款基于Taro框架开发的前端框架

  • 基于Taro开发,与Taro无缝集成
  • TaroUI的组件可以在 微信小程序支付宝小程序百度小程序H5 多端适配运行( react- native 暂不支持)
  • 提供灵活的API,可灵活配置

快速开始

本章节介绍Taro的安装、Taro项目初始化、Taro项目本地运行、Taro项目打包。

安装Taro

安装前请确保node版本>=8.0.0,如果本机有项目依赖v8.x以下版本,可使用 nvm 管理多版本 node

安装CLI工具

可以使用 npm 或者 yarn 安装 @tarojs/cli工具,安装命令如下所示

# 使用 npm 安装 CLI
npm install -g @tarojs/cli
# OR 使用 yarn 安装 CLI
yarn global add @tarojs/cli
# OR 安装了 cnpm,使用 cnpm 安装 CLI
cnpm install -g @tarojs/cli

注意事项

值得一提的是,如果安装过程出现sass相关的安装错误,请在安装mirror-config-china后重试。

npm install -g mirror-config-china

初始化项目

使用刚刚安装的Taro工具,创建模板项目

taro init taro-demo

如果你本机有多个 taro 项目,并且版本不一致,这时你可以以项目依赖的形式安装 @tarojs/cli ,而后,只要你的 npm >= 5.2.0 ,则可以使用 npx 初始化项目。

npx @tarojs/cli init taro-demo

创建完项目后,Taro会开始安装项目中所需要的依赖库,会对安装使用的工具进行检测,检测顺序为 yarn > cnpm > npm 。如果安装过程中断或者出现某些错误导致安装失败,这是你可以在该项目下,自行使用安装命令进行安装。

# 使用 yarn 安装依赖 
yarn
# OR 使用 cnpm 安装依赖 
cnpm install
# OR 使用 npm 安装依赖 
npm install

运行项目

因为 Taro 支持多端编译,编译完后,还需使用各端开发工具进行调试

启动和打包命令会比较多,这里给大家整体介绍运行与打包相关命令。我们以 npm 启动为例。

端名称 开发模式运行项目 打包项目
微信小程序 npm run dev:weapp npm run build:weapp
百度小程序 npm run dev:swan npm run build:swan
支付宝小程序 npm run dev:alipay npm run build:alipay
字节跳动小程序 npm run dev:tt npm run build:tt
QQ小程序 npm run dev:qq npm run build:qq
京东小程序 npm run dev:jd npm run build:jd
快应用 npm run dev:quickapp npm run build:quickapp
ReactNative npm run dev:rn npm run build:rn
H5 npm run dev:h5 npm run build:h5

常用的Cli命令

查看Taro 所有命令及帮助

taro --help

更新Taro版本

Taro 提供了更新命令来更新CLI工具自身以及项目中Taro 相关的依赖

# taro
taro update self
# npm
npm i -g @tarojs/cli@latest
# yarn
yarn global add @tarojs/cli@latest

更新项目中Taro相关依赖

taro update project

如果使用以上命令更新失败,则需要在package.json文件中手动更新依赖版本,然后重新安装即可。

环境与依赖信息

Taro 提供了命令,支持检测 Taro 环境以及依赖的版本等信息,方便查看项目环境与依赖情况。同 时若在开发过程中遇到问题,可将该信息粘贴至issue,便于开发人员快速定位并解答问题。该命令为

taro info

执行结果显示如下。

👽 Taro v2.0.5
Taro CLI 2.0.5 environment info:
    System:
    OS: macOS 10.15.2
    Shell: 5.7.1 - /bin/zsh
    Binaries:
    Node: 10.15.2 - /usr/local/bin/node
    Yarn: 1.21.1 - /usr/local/bin/yarn
    npm: 6.13.4 - /usr/local/bin/npm

Taro Doctor诊断

Taro doctor 用于项目 依赖、设置、结构诊断,可以让我们快速的定位问题来源

taro doctor

框架入门

所有项目源代码请放在项目根目录 src 目录下,项目所需最基本的文件包括 入口文件 以及 页面文件

  • 入口文件为 app.js
  • 页面文件建议放置在 src/pages 目录下

一个可靠的 Taro 项目可以按照如下方式进行组织

├── config                 配置目录
|   ├── dev.js             开发时配置
|   ├── index.js           默认配置
|   └── prod.js            打包时配置
├── src                    源码目录
|   ├── components         公共组件目录
|   ├── pages              页面文件目录
|   |   ├── index          index 页面目录
|   |   |   ├── banner     页面 index 私有组件
|   |   |   ├── index.js   index 页面逻辑
|   |   |   └── index.css  index 页面样式
|   ├── utils              公共方法库
|   ├── app.css            项目总通用样式
|   └── app.js             项目入口文件
└── package.json

文件命名

Taro 中普通 JS/TS 文件以小写字母命名,多个单词以下划线连接,例如 util.jsutil_helper.js

Taro 组件文件命名遵循 Pascal 命名法,例如 ReservationCard.jsx

文件后缀

Taro 中普通 JS/TS 文件以 .js 或者 .ts 作为文件后缀

Taro 组件则以 .jsx 或者 .tsx 作为文件后缀,当然这不是强制约束,只是作为一个实践的建议,组件文件依然可以以 .js 或者 .ts 作为文件后缀

JavaScript 书写规范

在 Taro 中书写 JavaScript 请遵循以下规则,参考官方文档链接:JavaScript书写规范

框架应用配置

我们从 app.js 出发,了解应用中的相关配置,配置分为以下几部分

results matching ""

    No results matching ""