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的环境配置,项目构建及项目打包的方式,以及整个工程的项目结构分解,此仅供参考~

你可能感兴趣的:(Taro学习笔记简记(一))