微信小程序与H5开发实战，一文掌握核心技术要点

打开微信，小程序和H5页面几乎占据了我们大半的移动时间。点外卖、看文章、玩游戏、查快递，这些场景背后，小程序和H5两种技术路线一直在暗地里较劲。很多开发者纠结：到底该学哪个？哪个更适合我的业务？其实这事没那么复杂，两个都搞明白，你才能在项目里游刃有余。

先说说最核心的区别。H5本质上是网页，跑在浏览器内核里，微信内置的浏览器和Safari、Chrome没什么两样。小程序则是一套独立的运行环境，微信自己定义了一套渲染机制，页面结构用的是WXML，样式用WXSS，逻辑层用JavaScript。这意味着小程序的性能天花板更高，因为它绕开了浏览器那层厚重的解析引擎，直接走微信的底层渲染。但代价是，你写的代码没法直接搬到别的平台，H5至少还能在PC端复用。

我见过太多团队在技术选型上栽跟头。有个做电商的朋友，一开始图省事全用H5，结果用户反馈页面加载慢、卡顿严重。后来他们改成小程序原生开发，首屏速度提升了将近一倍。为什么？因为小程序有分包加载机制，可以把不常用的页面拆成独立包，按需下载。而H5每次都要拉整个页面资源，图片一多就完蛋。但反过来，如果你的内容更新频繁，比如新闻资讯类产品，H5的优势就出来了——改个文案直接发版，不用过微信审核。

现在聊点实战的。小程序开发最让人头疼的就是生命周期管理。onLoad、onShow、onReady、onHide、onUnload，这几个钩子函数必须烂熟于心。比如从详情页返回列表页，onShow会触发，但你得判断是用户主动返回还是被系统回收了页面——前者要刷新数据，后者可能要重新初始化。这里有个小技巧：在onHide里存一个时间戳，onShow时对比当前时间，超过五分钟就强制刷新，既省流量又保证数据新鲜。

H5那边呢，核心痛点在于微信的JSSDK调用。授权登录、分享卡片、支付，这些能力都得走微信提供的接口。我踩过的坑是：JSSDK的签名配置有时效性，而且必须在页面加载时就完成注入。如果你在Vue的mounted里异步获取签名，很容易出现“invalid signature”的报错。正确做法是提前在App入口处统一注入，或者用Promise封装一个getWxConfig函数，确保所有SDK调用都在签名就绪之后执行。

样式适配也是个大坑。小程序的rpx单位是个好东西，它按屏幕宽度750px等比缩放，但别忘了iPhone的刘海屏和安卓的挖孔屏。safe-area-inset-bottom这个属性一定要用上，否则底部导航栏会被手势条挡住。H5那边更麻烦，你得自己处理viewport适配，还得防着微信内置浏览器的字号缩放——用户把系统字体调大，你的页面布局可能直接崩掉。解决方案是在根元素设置固定的font-size，配合rem单位，但要注意微信对rem的兼容性在某些老版本上有bug，稳妥起见用vw/vh也行。

组件通信这块，小程序和H5的思路完全不同。小程序是事件驱动的，子组件通过triggerEvent向父组件抛事件，数据传递靠properties和data。H5那边，Vue用props和$emit，React用props和回调函数，本质都是单向数据流。但小程序有个独有的麻烦：页面和自定义组件之间的通信，如果层级太深，事件穿透会让你改到怀疑人生。我的建议是：超过三层的嵌套，直接引入全局状态管理，小程序用mobx-miniprogram，H5用Pinia或Redux，别硬扛。

再来看看性能优化。小程序的setData是个双刃剑，用得好流畅顺滑，用不好直接白屏。记住一个原则：每次setData只传变化的数据，别把整个data对象丢进去。比如一个商品列表，你只想更新某件商品的库存，就写`this.setData({'list[3].stock': 10})`，而不是重新setData整个list。H5那边，重点在懒加载和图片压缩。微信对图片有缓存机制，但如果你用CSS的background-image，记得给容器加个默认背景色，不然白屏闪一下很影响体验。

测试和调试也不能马虎。小程序开发者工具提供了真机调试和远程调试，但很多bug只在特定机型上出现。我习惯在工具里模拟不同机型，同时用真机预览模式跑一遍核心流程。H5那边，vConsole是个神器，在微信里打开H5页面，调出vConsole面板就能看到console日志和网络请求，排查问题效率翻倍。不过发布前一定要记得把vConsole的加载逻辑去掉，不然用户看到那个悬浮按钮会一脸懵。

说个容易被忽略的点：微信审核。小程序的审核比H5严格得多，尤其是涉及支付、社交、内容类的功能。你提交的版本里如果有测试数据或者临时接口地址，审核员一点开就给你打回。H5就没这烦恼，但它逃不过域名白名单的限制——所有请求的接口域名必须配置在后台，而且必须用HTTPS。所以，做混合开发的时候，最好把业务逻辑拆成H5和小程序共用，公共部分抽成独立模块，这样两边维护成本都能降下来。

回到标题那句话，一文掌握核心技术要点，其实真正的要点就三个：选对场景、摸透生命周期、避开适配坑。小程序和H5不是对立关系，而是互补关系。像电商类产品，核心交易用小程序保证流畅度，营销活动页用H5方便快速迭代，这才是聪明的做法。技术选型从来不是看哪个时髦，而是看你的业务到底需要什么。下次再有人问你该学哪个，你可以反问他：你的用户更在意加载速度，还是更在意内容更新频率？答案自然就出来了。