小程序开发之框架篇

在上一篇小程序开发之入门篇的文章里，我们从小程序诞生的背景、为什么会存在小程序这种形态以及开发小程序的基础知识、运行原理等方面进行了介绍。对于开发者来说，如果要在开发一个小程序并发布上线，应该怎么做到快速开发和部署呢。本篇文章会从跨端框架的角度入手，带你了解如何选择小程序开发框架，并介绍我们的最佳实践。

原生小程序开发带来的问题

在介绍框架之前，我们首先来看一下如果不使用框架，而是直接采用原生的小程序语法进行开发会是一种什么样的体验。

1.不支持原生的Html标签

对于熟悉 Web 开发的同学来说，小程序语法不支持原生的 Html 标签恐怕是很大的一个困扰。不同于 Web 开发中统一的 Html 标签语言，每家小程序平台都定义了自己的一套小程序标签语言，比如支付宝小程序的 AXML，或者是微信小程序的 WXML。无论是 AXML 还是 WXML，基本都会支持数据绑定、条件渲染、列表渲染、模板等几种语法，但是在具体使用上仍然会有些差异。比如 AXML 的条件渲染是 a:if 语法，WXML 的语法确是wx:if 语法

<view a:if="{{length > 5}}"> 1 </view>

<view a:elif="{{length > 2}}"> 2 </view>

<view a:else> 3 </view>

<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>

<view wx:elif="{{view == 'APP'}}"> APP </view>

<view wx:else="{{view == 'MINA'}}"> MINA </view>

从上面的代码中我们也可以看出来，使用的标签是 Html 中不存在的 <view> 标签。不同于 Html 中丰富的标签，小程序的标签主要有 view  和 text 两种标签，其中 view 可以认为是块元素，text 是行元素。这种不同于 Html 的语法和标签设计，对熟悉 Web 开发的同学来说是一种不小的心智负担。

2.不能直接使用React或Vue

React 和 Vue 可以认为是前端开发最重要的两种框架了(Angular 同学不喜勿喷)，对于熟悉用这两种框架开发的同学来说，使用原生的小程序开发一个组件无法直接复用React 或 Vue 的生态。你不得不要写一遍 axml、acss、index.js、index.json等文件来描述这个组件。开发体验不所谓不繁琐

3.不支持dom、bom的Api

原生小程序语法不支持直接调用 dom 或者 bom 的 api，在 Web 开发中查询一个节点的宽高可以很容易的实现，直接调用document.querySelector即可。但在小程序中，需要借助于小程序的节点查询 api 才可以实现，比如支付宝小程序的 SelectorQuery 语法。

4.无法在多个小程序之间复用

从上面几点我们可以看出，不同的小程序平台会有自己的一套语法实现。如果我们开发的一个组件想要在多个小程序平台上复用就很难处理，更别说一套代码要部署到多个小程序平台了。所以使用小程序的原生语法进行开发带来的很大一个问题就是代码复用问题。

为什么需要跨端框架

正是由于原生小程序语法开发带来的上述问题，各大公司和社区围绕着小程序开发体验以及多端的需求相继推出了自己的跨端框架。跨端框架可以带来的好处主要有以下几点

1.提升开发效率，可使用React、Vue开发

对于熟悉了 Web 开发的同学来说，借助于跨端框架，“理论上”你可以像开发一个普通的 React 或者 Vue 应用一样开发一个小程序。和之前的开发模式也没有什么不同，不需要再关心 AXML 或者 WXML 的语法，也可以使用你所熟悉的 Less 或者 Sass 来写样式。

2.一次开发，多端运行

从框架名字上就可以看出来，跨端框架，最重要的两个字是跨端，这里的跨端主要是指不同的小程序平台，比如支付宝小程序、钉钉小程序、微信小程序以及头条小程序等，除了小程序之外一般还会支持 H5，对于某些跨端框架可能还会支持React Native。这就保证了使用跨端框架开发完之后，可以分发到微信、支付宝等不同的小程序平台，还可以编译成一个普通的 H5 或者 RN 应用。真正做到一次开发，多端运行。

3.可复用可沉淀

由于我们可以开发一次就在多个端运行，因此我们的代码就可以在不同的小程序或者 H5 中进行复用。基于此可以沉淀公共组件、抽象公共逻辑，会极大地提升开发效率。

常见的跨端框架及对比

目前市面上存在的跨端框架有很多，综合来看比较常用的主要是以下 4 个，我们从以下几个维度来比较看下，这些跨端框架的区别，帮助你在做技术选型时可以更好的选择适合业务场景的框架。注意，由于框架本身也存在版本升级，不同版本的差异也很大，以下的对比仅讨论最新版

综上，如果不考虑任何其他外在因素的影响，如果你的开发团队使用 React 居多，推荐使用 Taro，如果你的开发团队使用 Vue 偏多，则推荐使用 uni-app

我们的最佳实践

由于我们的团队主要是使用 React，基于 React 的沉淀也较多，我们最终的跨端框架选择是 Taro。基于 Taro 我们沉淀了一套跨端脚手架，脚手架默认支持以下几个特性：

🏠 基于 Taro，支持H5、微信、支付宝、钉钉小程序等多端

基于 @tarojs/cli 初始化工程模板，默认支持微信、支付宝、钉钉等小程序以及 H5 和 RN 应用

💪 使用 TypeScript 编写，完整的类型定义

基于 TypeScript 编写，支持完整的类型定义，让代码更健壮

📦 支持 React 和 React Hooks

除了支持 React 外，React 的相关生态都可以直接复用。React Hooks 除了支持 taro-hooks 外还内置 ahooks 的支持，丰富的 hooks 列表供开发者使用

🎨 支持 css 变量，轻松定制门户主题

css 样式默认使用 less 并支持 css modules，此外对于很多门户类应用，通常会有主题定制或者换肤的需求，我们的跨端脚手架默认支持 css 变量，帮助开发者轻松定制门户主题

🚪 代码门禁，提交代码自动执行代码规范检查

默认提供标准的 lint 配置 @ali-dayu/lint-confg，包括 eslint、stylelint、prettier 以及 commitlint。完善的代码门禁，保证代码质量，杜绝代码坏味道

总结

本篇作为跨端系列第二篇文章，主要从小程序跨端的开发场景切入介绍了常见的跨端框架以及我们自己的最佳实践。一方面可以帮助开发者在遇到跨端问题时可以更快的选择适合自己的技术栈，另一方面我们基于项目上的诉求以及内部的多年实践沉淀了我们自己的跨端脚手架，希望对正在开发小程序的同学有所启发。