Taro 小程序开发：信息流工具的微信端实践

信息流工具（Fluxio）要做微信端——小程序是最好的入口：分享到微信、收藏即记、用完即走。这篇是 Taro 小程序端的开发实践：技术选型、核心页面、微信能力接入和踩坑。

一、为什么小程序 + Taro

二、项目结构

三、核心实现

1. 横向切换信息流

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

// 横向滚动切换来源（Taro ScrollView scroll-x）
<ScrollView scrollX className="source-tabs">
  {sources.map(s => (
    <View className="tab" key={s.id}
      onClick={() => switchSource(s.id)}>
      {s.name}
    </View>
  ))}
</ScrollView>

// 信息流列表（滚动加载）
<ScrollView scrollY onScrollToLower={loadMore}>
  {articles.map(a => <ArticleCard key={a.id} item={a} />)}
</ScrollView>

2. 收藏到本地（微信分享闭环）

关键认知：小程序不能直连本地服务，收藏链路要设计中转（这也是"收件箱模式"的价值——统一入口，来源不限）。

3. 微信分享

1
2
3
4
5

// 分享给好友（带文章信息）
Taro.showShareMenu({
  withShareTicket: true,
})
// onShareAppMessage：分享卡片带标题/图/路径

4. 包体积控制

四、踩坑记录

1. ScrollView 横向 + 纵向嵌套：外层纵向滚动 + 内层横向滚动，手势冲突 → 明确滚动方向 + touchmove 处理
2. 本地服务访问：小程序不能访问 127.0.0.1 → 中转方案（收件箱 API + 轮询）
3. Taro 版本坑：Taro 3 vs 4 API 差异 → 锁版本 + 按官方模板初始化
4. 样式兼容：H5 的 CSS 特性小程序不支持 → 只用 flex/简单定位
5. 分包后跳转：分包页面路径变了 → 统一路由管理（常量定义路径）

五、与 App 端的分工

核心：两端共用"本地收件箱服务"（数据同一入口），UI 各自实现——共享逻辑层，不共享 UI。

六、上线清单

总结

Taro 小程序开发的核心认知：

1. Taro 适合"前端栈 + 小程序优先"：React 迁移平滑，多端可扩展
2. 小程序访问不了本地服务：收藏链路设计中转（收件箱模式统一入口）
3. 包体积是必过的关：分包 + 按需引入 + 压缩
4. 双端分工：小程序管轻量触达，App 管重能力，共享数据层

小程序的本质是"微信生态的入口"：分享、收藏、触达都依赖微信能力。把入口做好，App 的价值才能被带出来——这是信息流工具微信端的战略意义。