Taro跨端框架

一套可以同时运行在微信小程序、H5、支付宝小程序、抖音小程序等平台的C端框架

本框架基于PNPM包管理。所以框架中包含了 后台管理系统 和 C端系统 。可以同时进行相关开发任务。 本文档主要用于介绍框架相关信息。帮助你快速上手开发工作

环境要求

• node >= 18
• pnpm >= 8

对于node环境管理

Windows系统可以使用 nvm-windows 进行管理
MacOS 系统可以使用 nvm 或 n 进行管理

实验性方案

为了解决环境管理切换的麻烦。还有一种方案是使用volta 项目级node管理方案。
注意：架构部没有真实测评过。有兴趣的可以试试

技术选型

框架针对技术选型框架中涉及的知识点不会进行详尽的解释。你可以前往相关网站自己阅读、查询与学习。

名称	说明
React 18	用于构建 Web 和原生交互界面的库
Taro	开放式跨端跨框架解决方案
Antd Design Pro	开箱即用的中台前端/设计解决方案
Antd Design	基础 UI 组件
PNPM	速度快、节省磁盘空间的软件包管理器
Umi	企业级前端开发框架

目录结构

├──.editorconfig
├──.eslintignore
├──.eslintrc
├──.gitconfig
├──.npmrc
├──.prettierrc
├──.vscode
├──components
|   ├──aliyun
|   ├──backend-extend-types
|   ├──backend-pro
|   ├──backend-styles
|   ├──form-rules
|   ├──request
|   ├──rich-text
|   ├──taro-design
|   ├──taro-utils
|   └──utils
├──Jenkinsfile
├──package.json
├──packages
|   ├──backend-template
|   └──taro-template
├──patches
|   └──jotai@2.6.0.patch
├──pnpm-lock.yaml
├──pnpm-workspace.yaml
├──README.md
├──scripts
|   ├──api.mjs
|   └──template.js
├──tsconfig.backend.json
├──tsconfig.json
└──tsconfig.taro.json

目录解释（仅针对重要内容讲述）

• .npmrc npm配置
• .prettierrc 代码风格格式化工具。必须遵循 不允许修改

packages目录文件

• backend-template 后管模板源码
• taro-template taro模板源码

components目录文件

• request 请求库
• aliyun 阿里云上传库
• backend-pro 后管高级组件库
• taro-design 美萌UI组件库

开发

项目在git创建之后 通过命令迁出项目源代码后。我们可以进行接下来的开发工作了。让我们看下如何开发一个React项目

安装

pnpm install // 安装依赖

启动

启动后管/Taro项目

cd packages/taro-template && pnpm dev // 启动微信小程序
cd packages/taro-template && pnpm dev:h5 // 启动H5开发

cd packages/backend-template && pnpm dev // 启动后台管理系统

命令执行完毕后。

• 微信小程序开发者工具 打开 packages/taro-template/dist/weapp 文件夹
• H5 打开终端输出地址访问页面
• 后管访问终端输出访问页面

命令

你可以在package.json中找到全部的命令。它与Uni框架是一致的。并且风格统一

打包

项目开发完毕后打包项目

cd packages/taro-template && pnpm build // 打包微信小程序
cd packages/taro-template && pnpm build:h5 // 打包H5开发

cd packages/backend-template && pnpm build:uat // 打包后台管理系统测试环境
cd packages/backend-template && pnpm build // 打包后台管理系统

环境变量配置

参考这里