Taro框架入门（超详细）

是合规性；React具有标准化语法的开放式跨端跨框架解决方案支持使用React/Vue/Nev等框架开发微信/京东/百度/支付宝/字节跳动/QQ小程序/H5等app。它有内置的UI组件和材料市场。只能编写一组代码以适应多个目的。

Tara遵循React语法并集成；神经框架。

Nerv是一个基于虚拟dom技术的类似React的UI框架。它基于React标准，具有与React相同的API和生命周期。由于API与React的一致性，Nerv可以无缝兼容React的相关生态系统，如React路由器、React redux以及使用React开发的组件。因此，对于旧的React项目，可以毫无痛苦地用Nerv替换React。

环境准备Taro只提供一种开发方法：安装Taro命令行工具（TaroCLI）进行开发。在终端上输入命令npm i-g@tarojs/cli以安装Taro cli。Taro CLI取决于节点J的环境（>=8.0.0）。

框架项目目录结构

编译配置编译配置存储在项目根目录中；config目录包含三个文件：

指数Js：通用配置dev Js：开发环境配置prod Js：生产环境配置

每个Taroapp都需要一个条目组件来注册app。默认的条目文件是src/app.js。

页面文件页面组件是每个路由将呈现的页面。默认情况下，Taro页面放置在src/pages中。每个Taro项目至少有一个页面组件。创建页面后，如果需要渲染显示，则需要输入项目条目文件app。配置Js。

文件配置的全局配置：您可以使用app。config js文件是全局配置的，包括页面文件的路径和窗口表示、设置网络超时以及设置多个选项卡。

简单的全局配置如下：

//app.config中。jsexport默认值｛pages:['pages/index/index'，'pages/list/index']，window:｛backgroundTextStyle:'light'，navigationBarBackgroundColor:'#fff'，｝｝

未指定；entryPagePath数组的第一项表示初始页面。要添加/删除页面，需要修改页面数组。页面配置：每个页面组件（如index.js）也有一个页面配置（如index.config.js）。您可以在页面配置文件中设置页面的导航栏、背景色和其他参数。

最简单的页面配置如下：

//./pages/index.索引。Jsxexport默认｛navigationBarTitleText:'；主页'；｝配置规范是基于微信小程序的全局配置制定的，所有平台都是统一的。在配置文件中，Taro并不关心框架之间的差异。Taro CLI将直接在Node上编译。js环境直接执行全局配置的代码，并将默认导出的对象序列化为JSON文件。

因此，我们必须确保配置文件位于Node.js环境中。您不能使用只能在H5环境或小程序环境中运行的包或代码，否则编译将失败。

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

通过Taro模板创建的项目将具有项目。默认情况下为Json文件。要与其他小程序平台兼容，请根据以下相应规则添加相应平台的配置文件。配置与各个小程序平台的要求一致。

小程序平台配置文件WeChat applet project.config的说明。json百度小程序项目.swan。json标题小程序项目.tt。json快速app项目。quickapp不在json配置文件中配置；路由器和显示器。Taro将生成QQ小程序project.QQ。这两种配置的json组件生命周期和事件处理功能。以挂钩为例：

在Taro中，我们可以自由使用CSS预处理器和后处理器。方法也很简单。只需在编译配置中添加相关插件：

//配置/索引。Jsconst-config={designWidth:750，sourceRoot:'；src'；，outputRoot:'，dist'；，plugins:['；@tarojs/plugin-ass'；，//使用Sass//'；@tarojs/pplugin-less'；，//Use less/'；@塔罗js/plugin style'；，[/Use Stylus]defineConstants:{}，mini:{}，h5:{}模块。exports=函数（merge）｛if（process.env.NODE_env==“development”）｛return merge（｛｝，config，require（“./dev”））