使用Taro开发小程序指南

taro , , 评论

阅读对象：首先需要阐明本文的受众是哪些人。因为文章只是罗列了一些 Taro 的资源，并未对实际的开发提供很多建议和深度的讲解，本文在编写之初，就默认你对小程序的开发有一定的了解，踩过一些坑，想换一种方式开发小程序，刚好你了解到 Taro，那本文对你是有价值的，方便你去找到一些和 Taro 相关的资料，加速入门。

随着小程序的发展，现在主流厂商均有自己的小程序框架，如：微信、京东、百度、支付宝、字节跳动、QQ、飞书，虽然各端小程序开发遵循了微信小程序的开发模式，但是各家小程序又包含自己的特殊，并不能完全对齐。这导致同一套功能开发，需要兼容小程序以及 H5。

目前常见的开发模式有：

  1. 针对每一个小程序做单独开发，研发投入成本较大；即原生开发；
  2. 开发 H5 版本的代码，利用小程序的 webview 加载 H5 的页面，从而屏蔽适配各家小程序的繁琐过程。例如微信的kbone；
  3. 使用多端开发框架，编写一套代码，通过框架编译成各家小程序代码；如：Taro、uni-app；

本文介绍第三种开发模式，采用多端框架来开发小程序。市面上多端框架较多，如：Taro、WePY 、uni-app、mpvue、chameleon、kbone。那技术栈如何选型？

小程序多端框架横向对比

市面上已经存在众多大牛对现存的小程序多端框架进行评测。这里给出几个比较好的评测文章。

小程序框架全面测评（2019-03-12），来自 Taro 官方
跨端开发框架深度横评之 2020 版（2020-04-09），来自 uni-app 官方，掘金

这里需要提的是微信官方推出的kbone，它实现了一个适配器，在适配层里模拟出了浏览器环境，让 Web 端的代码可以不做什么改动便可运行在小程序里。如果你只需要支持微信小程序和 H5，毕竟是微信官方推出的，可以关注下这个解决方案。

截止目前来看，在小程序开发领域，国内开发者使用最多的应当是Taro、uni-app、kbone。其他开发框架已经逐渐被遗弃。就各家投入来看，各框架的版本迭代和修复 BUG 的效率都很不错，公司均有专门的团队。所以在采坑方面，目前不用太担心，出现问题官方修复速度都不错。

如何使用 Taro

如果你不了解Taro，可以在官网了解https://taro-docs.jd.com/taro/docs。

官方提供了比较详细的教程告知如何初始化 Taro 项目，Taro 安装及使用，你可以按照基础教程>进阶教程的方式进行入门。

当然官方也有入门教程可以参考Taro 渐进式入门教程，看完基本了解如何使用 Taro 了。

其中你需要了解 Taro 的编译配置，以及 Taro 如何定义设计稿及尺寸单位。

编译配置

编译配置存放于项目根目录下的 config 目录中，包含三个文件：

  • index.js 是通用配置
  • dev.js 是项目预览时的配置
  • prod.js 是项目打包时的配置

详细的编译配置参数参见编译配置详情。按照文档介绍配置项目即可。

其中需要说明的是，此处的配置是针对 Trao 的编译打包行为进行的配置。在小程序开发中，各大平台通常会对小程序的包大小进行限制。例如：

在这种情况下，Taro 编译完成后，主包很容易就会超过 2M 的限制。常见的方式是：

  • 移除包中的静态资源，改成服务器加载，例如图片上传到 CDN
  • 压缩代码

使用 terser-webpack-plugin 压缩代码

在/config/dev.js中添加以下配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
  mini: {
    webpackChain: (chain) => {
      chain.merge({
        optimization: {
          minimize: true,
          minimizer: [
            new TerserPlugin({
              test: ["common.js", "taro.js", "vendors.js", "app.js"], // 参与压缩的文件
            }),
          ],
        },
      });
    },
  },
};

在 Taro 编译的过程中，还需要一个配置文件，用来告诉 Taro，编译成各端小程序，需要依照何种规则进行编译。

设计稿及尺寸单位

Taro 默认以 750px 作为换算尺寸标准，如果设计稿不是以 750px 为标准，则需要在项目配置 config/index.js 中进行设置。所以在项目设计之初，最好和设计人员确认，以 Iphon6 作为标准尺寸进行设计。

或许你会好奇，为何移动端会以 750px 作为设计标准，你可以阅读
移动开发的设计稿为什么大多数是 750px。
移动端 Web 页面适配浅析
深入浅出移动端适配（总结版）

总之，移动端开发在单位处理上是个大坑，但是好在 Taro 帮我们处理了这些问题，你只需要根据设计稿标注的尺寸进行代码编写即可。即从设计稿上量的长度 100px，那么尺寸书写就是 100px，当转成微信小程序的时候，尺寸将默认转换为 100rpx，当转成 H5 时将默认转换为以 rem 为单位的值。这一切都是透明的。

你需要如下定义

1
2
3
4
5
6
7
8
9
10
// /config/index.js
{
  designWidth: 750, // 设计稿尺寸
  deviceRatio: { // 针对不同设计稿尺寸的处理换算规则
    640: 2.34 / 2,
    750: 1,
    828: 1.81 / 2,
    375: 2 / 1
  },
}

如果你不希望转码单位，可以大写字母的 Px 或 PX 这会被 Taro 会被忽略。

Vue 的支持

Taro 支持使用 Vue/Vue3 的语法开发，但是并不是完全支持。
主要的差别有：

  • 事件，使用@tap替代@click
  • 在 Vue 中使用 jsx 时，事件名称的首字母需要大写，例如 onGetphonenumber
  • 无法使用 stopPropagation阻止滚动穿透

经过测试，@tap="e => {e.stopPropagation(); handleTapEvent(); }" 这种写法可以阻止冒泡

  • Taro 中 ref 存在差别，无法获取大大小信息
  • 不支持 <style scoped>，需要保证各个页面定义的样式不会相互影响，官方建议使用 cssModules 代替。#6662。简单的方式可以使用 scss，每个页面均定义一个和页面同名的 css 父类，该页面的所有样式均写在该样式内，通过namespace的方式进行屏蔽。
  • 不支持 vue-router，可以使用官方的路由方案

官方列出了一个不能完全兼容 Vue 的情况。参见其他限制

如何选择 UI 框架

Taro 内置封装了小程序提供的原生组件功能，你可以使用 Taro 的方式调用原生组件。

由于 Taro 的工作原理，导致 web 的生态无法在 taro 中完全使用，需要针对 Taro 做定制化开发。UI 也是，好在现在有比较优秀的第三方的 UI 框架可以选择。

NutUI

NutUI 3.0

京东官方出品的 UI 框架，截止 2022 年 4 月 17 号，最新版本为v3.1.18。UI 风格是京东商城的风格，支持自定义主题，组件丰富，有很多商城特有组件，例如地址，商品卡片等，问题解决速度很快。

taro-ui-vue3

taro-ui-vue3

taro-ui-vue3 是一款基于 Taro 框架开发, 并采用 Vue 3.0 重写的 Taro UI 组件库。组件功能丰富，常用开发均可以支持。

Taroify

Taroify

Taroify 是移动端组件库 Vant 的 Taro React 版本，两者基于相同的视觉规范，提供近似一致的 API 接口，助力开发者快速搭建小程序应用。如果你之前习惯Vant进行开发，可以尝试。

taro-color-ui

taro-color-ui

color-ui 是之前使用经验就是需要下载官方的 demo 进行魔改，虽然很好看但是不是很方便，taro 版本提供了简单的方式使用，非大团队支持，完善度还有待提升。尝鲜可以使用，可以应付常见开发需求。

Taro 物料市场

Taro 物料市场

taro 为了丰富生态，创建的物料市场，你可以在市场中找到一些现有的解决方法，目前内容不是很多，现有工具如果出现问题，需要自己下载源码进行魔改。

Taro 社区

Taro 社区

可以在社区中查找常见问题的处理方法

结束语

Taro 最为目前比较优秀的解决方法，虽然有其不足之处，但也为小程序的开发提供了一种新的开发体验。

借助kbone文档的一句话来说，每个方案都有自己的优劣，不存在能够完美解决所有问题的方案。但是，在特定的需求下，选择自己合适的方案，会让开发效率成倍的提升。

曹一山Web Developer & Designer

一个Web开发者, 热爱生活, 崇尚技术。