Taro 转换到标准小程序注意事项

本文档记录了将 Taro 项目转换为标准小程序时需要注意的关键问题和解决方案，以避免编译错误和运行时问题。

一、WXML 语法限制

1. 禁止使用三重花括号 `{{{}}}`

问题：标准小程序的 WXML 不支持三重花括号（用于 unescaped output），会导致编译错误。

解决方案：

对于简单对象，使用双花括号并添加空格：{{ {...object} }}
对于复杂对象，在 JavaScript 中预计算后传递到 WXML

示例：

// 错误 (WXML)
<payment-action payment="{{{...order.payment, attach: order._id}}}" />;

// 正确 (JavaScript 预计算)
const paymentData = {
  ...order.payment,
  attach: order._id,
  orderCode: order._createTime,
};

// 正确 (WXML)
<payment-action payment="{{paymentData}}" />;

2. 禁止使用箭头函数 `=>`

问题：标准小程序的 WXML 表达式不支持箭头函数，会导致编译错误。

解决方案：将复杂逻辑（如 map、reduce、filter 等）移至 JavaScript 中预计算，将结果存储在页面的 data 中。

示例：

// 错误 (WXML)
<text>已退费用: ¥ {{formatCurrency(order.payment?.refunds?.reduce((sum, r) => sum + (r.refundFee || 0), 0))}}</text>

// 正确 (JavaScript 预计算)
calculateRefundAmount(order) {
  if (!order?.payment?.refunds?.length) return 0;
  return order.payment.refunds.reduce((sum, r) => sum + (r.refundFee || 0), 0);
}

// 正确 (WXML)
<text>已退费用: ¥ {{formatCurrency(refundAmount)}}</text>

二、数据处理最佳实践

1. 复杂逻辑预计算

原则：WXML 只用于数据展示，复杂计算和逻辑处理应在 JavaScript 中完成。

需要预计算的场景：

数组操作（reduce、map、filter、find 等）
对象合并和转换
条件判断和计算
格式化处理

2. 安全的嵌套属性访问

问题：直接访问深层嵌套属性（如 order.payment.refunds）可能导致语法错误。

解决方案：

使用可选链（如果支持）或条件判断
在 JavaScript 中预计算并验证

示例：

// 错误 (WXML)
<view wx:if="{{order.payment.refunds.length > 0}}">有退款</view>

// 正确 (WXML - 安全访问)
<view wx:if="{{order && order.payment && order.payment.refunds && order.payment.refunds.length > 0}}">有退款</view>

// 更好的方式 (JavaScript 预计算)
const hasRefunds = order?.payment?.refunds?.length > 0;

// 正确 (WXML)
<view wx:if="{{hasRefunds}}">有退款</view>

3. 组件属性数据处理

问题：向组件传递复杂对象时，直接在 WXML 中构建对象可能导致语法错误。

解决方案：在 JavaScript 中构建完整的属性对象，然后在 WXML 中引用。

示例：

// 错误 (WXML)
<custom-component data="{{name: item.name, value: item.value, extra: {id: item.id}}}" />;

// 正确 (JavaScript 预计算)
const componentData = {
  name: item.name,
  value: item.value,
  extra: { id: item.id },
};

// 正确 (WXML)
<custom-component data="{{componentData}}" />;

三、文件结构和配置

1. 页面配置文件

确保每个页面都有正确的配置文件：

index.js / index.jsx - 页面逻辑
index.wxml - 页面结构
index.wxss - 页面样式
index.json - 页面配置

2. 组件命名和引用

组件名称应使用小写字母和连字符
确保组件路径正确，避免相对路径错误

五、验证方法

1. 检查三重花括号

grep -r "\{\{\{" /path/to/project --include="*.wxml"

2. 检查箭头函数

grep -r "=>" /path/to/project --include="*.wxml"

3. 运行编译检查

# 如果项目有配置编译命令
npm run build:weapp

六、总结

将 Taro 项目转换为标准小程序时，核心原则是：将复杂逻辑和数据处理移至 JavaScript，保持 WXML 简洁。

避免在 WXML 中使用高级 JavaScript 语法
复杂对象和计算结果在 JavaScript 中预计算
使用安全的嵌套属性访问方式
定期使用 grep 检查潜在问题

遵循这些注意事项可以有效避免编译错误，提高代码的可维护性和运行稳定性。