【uniapp和普通web 端开发的区别】

uniapp和普通web 端开发的区别

uni-app 本质上还是 Vue 语法，但它面向的是小程序 / App / H5 多端环境，而日常 Web 开发面向的是浏览器 DOM 环境。所以写法看起来像，但运行环境、组件、API、工程结构都不一样

简单记：日常 Web 是**"浏览器 + DOM + vue-router**"；uni-app 是"Vue 语法 + 小程序/原生 API + pages.json + 条件编译"

平板、折叠屏、横屏场景做另外处理

开发习惯上最容易踩坑的点

不能直接用 DOM 操作

非 H5 端没有 document、window、localStorage，不能像 Web 那样直接操作 DOM。

标签要换成跨端组件

div → view，span → text，img → image，a → navigator。

API 要换成 uni 系列

网络请求用 uni.request，提示用 uni.showToast，跳转用 uni.navigateTo。

路由不是 vue-router

页面需要在 pages.json 中注册，跳转用 uni.navigateTo、uni.redirectTo、uni.switchTab。

CSS 有差异

body 要写成 page；* 选择器在非 H5 端不支持；推荐使用 rpx 做屏幕适配。

需要条件编译处理端差异

比如某段代码只在微信小程序生效，可以写：

javascript 复制代码

// #ifdef MP-WEIXIN
console.log('只在微信小程序执行')
// #endif

rpx 是怎么实现跨端适配的

rpx 的核心思想很简单：把屏幕宽度统一规定为 750rpx，然后按当前设备宽度等比换算成 px。

公式：

1rpx = 设备视口宽度 / 750

px = rpx * (设备视口宽度 / 750)

rpx = px * 750 / 设备视口宽度

uni-app 也提供了内置方法：

javascript 复制代码

// rpx 转 px
uni.upx2px(100)

// 手动换算
const px = rpx * uni.getSystemInfoSync().screenWidth / 750

哪些场景适合用 rpx，哪些不适合

适合用 rpx：

容器宽度、间距、卡片尺寸

需要随屏幕宽度等比缩放的布局元素

不适合用 rpx：

1px 边框：用 px，否则大屏上会变粗

图标、头像、Logo 等不应拉伸的元素：用 px

字体大小：可以用 rpx，但大屏上可能偏大，建议配合 max-width、min-width 或条件编译限制

平板、折叠屏、横屏场景：纯 rpx 可能放大过度，需要额外处理

一句话记：rpx 就是把屏幕宽度切成 750 份，让元素按宽度等比缩放；需要固定尺寸的地方用 px，需要随屏宽变化的地方用 rpx。