Taro的经验浅谈

城里挖土的豪哥
1,051 阅读5分钟

简述

前段时间学习了Taro, 并和公司小伙伴开发了一个支付宝小程序项目,也算获得了一些使用经验,总体来说Taro挺适合从事react开发的前端人员快速入手(基本一两天就能快速入手,入门学习成本低),非常灵活的一个框架,开发效率较高

首先是根据Taro初始化脚手架生成项目模版,然后自己配置了dva等react状态管理相关库插件,开发模式与平时react+dva+umi项目差不多,目录结构也较相似

config                        // taro 配置目录
dist                          // 打包编译后的目录
src
  |-- assets                  // 静态资源
  |-- components              // 公共组件目录
  |-- config                  // 公共配置
  |-- models                  // 全局 models，页面 model 需要在这里引入配置
  |-- services                // 公共 api 存放
  |-- pages                   // 容器组件
    |-- main                  // 业务容器 不可以有任何大写字母
      |-- components          // 业务组件
      |-- models              // 业务model 
      |-- services            // 业务 api
      |-- index.js            // 业务入口 入口文件只识别index.js 后缀必须是js
      |-- MainPage.js         // 业务实际页面逻辑入口
      |-- MainPage.less       // 样式
      |-- MapProps.js         // mapStateToProps、mapDispatchToProps
  |-- utils                   // 工具
  |-- app.jsx                 // 全局入口
  |-- app.less                // 全局样式
  |-- index.html              // h5 编译需要的 HTML
.eslintrc.js                  // eslint配置
.gitignore
package.json  
README.md

说到优点,肯定要说的是多端开发,一次编码,多端使用,目前 Taro 3 可以支持转换到 微信/京东/百度/支付宝/字节跳动/QQ 小程序 以及 H5 端

说到缺点,开发简单页面倒还行,但再处理一些与原生相关内容或Taro Api(如上传视频、音频功能),存在很大的兼容性, 各个移动端之间很多api达不到都统一支持,需要相应移动端原生开发人员或小程序内部人员协调协助,这点常在技术社区受人诟病,这也是很多移动端产品技术选型时直接放弃Taro的原因

部分截图

地图 个人中心 小程序开发者后台

安装

首先确保node 环境（>=8.0.0）,安装CLI工具

# 使用 yarn 安装 CLI
$ yarn global add @tarojs/cli
# 使用 cnpm 安装 CLI
$ cnpm install -g @tarojs/cli

项目初始化

使用命令创建模板项目或者直接用我给你的taro-demo项目

$ taro init 项目名

创建完项目，Taro 会默认开始安装项目所需要的依赖，如果安装失败，可以在项目目录下自己使用安装命令进行安装

$ yarn or cnpm install

保持 @tarojs/cli 的版本与项目依赖的taro版本一致，不然要出问题导致编译失败

在各端运行及打包

Taro 需要运行不同的命令，将 Taro 代码编译成不同端的代码，然后在对应的开发工具中查看效果,现支持H5、RN、支付宝小程序、微信小程序等其他小程序，现举例其中几个

微信小程序模式运行，需要自行下载并打开微信开发者工具，然后在项目编译完后（如下）选择项目根目录进行预览及打包

# yarn
$ yarn dev:weapp
$ yarn build:weapp
# 仅限全局安装
$ taro build --type weapp --watch
$ taro build --type weapp

支付宝小程序模式运行，需要自行下载并打开支付宝小程序开发者工具，然后在项目编译完后（如下）选择项目根目录下 dist 目录进行预览及打包

# yarn
$ yarn dev:alipay
$ yarn build:alipay
# 仅限全局安装
$ taro build --type alipay --watch
$ taro build --type alipay

H5 模式运行，无需特定的开发者工具，在执行完下述命令之后即可自动通过浏览器进行预览及打包

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

更新

更新 Taro CLI 工具 和项目中 Taro 相关的依赖 假设目前2.0.5为最新版本，如

# 更新 Taro CLI 工具 
$ yarn global upgrade @tarojs/cli@2.0.5
# 更细项目中 Taro 相关的依赖
$ taro update project 2.0.5

一些命令

  • Taro版本环境及依赖检测 $ taro info
  • 诊断项目的依赖、设置、结构，代码规范问题 $ Taro Doctor
  • 其他命令请参考 $ taro --help

Taro开发问题FAQ

  1. Taro语法书写规范与我们平时接触到的react语法几乎类似，包括组件化思想，组件生命周期，JSX，Hooks等
  2. 初始化选项为redux的Taro的项目文件架构也与dva+umi相似，入口文件默认是 src目录下的 app.js
  3. Taro 默认会对所有单位进行转换，所以不用移动端担心像素单位适配问题，尺寸单位建议使用 px、 百分比 %
  4. 组件和引用组件的页面css选择器不能用id 选择器（#a）、属性选择器（[a]）、标签名选择器、子代选择器（.a .b）,最好统一改成改用 class 选择器
  5. 路由、缓存的api多看看,比较区别
  6. Taro提供有自己的组件库，也有基于Taro开发的更丰富的Taro-ui库,一般建议能用taro的Api做的功能,优先用taro的Api,Taro-ui库功能兼容性偏低, 如loading
  7. 在Taro里可以像webpack引用静态资源，不需要安装Loaders，直接通过 ES6 的 import 语法来引用文件,文件建议放在静态服务器上，已减轻包体积
  8. Taro提供的api很丰富，如缓存、路由、拍照、视频，只不过兼容性问题很大，各个移动端之间很多api达不到都统一支持，不过这不能怪Taro，微信小程序的支持最友好，如果你会开发微信小程序，那么这些api你会非常熟悉
  9. Taro也可以支持与原生小程序混写，并且可以使用原生第三方组件或插件

基于Taro+Taro-ui+dva的taro项目

awesome-taro

目前看到Taro已经更新到3.x了,嘤嘤嘤嘤~, 技术这条路,看来只能是不进则退了,加油共勉~~~

avatar
文章
阅读
粉丝