# taro-demo

**Repository Path**: huangkai5/taro-demo

## Basic Information

- **Project Name**: taro-demo
- **Description**: 基于react和taro搭建的一个开发h5和小程序的模板
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-04-14
- **Last Updated**: 2021-04-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: React, TARO, 模板

## README

# Taro介绍

```
Taro 是一个开放式跨端跨框架解决方案，如今端的形态多种多样，Web、React-Native、微信小程序、各大平台小程序等，如果针对不同的端去编写多套代码的成本显然非常高； 

此时使用 Taro，我们可以只书写一套代码，再通过 Taro 的编译工具，将源代码分别编译出可以在不同端（微信/京东/百度/支付宝/字节跳动/QQ小程序、快应用、H5、React-Native 等）运行的代码。

[官方UI框架](https://taro-ui.jd.com/#/)
```

### 特性

```
Taro 目前支持React、Vue、Nerv三类框架，在未来 Taro 将开放拓展能力，使得开发者可以通过 Taro 拓展更多的框架支持。
注意: Vue、Nerv是Taro3以上才支持。
```

### 优点

```
1.掌握React、Vue、Nerv三类框架即可，学习成本低

2.快速编写一套代码就能够适配到多端，降低开发成本

3.支持现代前端开发流程。如：npm/yarn 包管理工具、ES6+ 、CSS 预处理器和后处理器（Scss、Less、PostCSS）、支持组件化开发（解耦）、支持TypeScript语法开发

```

# 快速开始

### 依赖环境

```
1.请确保已具备较新的 node 环境（>=12.0.0）

2.开发工具Vscode

3.各平台对应的调试工具：如微信开发者工具等
```

### CLI工具安装

使用 npm 或者 yarn 全局安装 @tarojs/cli，或者直接使用 npx:

(macOS系统前需要加sudo)

```
# 使用 npm 安装 CLI

$ npm install -g @tarojs/cli

# OR 使用 yarn 安装 CLI

$ yarn global add @tarojs/cli

# OR 安装了 cnpm，使用 cnpm 安装 CLI

$ cnpm install -g @tarojs/cli
```

### 创建项目

已全局安装CLI,使用以下方式

```
1. taro init myApp
```

否则

```
2.npx @tarojs/cli init myApp
```

### 项目目录

+ src
  
  + api
  + common
  + components
  + pages
  + static
  + app.config.js
  + app.js
  + index.html

### 语法规范(基于react)

#### 常用组件

- View：视图组件
- ScrollView：客滚动视图
- Swiper：滑块视图容器
- Text：文本组件
- Button：按钮组件
- Input：输入框
- Picker：滚动选择器
  ...

#### SASS（CSS预编译处理器）

Sass 在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等功能，这些拓展令 CSS 更加强大与优雅。使用 Sass有更好地组织管理样式文件，开发项目。[传送门](https://www.sass.hk/docs/)，


#### 多环境配置

```
yarn add cross-env
```

+ config
  
  + dev.js （开发）
  + release.js（预发布）
  + prod.js（生产）
 
#### 发布生产环境

1. h5 直接走大眼发布系统
2. 小程序需要借助开发者工具，绑定appID，上传代码至微信后台管理审核。


#### 项目中可能会遇到的问题

1. 多平台的条件编译

- 内置环境变量：process.env.TARO_ENV === 'weapp' 、 process.env.TARO_ENV === 'h5'
- 统一接口的多端文件： test.js 、test.h5.js、test.weapp.js 

2. 小程序包体积过大造成无法预览，无法上传的解决方案

- 需要分包
- 压缩图片，大图上传阿里云，采用cdn的方式引入
- 如果主包的图片资源过多，可把图片打入对应的分包中
- 接入的sdk，可通过分包中转页的形势接入，以免造成单个分包体积超过2M