React Native中如何格式化WhatsApp待发送的文本内容

核心逻辑是放弃直接序列化JSON对象的方式，手动拼接符合购物小票视觉效果的结构化文本，做URL编码后传入WhatsApp跳转链接即可，同时修复原代码里的几个隐性bug。

关键调整点 #

• 修正原代码订单时间取值错误：原逻辑仅调用getDate()拿到当月日期数字，缺失年、月、时间信息，替换为格式化后的完整可读时间
• 利用WhatsApp支持的Markdown等宽代码块包裹小票内容，保证所有字符对齐，实现和实体小票一致的规整排版
• 对拼接好的小票文本做URL编码，避免特殊字符（换行、&、空格等）截断URL参数，导致内容错乱、手机号识别失败
• 替换原链接里错误的HTML转义字符&，URL参数直接用&分隔即可

完整实现代码 #

// 格式化完整订单时间
const getFormattedOrderTime = () => {
  const now = new Date();
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, '0');
  const day = String(now.getDate()).padStart(2, '0');
  const hour = String(now.getHours()).padStart(2, '0');
  const minute = String(now.getMinutes()).padStart(2, '0');
  return `${year}-${month}-${day} ${hour}:${minute}`;
};

// 生成购物小票样式文本
const generateReceiptContent = () => {
  // 等宽代码块包裹保证排版对齐
  let content = "```\n";
  content += "========== 订单小票 ==========\n";
  content += `订单ID: ${user_id}\n`;
  content += `下单时间: ${getFormattedOrderTime()}\n`;
  content += "------------------------------\n";
  content += "■ 客户信息\n";
  content += `姓名: ${Name}\n`;
  content += `电话: ${Phone}\n`;
  content += `地址: ${Address}\n`;
  content += "------------------------------\n";
  content += "■ 商品明细\n";
  // 按实际订单数组结构遍历输出，示例默认字段为商品名、数量、单价
  Data.forEach((item, index) => {
    content += `${index + 1}. ${item.goodsName}\n`;
    content += `   ${item.quantity}件 × ${item.price} = ${item.quantity * item.price}\n`;
  });
  content += "------------------------------\n";
  content += `订单状态: *待处理(Pending)*\n`;
  content += `合计金额: ${TotalPrice}\n`;
  content += "==============================\n";
  content += "```";
  return content;
};

// 执行WhatsApp跳转发送
const receiptText = generateReceiptContent();
const whatsappUrl = `whatsapp://send?text=${encodeURIComponent(receiptText)}&phone=+923354584582`;
Linking.openURL(whatsappUrl).catch(err => console.error('跳转失败:', err));
props.navigation.replace(navigationstring.BOTTOMTABHOME);

适配说明 #

• 商品明细遍历部分的字段名（goodsName/quantity/price）根据你实际的Data数组结构替换即可
• 如果不需要等宽效果，去掉内容首尾的```标记就行，也可以自行调整分隔线长度、emoji符号匹配你想要的小票风格
• 必须保留encodeURIComponent编码逻辑，否则只要文本里出现&、换行这类特殊字符，就会导致WhatsApp识别到的发送内容不全、手机号参数丢失

内容的提问来源于stack exchange，提问作者Tanzeel Ur Rehman