Taro学习笔记简记(一)

Taro简介

Tora是由京东凹凸实验室打造的一套遵循 React 语法规范的多端统一开发框架。

使用Taro，我可以写一套代码，通过Tora编译工具，将源代码可以编译出在不同端（微信小程序，H5，App端等）运行代码。

前言

这些记录仅供参考，本人也是刚开始接触这类东西(本人原生Android程序员一枚)，具体还是以官网为准，官网地址Taro。所有配置均在Mac环境下，如有不足之处，望指正~

环境配置及开发

• 配置node.js环境
  去NodeJs官网下载即可
• 安装 Taro 开发工具 @tarojs/cli
  使用 npm 或者 yarn 全局安装

  $ npm install -g @tarojs/cli
  #或
  $ yarn global add @tarojs/cli

• 创建模板项目

$ taro init firstApp

• 进入目录开始开发，可以选择小程序预览模式或者H5预览模式。

用微信小程序预模式

1.需要下载微信开发者工具
2.开始编译(切换到工程目录根目录)执行如下命令

//npm script
$ npm run dev:weapp
// 仅限全局安装
$ taro build --type weapp --watch

H5编译预览模式

H5编译执行如下命令

# npm script
$ npm run dev:h5
# 仅限全局安装
$ taro build --type h5 --watch

项目打包

• 打包小程序代码

# npm script
$ npm build dev:weapp
# 仅限全局安装
$ taro build --type weapp

• 打包H5代码

$ npm build dev:h5
# 仅限全局安装
$ taro build --type h5

目录结构

├── dist                   编译结果目录
├── config                 配置目录
|   ├── dev.js             开发时配置
|   ├── index.js           默认配置
|   └── prod.js            打包时配置
├── src                    源码目录
|   ├── pages              页面文件目录
|   |   ├── index          index页面目录
|   |   |   ├── index.js   index页面逻辑
|   |   |   └── index.css  index页面样式
|   ├── asset              资源放置
|   |   └── images         用于放置资源图片等
|   ├── components         用于放置自定义组件等
|   ├── app.css            项目总通用样式
|   └── app.js             项目入口文件
|   
└── package.json

总结

以上就是Taro的环境配置，项目构建及项目打包的方式，以及整个工程的项目结构分解，此仅供参考~