taro 小程序转h5之后报错_十分钟学会Taro

1.1. 介绍

官网

开发文档

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

多端：

• 微信小程序

• H5

• React Native

• 支付宝小程序

• 百度智能小程序

• 快应用 适配中

1.2. 注意

虽然 Taro 拥有多端编译的能力，但是为了让我们的学习有一条比较完整的路线，本章课程是优先以微信小程序的开发为主线来介绍 Taro。

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</