小程序和网页有什么不同？

微信小程序跑在微信提供的运行环境里，不是完整的浏览器。逻辑层和渲染层分开，页面用自己的模板和样式子集，接口以 wx 为准。适合用微信登录和支付的轻量应用，不适合照搬所有 Web API。

原理

一个页面有 js、wxml、wxss 和 json 配置。逻辑在独立的脚本环境里，没有 DOM，不能用 document 改界面。数据用 setData 传到渲染层，渲染层再更新视图。setData 的数据会被序列化，传输大对象会卡。

渲染层类似浏览器，但组件是微信的一套，不是任意 HTML。样式是 CSS 的子集。

生命周期要区分应用和页面。应用有 onLaunch、onShow、onHide。页面有 onLoad、onShow、onReady、onHide、onUnload。onLoad 拿路由参数，一次加载只发生一次；onShow 每次出现都会发生，从后台回来也会。

包有体积上限。把非首屏页面放进分包，图片放到 CDN，不要都打进包里。

追问

和 Vue、React 的关系？

可以用框架编译到小程序，但运行时仍是逻辑层加渲染层，不是浏览器里的虚拟 DOM 直接改 DOM。setData 的粒度仍然要管。

双线程带来什么限制？

脚本拿不到渲染层的节点对象。布局信息要通过节点查询接口异步拿。频繁查询再 setData 会来回传。

易错点

在小程序里使用 window、document 或依赖 DOM 的库。
onShow 里无条件请求，每次切换应用都打一遍。
一次 setData 传整个列表，消息过大。

相关