体验

小程序

请使用微信扫一扫以下体验码

公众号

请使用微信扫一扫关注公众号

请使用微信扫一扫以下体验码

目录结构

├── config                 配置目录
|   ├── sdp                sdp环境配置：本地，开发，测试，生产环境等
|   ├── dev.js             开发时配置
|   ├── index.js           默认配置
|   └── prod.js            打包时配置
├── dist                   默认构建输出目录
|   ├── h5                 默认构建输出目录-h5
|   ├── weapp              默认构建输出目录-weapp
|   ├── alipay             默认构建输出目录-alipay
├── src                    源码目录
|   ├── action             API请求
|   ├── assets             静态资源
|   |   ├── css            样式文件
|   |   |   ├── components 组件样式
|   |   |   ├── components-page 页面组件样式
|   |   ├── images         图片文件
|   ├── constants          常量
|   ├── components         组件目录
|   ├── components-page    页面组件目录
|   ├── pages              页面文件目录
|   |   ├── xx.tsx         容器组件文件
|   ├── utils              公共方法库
|   ├── app.css            项目总通用样式
|   └── app.tsx            项目入口文件
├── .editorconfig          代码风格配置
├── .eslintrc              代码检查配置
├── .gitignore             git源码管理忽略文件
├── .npmrc                 下载镜像配置
├── global.d.ts            ts全局类型文件
├── package-lock.json      项目依赖包固定版本号
├── package.json           npm配置文件
├── pom.xml                sdp发布时需要使用的maven配置文件（仅h5需要用）
├── project.config.json    微信小程序配置文件
└── tsconfig.json          ts编译配置文件

命令行

脚手架命令

编译时

build前缀代表打包发布，dev前缀代表开发调试，冒号后面的是端的缩小。

weapp：微信小程序模式，需要自行下载并打开微信开发者工具，然后选择目录dist/weapp进行预览。
swan：百度小程序模式，需要自行下载并打开百度开发者工具，然后在项目编译完后选择项目根目录下 dist/swan 目录进行预览。
aliapy：支付宝小程序模式，需要自行下载并打开支付宝小程序开发者工具，然后在项目编译完后选择项目根目录下 dist/aliapy 目录进行预览。
tt：字节跳动小程序模式，需要自行下载并打开字节跳动小程序开发者工具，然后在项目编译完后选择项目根目录下 dist/tt 目录进行预览。
h5：H5 模式，无需特定的开发者工具，在执行完下述命令之后即可通过浏览器进行预览
rn：React Native 模式，React Native 端相关的运行说明请参见 React Native 教程

"scripts": {
        "build:weapp": "taro build --type weapp",
        "build:swan": "taro build --type swan",
        "build:alipay": "taro build --type alipay",
        "build:tt": "taro build --type tt",
        "build:h5": "taro build --type h5",
        "build:rn": "taro build --type rn",
        "dev:weapp": "npm run build:weapp -- --watch",
        "dev:swan": "npm run build:swan -- --watch",
        "dev:alipay": "npm run build:alipay -- --watch",
        "dev:tt": "npm run build:tt -- --watch",
        "dev:h5": "npm run build:h5 -- --watch",
        "dev:rn": "npm run build:rn -- --watch"
    },

运行时

提测和发布时可以通过参数env控制运行时环境配置，分别对应config/sdp目录下的文件名（除了index.js和local.js），业务可以根据需求自行增加或删除，默认提供四种环境：development，test，preproduction，product。
例如：使用如下命令打包生产环境小程序，然后通过官方管理台发布（详见）

npm run build:weapp --env=product

环境变量与常量

TARO_ENV：Taro 在编译时提供了的内置环境变量来帮助用户做一些特殊处理，详见官方文档
SDP_ENV_CONFIG：移动 WEB 多端脚手架为多环境提供的解决方案，示例中使用的配置包括


  env: env, // 运行时使用的环境参数
  baseUrl: 'https://easy-mock.com/mock/5cf4da4f6c6d3b35041464f6/taro-template' // 项目API地址

使用方法如下：

const {
  baseUrl
} = SDP_ENV_CONFIG

常量：存放在src\constants目录下的常量
- cache：用户信息缓存key
- status：http请求code
  
  网络请求
  官方API详见，移动 WEB 多端脚手架和web端脚手架保持一次，统一使用@51yzone/request-extend
  
  注意： 1、axios并不支持小程序，需要使用社区提供的axios小程序适配器axios-miniprogram-adapter 2、配置alias，避免小程序构建异常

 alias: {
     './adapters/http': path.resolve(__dirname, '..', 'node_modules/axios-miniprogram-adapter/dist')
  },

入口文件

编译配置

遗留问题

RichText 内有 Table 时，在小程序里 border 属性失效，可能是不受信任的属性导致，需要尝试使用 wxParse
~~下拉刷新能力，在 h5 下无动画~~
~~使用下拉刷新功能，fixed 失效~~
上传图片无法获取原始文件名，~~缩略图获取失败，但是不影响预览~~
文章详情margin-bottom在 ios 手机中无效
~~1.3.0升级到1.3.5lazyload失效~~
~~存在缓存，没有使用hash~~
~~loading图标在build:h5下样式精简导致失效~~
相关链接

学习视频
Taro官方多端基础UI库
多端 UI 组件库 rtaro-ui 使用文档（开发环境）
Taro
多端统一开发框架 Taro 优秀学习资源汇总
MP ColorUI 是一款基于 Taro 框架并且联合 Color-UI CSS 库开发的多端 UI 组件库（目前仅支持小程序端）
一些例子

rtarojs

脚手架文档

体验

小程序

公众号