Taro小程序学习总结

1. Taro

1.1. 介绍

官网

开发文档

Taro 是一套遵循 React 语法规范的 多端开发 解决方案。由京东的凹凸实验室团队于 2018-09-18 历时 3 个月正式发布。taro 的目标是使用一套代码达到多端统一。

多端：

• 微信小程序

• H5

• React Native

• 支付宝小程序

• 百度智能小程序

• 快应用 适配中

2. 运行项目

2.1. 安装脚手架工具@tarojs/cli

npm install -g @tarojs/cli

2.2. 创建项目

taro init myApp

2.3. 打包编译

2.3.1. 发布

• 微信小程序

  npm run build:weapp
  

• H5

  npm run build:h5
  

• 百度智能小程序

  npm run build:swan
  

• 支付宝小程序

  npm run build:alipay
  

• React Native

  npm run build:rn
  

2.3.2. 监控

• 微信小程序

  npm run dev:weapp
  

• H5

  npm run dev:h5
  

• 百度智能小程序

  npm run dev:swan
  

• 支付宝小程序

  npm run dev:alipay
  

• React Native

  npm run dev:rn
  

3. 项目结构

3.1. 基本目录

所有项目源代码请放在项目根目录 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

3.2. 文件命名

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

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

3.3. 其他规范

taro 做了更加详细的编码规范描述。参考

4. 项目配置

通过 Taro 模板创建的项目都会默认拥有 project.config.json 这一项目配置文件，这个文件 只能用于微信小程序，若要兼容到其他小程序平台，请按如下对应规则来增加相应平台的配置文件，其配置与各自小程序平台要求的一致

各类小程序平台均有自己的项目配置文件，例如

• 微信小程序，project.config.json
• 百度智能小程序，project.swan.json
• 头条小程序， project.tt.json，文档暂无，大部分字段与微信小程序一致
• 支付宝小程序，暂无发现

4.1. 微信小程序全局配置

小程序的全局配置文件在app.js文件中的 config字段中

小程序全局配置

class App extends Component {
   
  // 小程序的全局配置
  config = {
   
    pages: ["pages/index/index"],
    window: {
   
      backgroundTextStyle: "light",
      navigationBarBackgroundColor: "#fff",
      navigationBarTitleText: "WeChat",
      navigationBarTextStyle: "black"
    }
  };
  render() {
   
    return <Index />;
  }
}

4.1.1. 生命周期对应关系

而且由于入口文件继承自 Component 组件基类，它同样拥有组件生命周期，但因为入口文件的特殊性，他的生命周期并不完整，如下

生命周期方法	作用	说明
componentWillMount	程序被载入	在微信小程序中这一生命周期方法对应 app 的 onLaunch
componentDidMount	程序被载入	在微信小程序中这一生命周期方法对应 app 的 onLaunch，在 componentWillMount 后执行
componentDidShow	程序展示出来	在微信小程序中这一生命周期方法对应 onShow，在 H5 中同样实现
componentDidHide	程序被隐藏	在微信小程序中这一生命周期方法对应 onHide，在 H5 中同样实现
componentDidCatchError	错误监听函数	在微信小程序中这一生命周期方法对应 onError
componentDidNotFound	页面不存在监听函数	在微信小程序中这一生命周期方法对应 onPageNotFound

微信小程序中 onLaunch 通常带有一个参数 options，在 Taro 中你可以在所有生命周期和普通事件方法中通过 this.$router.params 访问到，在其他端也适用

入口文件需要包含一个 render 方法，一般返回程序的第一个页面，但值得注意的是不要在入口文件中的 render 方法里写逻辑及引用其他页面、组件，因为编译时 render 方法的内容会被直接替换掉，你的逻辑代码不会起作用。

4.2. 微信小程序页面配置

小程序的页面配置文件存在于 pages文件夹内的 index.js config 字段中

小程序页面配置

import Taro, {
    Component } from "@tarojs/taro";
import {
    View, Text } from "@tarojs/components";
import "./index.scss";

export default class Index extends Component {
   
  // 页面配置
  config = {
   
    navigationBarTitleText: "首页"
  };
  render() {
   
    return (
      <View className="index">
        <Text>Hello world!</Text>
      </View>
    );
  }
}

4.2.1. 生命周期对应关系

由于页面 JS 也继承自 Component 组件基类，所以页面同样拥有生命周期，页面的生命周期方法如下：

生命周期方法	作用	说明
componentWillMount	页面被载入	在微信小程序中这一生命周期方法对应 onLoad
componentDidMount	页面渲染完成	在微信小程序中这一生命周期方法对应 onReady
shouldComponentUpdate	页面是否需要更新
componentWillUpdate	页面即将更新
componentDidUpdate	页面更新完毕
componentWillUnmount	页面退出	在微信小程序中这一生命周期方法对应 onUnload
componentDidShow	页面展示出来	在微信小程序中这一生命周期方法对应 onShow，在 H5 中同样实现
componentDidHide	页面被隐藏	在微信小程序中这一生命周期方法对应 onHide，在 H5 中同样实现

微信小程序中 onLoad 通常带有一个参数 options，在 Taro 中你可以在所有生命周期和普通事件方法中通过 this.$router.params 访问到，在其他端也适用

在小程序中，页面还有在一些专属的方法成员，如下

方法	作用
onPullDownRefresh	页面相关事件处理函数–监听用户下拉动作
onReachBottom	页面上拉触底事件的处理函数
onShareAppMessage	用户点击右上角转发
onPageScroll	页面滚动触发事件的处理函数
onTabItemTap	当前是 tab 页时，点击 tab 时触发
componentWillPreload	预加载，只在微信小程序中可用

4.3. 路由功能

4.3.1. 路由 API 说明

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

我们只需要在入口文件的 config 配置中指定好 pages，然后就可以在代码中通过 Taro 提供的 API 来跳转到目的页面，例如：

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

具体 API 说明，请查看导航部分说明。

4.3.2. 路由传参

我们可以通过在所有跳转的 url 后面添加查询字符串参数进行跳转传参，例如

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

这样的话，在跳转成功的目标页的生命周期方法里就能通过 this.$router.params 获取到传入的参数，例如上述跳转，在目标页的 componentWillMount 生命周期里获取入参数

class C extends Taro.Component {
   
  componentWillMount() {
   
    console.log(this.$router.params); // 输出 { id: 2, type: 'test' }
  }
}

4.4. 设计稿及尺寸单位

在 Taro 中尺寸单位建议使用 px、 百分比 %，Taro 默认会对所有单位进行转换。

Taro 默认以 750px 作为换算尺寸标准，如果设计稿不是以 750px 为标准，则需要在项目配置 config/index.js 中进行设置。

const config = {
   
  projectName: 'myApp',
  date: '2018-12-6',
  designWidth: 750,
  deviceRatio: {
   
    '640': 2.34 / 2,
    '750': 1,
    '828': 1.81 / 2
    ....
  }
}

如果设计稿是375px,修改的方法如下:

修改完后重启即可.

4.4.1. 注意

4.4.1.1. 行内样式无法自动转换

但是如果是在 JS 中书写了行内样式，那么编译时就无法做替换了，针对这种情况，Taro 提供了 API Taro.pxTransform 来做运行时的尺寸转换。

let fontsize = Taro.pxTransform(10); // 小程序：rpx，H5：rem

4.4.1.2. 忽略转换

默认配置会对所有的 px 单位进行转换，有大写字母的 Px 或 PX 则会被忽略

5. taro 中的 JSX

在 Taro 中， JSX 是一种看起来很像 XML 的 JavaScript 语法扩展，比起模板语言

它具有以下优点：

1. 各大编辑器和 IDE 都能提供非常良好的支持；
2. 可以做到类型安全，在编译期就能发现错误；
3. 提供语义化并且可以移动的标签；
4. 背后的社区支持非常强力；

5.1. 小规范

为了更好的使用 jsx 实现功能，我们先简单的总结一下 Taro 中的 jsx 的规范。

请观察以下代码：

import Taro, {
    Component } from "@tarojs/taro";
import {
    View } from "@tarojs/components";

class Home extends Component {
   
  render() {
   
    return <View>Hello World!</View>;
  }
}

5.1.1. 必须声明 Taro 和组件

• 变量 Taro 也是一个必须引入声明的变量，因为我们在编译期和运行时会依赖这个变量做一些特殊处理。
• 变量 View 看起来并没有被调用，但也必须从 @tarojs/components 中引入声明
• 组件

5.1.2. 首字母大写与驼峰式命名

在 Taro 中，所有组件都应当首字母大写并且使用大驼峰式命名法（Camel-Case）。

如：

import Taro, {
    Component } from "@tarojs/taro";
// 引入一个自定义组件组件
import HomePage from "./HomePage";

class App extends Component {