跨端页面里反复出现的环境约束

同一套界面放到小程序、App 和手机浏览器之后，很多问题都不是业务算错，而是宿主给页面的能力不一样。下面这些约束来自实际开发记录，按环境归类，不绑定具体项目。

小程序：包、滚动和数据更新是三件分开的事

主包里通常走不掉这些东西：tab 页、app 启动时就加载的公共脚本、自定义组件，以及在启动文件里引入的第三方 SDK。插件代码也会计入主包。图片可以压缩或改由服务端提供；tab 页不能放进分包。

scroll-view 必须有明确高度，否则会把页面继续撑长。横向滚动时，容器需要 white-space: nowrap，子项需要 inline-block。nowrap 会被子元素继承，子元素内部要换行时得自己改回去。

底部留白不要靠给最后一项加会撑出屏幕的 margin。可以在滚动内容末尾放一个固定高度的空白节点。全面屏的安全区也是同样的问题：要么给页面加 padding-bottom，要么用一个包住页面的组件统一处理。

globalData 改了，其他页面不会因此重新渲染。别的页面要显示新数据，需要自己 setData。请求如果是异步的，组件生命周期也不能保证发生在请求之后。需要跨页自动更新时，应使用带订阅的状态库，而不是只放一个全局对象。

用组件方式嵌套一个“页面”时，不要指望 onLoad 仍然执行。作为独立页面打开时，生命周期在页面方法里；嵌进别的页面时，只有组件的 attached 等钩子。下拉刷新也属于页面能力，不能假设嵌进去的组件还拥有它。

事件上，自定义数据要从 currentTarget 取。target 可能是内部被点中的子节点，上面没有你绑在外层的 data-*。

setData 的数据量大时会明显变慢。不参与渲染的数据不要放进 data。用 wx:if 改变一个标记让组件销毁再创建，可以强制它按新数据重新挂载，但这是重置实例，不是更便宜的局部更新。

布局上还有几条稳定的现象：

模板里的属性和方法不要用 kebab-case，uni-app 这一层只可靠地认驼峰。

只在某个平台执行的代码要用条件编译包起来。普通的运行时判断挡不住其他平台的编译和打包。

页面还必须出现在路由配置里。只在目录中存在、却没注册的页面，App 里系统返回按钮可能没有反应，因为原生导航栈里根本没有这一项。

调试器和真机并不总是同一种行为，下面几条以真机限制为准：

企业应用还要在开发工具里选择应用类型，并登录到对应企业，否则预览不是真正的钉钉运行环境。

FlatList 里放轮播，或 ScrollView 里放轮播时，如果裁剪掉屏外子视图，轮播内容可能直接不出现。需要显式关闭这种裁剪。

一个页面同时打很多接口时，不要等全部返回再渲染。把请求放进各自的区块，加载中显示骨架，拿到数据后再区分空状态。加载标记还是 true 时就去判断“数据是不是空的”，空状态会闪一次。

弹层出现阴影闪白时，打开状态栏透传，并让动画使用原生驱动。底部栏跳动则常常来自导航自带的头部高度变化，换成自定义头部后更稳。

Android 上绝对定位的按钮如果没有外层 View，点击会失效。外面包一层再绑事件。

底部 tab 可能在启动时就把每个 tab 挂上。写在 useCallback 里、又没把登录态放进依赖的函数，会一直是未登录时的那个闭包。回到这个 tab 后，请求仍然没有 token。依赖必须包含会变的登录态，不能因为“函数看起来没变”就省掉。

用 URL Scheme 打开 App 之前，要先看宿主。微信、QQ 浏览器、手机百度这类环境通常不允许这种跳转。允许跳转时，还要区分 iOS 和 Android：应用没安装或打开失败，要落到对应的商店。Android 还要按厂商准备不同的商店地址。

多倍图来自设备像素比。CSS 里的 100×100 逻辑像素，在 DPR 为 1 的屏幕上对应 100×100 物理像素；DPR 为 2 时，同样的逻辑尺寸要 200×200 物理像素才清晰。图片资源按 2 倍、3 倍准备，显示尺寸仍然用 CSS 逻辑像素。