taro 主题切换_Taro 入门

简介

Taro 是一个遵循 React 语法规范的开放式跨端跨框架解决方案，支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5 等应用，内置了UI组件，还有物料市场，只编写一套代码就能够适配到多端。

Tara 遵循 React 语法，集成的是 Nerv 框架。

Nerv是一款基于virtual dom技术的类React UI框架，它基于React标准，拥有和React一致的API与生命周期。得益于与React保持一致API的特性，Nerv可以无缝兼容到React的相关生态，例如react-router，react-redux，以及使用React开发的组件，所以对于旧的React项目，可以无痛地将React替换成Nerv。

环境准备

Taro 仅提供一种开发方式：安装 Taro 命令行工具(Taro CLI)进行开发。

在终端输入命令 npm i -g @tarojs/cli 安装 Taro CLI。

Taro CLI 依赖于 Node.js 环境(>=8.0.0)。

框架

项目目录结构

编译配置

编译配置存放于项目根目录下 config 目录中，包含三个文件:

index.js: 通用配置

dev.js : 开发环境配置

prod.js : 生产环境配置

入口文件

每一个 Taro 应用都需要一个入口组件用来注册应用，入口文件默认是 src/app.js。

页面文件

页面组件是每一项路由将会渲染的页面，Taro 的页面默认放在 src/pages 中，每一个 Taro 项目至少有一个页面组件。页面创建好后如果需要渲染展示，需要在项目入口文件 app.config.js 的 pages 数组中进行指定。

文件配置

全局配置：可以通过 app.config.js 的文件进行全局配置， 配置页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

一个简单的全局配置如下：// app.config.js

export default {

pages: [

'pages/index/index',

'pages/list/index'

],

window: {

backgroundTextStyle: 'light',

navigationBarBackgroundColor: '#fff',

}

}未指定 entryPagePath 时，数组的第一项代表初始页面。

新增/减少页面，都需要对 pages 数组进行修改。

页面配置：每一个页面组件(例如 index.js)也会有一个页面配置(例如 index.config.js)，可以在页面配置文件中设置页面的导航栏、背景颜色等参数。

一个最简单的页面配置如下：// ./pages/index/index.jsx

export default {

navigationBarTitleText: '首页'

}

配置规范基于微信小程序的全局配置进行制定，所有平台进行统一。在配置文件中，Taro 并不关心框架的区别，Taro CLI 会直接在编译时在 Node.js 环境直接执行全局配置的代码，并把 export default 导出的对象序列化为一个 JSON 文件。因此，我们必须保证配置文件是在 Node.js 环境中是可以执行的，不能使用一些在 H5 环境或小程序环境才能运行的包或者代码，否则编译将会失败。

项目配置

为了能够适配到各个小程序平台，满足不同小程序平台配置文件不同的情况， Taro 支持为各个小程序平台添加不同的项目配置文件。

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

百度小程序project.swan.json

头条小程序project.tt.json

快应用project.quickapp.json配置文件中请勿配置 router 与 display，这两个配置