第三章 小程序前端框架入门：Taro/uni-app选型、组件化思想、生命周期、页面路由与传参

好，咱们进入第三章。这一章我打算聊聊小程序前端框架的选择，以及一些核心概念。说实话，当年我刚接触小程序开发时，也纠结过到底用原生还是用框架。后来踩了不少坑，才慢慢摸清楚门道。今天就把这些经验分享给你。

3.1 Taro vs uni-app：我该怎么选？

先说说这两个框架。Taro和uni-app，说白了都是「一套代码，多端运行」的方案。但它们的侧重点不太一样。

Taro 是京东团队出的，早期只支持React语法，后来也支持了Vue。我个人习惯用React，所以Taro用起来很顺手。它的编译机制比较「干净」，生成的代码体积控制得不错。

uni-app 是DCloud团队的产品，默认就是Vue语法。它的生态更丰富，插件市场里啥都有。我在项目中遇到过需要快速集成地图、支付等功能的场景，uni-app的插件确实能省不少事。

怎么选？我建议你按这个思路来：

• 团队技术栈：如果团队React熟，选Taro；Vue熟，选uni-app
• 项目复杂度：纯小程序，两者都行；需要同时做App、H5，uni-app更成熟
• 性能要求：对包体积敏感，Taro更优；对开发效率敏感，uni-app更优

3.2 组件化思想：别再写「面条代码」了

组件化，这个词你可能听过很多遍了。但真正理解它，是在我重构一个直播带货小程序之后。那个项目一开始所有逻辑都堆在一个页面里，光一个商品列表就写了800行。后来我花了三天时间拆成组件，代码量少了40%，维护起来也轻松多了。

组件化的核心就一句话：把页面拆成独立、可复用的模块。比如直播带货小程序里，常见的组件有：

• 商品卡片：展示商品图片、价格、销量
• 购物车按钮：加购、减购、数量显示
• 倒计时组件：限时抢购的倒计时
• 弹窗组件：优惠券、活动提示

每个组件只做一件事，做好一件事。这样你改商品卡片的样式，不会影响到购物车按钮。这就是组件化的好处。

3.3 生命周期：页面从生到死的过程

生命周期，听起来挺玄乎的。其实就是页面从创建到销毁，会经历的几个阶段。每个阶段都有对应的钩子函数，你可以在里面写代码。

以uni-app为例，常用的生命周期有这些：

生命周期	触发时机	常见用途
onLoad	页面加载时触发	获取页面参数、初始化数据
onShow	页面显示时触发	刷新数据、统计曝光
onReady	页面初次渲染完成	获取DOM节点信息
onHide	页面隐藏时触发	暂停播放、保存草稿
onUnload	页面卸载时触发	清理定时器、释放资源

举个例子，直播带货小程序里，商品列表页跳转到商品详情页。当详情页返回时，列表页的onShow会触发。这时候你就可以重新拉取最新数据，保证用户看到的价格是最新的。

3.4 页面路由与传参：页面之间怎么「说话」？

小程序里，页面之间的跳转和传参，是基本功。你想想看，用户从首页点进商品详情页，总得把商品ID传过去吧？不然详情页怎么知道展示哪个商品？

uni-app里常用的跳转方式有：

• navigateTo：保留当前页面，跳转到新页面（最常用）
• redirectTo：关闭当前页面，跳转到新页面
• switchTab：跳转到tabBar页面
• reLaunch：关闭所有页面，打开新页面

传参的方式也很简单，直接在url后面拼接参数就行：

// 跳转并传参
uni.navigateTo({
  url: '/pages/detail/detail?id=123&name=商品A'
})

// 在目标页面接收参数
onLoad(options) {
  console.log(options.id)    // 输出：123
  console.log(options.name)  // 输出：商品A
}

这里有个细节要注意：参数值会被URL编码。如果参数里包含中文或特殊字符，记得用encodeURIComponent/decodeURIComponent处理一下。我之前就遇到过用户昵称里带了个「&」符号，结果参数解析全乱了。

另外，页面栈的概念也要理解。小程序最多支持10层页面栈，超过10层再navigateTo就会失败。这时候可以用redirectTo替代，或者用reLaunch清空栈。我在做直播带货小程序时，用户从首页->分类->商品列表->商品详情->下单页，一路点下去，很容易就超过10层了。所以我在下单成功后，会用redirectTo跳转到订单列表页，而不是继续navigateTo。

好了，这一章的内容就这些。总结一下：框架选型看团队和项目，组件化思想要牢记，生命周期要理解触发时机，路由传参要小心编码问题。下一章咱们会深入讲讲状态管理和数据流，到时候再聊。