Taro跨端开发：H5与小程序的差异解析

Question

背景

通过一套代码，同时构建H5和小程序应用，以满足多端业务场景，并为后续项目积累经验，这是选择Taro这类框架的核心价值。

多端开发方式与Taro的优势

常见的跨端开发方式主要有混合开发（如Cordova/Uniapp）和原生体验开发（如Flutter/React Native）。它们的优点是可以快速开发iOS和Android应用，但通常无法适配小程序端。

相比之下，Taro框架具备显著优势：

跨框架：支持使用Vue、React、Nerv等多种前端框架进行开发。
跨端：能够将同一套代码编译输出到H5、各类小程序以及React Native等不同平台。

H5与小程序的本质区别

H5运行在浏览器或WebView环境中，拥有完整的Window对象及BOM、DOM API，但直接操作的系统级API（如拍照、上传、位置服务）有限。

小程序则运行在微信等平台封装的环境中。其JavaScript运行在独立的JS Core中，没有完整的浏览器对象，因此无法直接操作DOM和BOM。但平台提供了一套丰富的、能够调用系统权限的API。此外，两者的渲染机制也不同：H5的JS和DOM渲染在同一线程；小程序则分为逻辑层和渲染层，通过原生消息机制通信。

了解这些根本差异，有助于预判开发中可能遇到的问题，主要差异点包括：

客户端环境
运行机制
系统权限
更新机制

客户端环境差异

H5的宿主是浏览器，小程序则是特定的应用平台（如微信）。这导致在小程序中无法使用window、document等浏览器对象，缓存机制也不同（H5可用Cookie，小程序只有Storage）。因此，在Taro开发中需注意：

1. 客户端环境判断
传统H5开发通过navigator.userAgent判断环境。在Taro中，可以直接使用Taro.getEnv()API来获取准确的端信息，例如：

const isWeb = Taro.getEnv() === 'WEB';
const isWeapp = Taro.getEnv() === 'WEAPP';

2. 登录流程控制
小程序登录通常通过wx.login获取code，再由服务端交换凭证，最终前端缓存token。H5登录则可能由服务端直接设置Cookie或通过接口返回token。

在本次开发中，H5登录由服务端直接设置Cookie，测试时需手动配置；小程序则使用了中台登录插件。如果采用统一的登录封装，可以这样设计：

const loginMethods = {
  WEB: () => { /* H5登录逻辑 */ },
  WEAPP: () => { /* 小程序登录逻辑 */ }
};
const currentEnv = Taro.getEnv();
loginMethods[currentEnv]();

运行机制与数据请求时机

H5的页面生命周期与框架（如Vue的created、React的componentDidMount）紧密相关，数据请求通常在此时进行。

小程序分为冷启动和热启动。热启动时，页面切换（触发onShow）可能会重复请求数据，例如列表页在息屏唤醒后可能出现重复项，需要在代码中对此情况进行处理。

系统权限差异

小程序可直接调用平台API实现保存图片、拍照、录音、获取位置、分享等功能。H5则往往需要借助JSBridge调用原生能力或使用特定组件。主要差异体现在：

分享转发：小程序可使用wx.shareAppMessage或分享按钮轻松实现；H5通常需要调用特定的JSBridge API。
上传图片：小程序可直接调用API从相册选择；H5需要文件上传组件或借助JSBridge。

更新与发布机制

H5项目打包后可实时发布更新。小程序则需要将代码包上传至后台，经过审核后才能发布。每次小程序冷启动时，平台会检查是否有新版本并异步下载，新版本需等到下一次冷启动才会生效。开发者也可使用wx.getUpdateManager主动检查更新。

其他开发注意事项

组件化开发：采用组件化开发有利于逻辑拆分、解耦和复用。在封装多端组件时，可利用Taro.getEnv()进行条件渲染，以适应不同端的UI差异，避免为不同端创建大量后缀名不同的文件。
接入中台服务：流程涉及申请业务ID、联调测试等，沟通成本和环境（开发、测试）等不可控因素较多。
开发调试：H5可使用vConsole，小程序需使用微信开发者工具。
代码优化：
- 设计模式应用：例如，上传文件可采用策略模式，根据不同环境执行不同的上传方法。
- 代码复用：将公共逻辑（如实名状态判断）封装成函数或挂载到Taro实例上，便于全局调用。

扩展：实现更通用的跨端组件

尽管Taro支持多端输出，但其官方UI库（Taro UI）目前仅支持React，且不包含React Native。为了开发真正跨框架（Vue/React）且支持React Native的组件，可以探索以下技术：

1. Web Components
Web Components是一套创建可重用自定义元素的技术标准，主要包含：

自定义元素：通过customElements.define()方法定义新元素。
Shadow DOM：用于将标记结构、样式和行为封装起来，与主文档隔离。可以使用:host选择器定义宿主样式，用::slotted定义插槽内容样式。
模板与插槽：使用