企业官网建设流程全解析

1. 为什么uniapp的样式总让人觉得“不听话”

1.1 一套代码多端渲染，样式命脉在编译层

先说个经历过的人都懂的现象：同样一段CSS，在微信小程序里好好的，换到App端就错位；在H5调试没问题，一跑真机就乱。这不一定是你的代码有问题，而是uniapp的样式最终还是交给各端去解释执行。

uniapp的编译链路决定了样式不能完全按照浏览器CSS的思路来写。小程序端有WXSS的限制，App端如果是vue页面走的是webview渲染，如果是nvue页面走的是原生渲染，两者对CSS的支持程度完全不同。Vue2和Vue3的深度选择器写法也不同。所以很多所谓“样式问题”，本质上是跨端兼容问题。

我自己的经验是：先把“这套代码最终跑在哪些端”想清楚，再决定怎么写样式。如果只做微信小程序，那WXSS的坑要避开；如果要做App+小程序+H5，那所有样式都要经过三端验证，不能只看模拟器。

1.2 选择器与页面结构的实际差异

uniapp页面组件化之后，样式选择器的作用范围比传统网站要敏感得多。问题是很多人习惯用全局选择器或深层选择器去强行覆盖，结果在小程序端不生效。

典型例子是覆盖第三方UI库的组件样式。比如要改uView的dialog弹窗背景、改uni-ui的tabs标签样式，很多人第一反应是打开控制台看一眼class名，然后直接写：

.u-dialog { background: #fff; }

但因为有scoped隔离，这个样式根本不会作用到组件内部。你需要在style标签上去掉scoped，或者用深度选择器。Vue2写/deep/，Vue3写:deep()，小程序端和App端对这两个写法的支持程度还不完全一样。

这个问题的核心是“样式隔离规则”。uniapp默认支持scoped，它的原理是给当前页面的元素加上>.parent :deep(.child-class) { color: red; }

编译后约等于：

.parent[data-v-xxx] .child-class { color: red; }

1.3 先搞清楚：rpx、px、vw、百分比怎么选

样式相关的困惑里，单位选错是高频问题。rpx是uniapp核心单位，设计稿750px宽，1rpx等于屏幕宽度的1/750。做宽度、高度、间距、字号，直接用rpx一般没问题。

但有几个例外要注意：边框阴影这种需要精细控制的属性，1rpx在部分机型上会渲染成0px或模糊，这时候可以用transform: scale()或者直接用px。还有字体大小，强烈建议用rpx或固定px，不要用vw做字体，因为不同屏幕宽度下字号差距太大会影响阅读。

百分比适合用在flex布局的子项尺寸上。App端webview对vh/vw支持还行，但小程序端的WXSS虽然也支持，碰到横屏或键盘弹起时表现不稳定。我的习惯是：整体布局用flex+rpx，需要等比缩放的地方用百分比，真机特殊适配用媒体查询，不要过度依赖某一类单位。

2. 样式方案选型：手写原子类还是直接上UI库

2.1 不要一上来就引UI框架

不少新手项目一启动，先挂个uView或者ColorUI，理由是“方便”。但UI库带来的问题很直接：包体积变大、样式覆盖成本高、升级后类名变化导致样式失效。

如果你只是做一个工具型小程序，页面总共七八个，手写样式完全够用，维护成本反而更低。如果你做的是后台管理、电商、社区这类页面密集的项目，UI库确实能省时间，但前提是你已经理解它的主题定制机制，而不是靠覆盖样式硬怼。

我比较推荐的做法是：核心页面手写样式，重复性高的组件（弹窗、表单、空状态）统一封装成自己的组件。这样既保留了样式控制权，又不至于重复劳动。

2.2 uniapp主流UI库怎么选

• uView：功能全，组件多，文档全中文，适合项目功能复杂、团队水平参差不齐的情况。但包体积偏大，需要按需引入。
• uni-ui：官方维护，和uniapp版本同步快，风格中庸，问题比较少。适合对包体积敏感、样式需求不复杂的项目。
• Wot Design Uni：组件质量高，支持Vue3比较好，近年社区热度不错。
• NutUI：京东出品，偏商城场景，如果你做电商类小程序可以重点考虑。

选库不要只看GitHub star数，要看你项目的主运行端。比如你要跑App端，就要确认组件库是否支持nvue、是否兼容Vue3、是否支持暗黑模式。这些在引入前都要去文档里确认，别等写到一半才发现某个组件在小程序端渲染异常。

2.3 全局样式与公共变量的管理思路

样式文件不要全部堆在App.vue里。我习惯把样式拆成这几类：

• common/reset.scss：重置内外边距、盒模型、字号。
• common/variables.scss：公共颜色、字号、间距变量。
• common/mixin.scss：常见复用样式，比如单行省略、水平垂直居中。
• common/common.scss：通用工具类，比如flex布局类、间距类。

在Vue3版本的uniapp里，scss变量注入可以直接在vite.config.js里配置css.preprocessorOptions.scss.additionalData，避免每个页面手动引入变量文件。

这样做的最大好处是：改主题色时只需要改一个变量文件，而不是全局搜索替换颜色值。

3. 高频样式场景实战拆解

3.1 弹窗/对话框样式：遮罩、动画、穿透

弹窗是样式问题重灾区。uniapp里弹窗实现方式大概有三种：自定义遮罩层+view、使用uni-popup组件、使用uni.showModal。原生showModal样式不可控，UI库的popup组件样式可以覆盖，但覆盖要小心。

自己写弹窗时，一个健壮的弹窗结构包括遮罩层、弹窗主体、关闭按钮、动画层。遮罩层要加position: fixed覆盖全屏，弹窗主体要处理居中逻辑，动画建议用CSS动画而不是JS控制显示隐藏。

<view class="mask" v-if="visible" @click="close"> <view class="dialog" @click.stop> <slot></slot> </view> </view>

.mask { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 999; } .dialog { width: 600rpx; background: #fff; border-radius: 20rpx; padding: 32rpx; }

弹窗出现时最好带一个轻量的淡入缩放动画，不要干巴巴地直接显示。动画用@keyframes定义：

.dialog { animation: dialog-in 0.25s ease-out; } @keyframes dialog-in { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }

注意：position: fixed在uniapp小程序端有时候会被父级transform影响，导致弹窗定位异常。如果发现弹窗偏移，检查父容器是否有transform，有的话考虑用uni-popup或者把弹窗放到页面根节点下。

3.2 tabs标签页样式：Vue3写法差异

Tabs标签页样式也是个高频搜索词，特别是Vue2转Vue3之后，很多人的tabs样式改不动。

Vue2版本里，修改uView的tabs或uni-ui的tabs，常这么写：

/deep/ .u-tabs__wrapper { background: #fff; }

Vue3版本中，/deep/编译报错或无效，要改成:deep()：

:deep(.u-tabs__wrapper) { background: #fff; }

如果你用的是原生view自己写tabs，样式控制就简单很多。常见的需求是下划线跟随滑动，实现方式是用一个绝对定位的下划线元素，通过transform: translateX移动位置：

.tabs-track { position: absolute; bottom: 0; left: 0; width: 120rpx; height: 6rpx; border-radius: 6rpx; background: #2979ff; transition: transform 0.3s; }

然后动态计算下划线的位移量，比如有4个tab，每个tab宽度是750rpx/4，当前索引是index，则translateX(index * tabWidth)。

3.3 小手样式与cursor：真机和小程序要区别对待

“小手样式”是热搜词，对应的CSS就是cursor: pointer。

在H5端，cursor: pointer能让鼠标悬停时显示手型。但在微信小程序端，cursor属性不支持，也没有办法强制让view显示手型。这个在开发时经常有人问，我直接说结论：小程序端view不需要手型，因为移动端本身没有鼠标指针。如果只是为了在PC端预览小程序时体验更好，给相应的view加hover-class才是小程序推荐的反馈方式。

如果你要在H5的某些按钮上加手型，写法就是：

.btn { cursor: pointer; }

但要注意，uniapp编译到小程序端时，cursor不会报错，只是会被忽略，所以可以放心写。

3.4 底部tabbar角标与监听点击

很多项目用自定义tabbar，因为官方tabbar的角标能力有限。自定义tabbar的样式和事件监听都有固定套路。

角标可以通过uni.setTabBarBadge实现，但如果你的tabbar是自定义的view组件，直接在角标元素上控制显隐即可：

<view class="tab-item" @click="switchTab(0)"> <text class="tab-icon">首页</text> <view class="badge" v-if="homeBadgeCount > 0">{{ homeBadgeCount }}</view> </view>

.badge { position: absolute; top: -8rpx; right: -16rpx; min-width: 32rpx; height: 32rpx; line-height: 32rpx; border-radius: 16rpx; background: #fa3534; color: #fff; font-size: 20rpx; text-align: center; padding: 0 8rpx; box-sizing: border-box; }

监听tabbar点击在自定义tabbar里就是普通的@click事件。如果是官方tabbar，页面内用onTabItemTap生命周期监听从tabbar进入当前页的事件。注意它和onShow的区别：onTabItemTap严格说只在点击tabbar触发时上报，而onShow在每次页面显示时都触发。

3.5 popup打开时底部滚动穿透

底部弹层打开时，页面背景还能滚动，这是弹窗类页面的经典bug。uniapp里解决方式有几个层次：

最简单的是在弹窗打开时给page加overflow: hidden：

.page-no-scroll { overflow: hidden; height: 100vh; }

但小程序端这个写法有时不生效，因为page的高度是滚动容器控制的。更可靠的方式是给弹窗加catchtouchmove阻止触摸滚动穿透：

<view class="mask" catchtouchmove="true" @click="close"> <view class="popup" catchtouchmove="true"> </view> </view>

同时也要注意，弹窗内容本身需要滚动时，要让滚动区域成为真正的scroll-view，不要依赖页面滚动。

3.6 通配选择器 * 的优缺点

有一个热搜词是“CSS样式表中使用*的优缺点”，这个在uniapp开发里更要慎重。很多人上来就在全局样式里写：

* { margin: 0; padding: 0; box-sizing: border-box; }

在H5端这个没问题，但在小程序端*选择器有性能损耗，而且会影响组件库的内部样式，导致某些组件间距错乱。uniapp的全局样式真正建议打的reset是：

page, view, text, image { margin: 0; padding: 0; box-sizing: border-box; }

不要无差别把所有标签都重置。尤其是如果你引入了UI库，它的组件样式大部分是作用在特定类名上的，但*会影响所有内置标签，容易出现“引入组件库之后某个组件突然多了一圈内边距”这类问题。

4. Vue2转Vue3对样式的实际影响

4.1 scoped样式与深度选择器写法变化

Vue2转Vue3，样式这块最直观的差异就是深度选择器。/deep/和>>>在Vue3里已经废弃，改用:deep()。

在你升级项目的时候，不要只改关键字。Vue3的scoped实现机制和Vue2基本一致，还是通过>// Vue2 .parent /deep/ .child { color: red; } // Vue3 .parent :deep(.child) { color: red; }

如果你是uniapp框架，还要注意小程序端的兼容。在某些小程序平台，:deep()编译后的选择器需要配合::v-deep的兼容写法，但一般Vue3版本的uniapp已经处理好，不需要手动处理。

4.2 全局样式和动态样式差异

Vue3组合式API中，动态样式的写法有变化：

<view :style="{ color: active ? '#2979ff' : '#666' }">示例</view>

<view :class="[active ? 'active' : 'normal', 'base-class']">示例</view>

看起来区别不大，但Vue3中对:class数组的响应式追踪更严格。如果你在reactive对象中动态修改类名，需要注意新值是否能触发视图更新。另外Vue3移除了$scopedSlots和过滤器的同时，也调整了v-model的绑定方式，样式相关的props传递也要检查。

4.3 manifest配置与样式兼容

manifest.json配置对样式的影响往往被忽略。比如你配置了"renderer"为"native"，页面就是nvue渲染，这时候很多CSS样式不支持，包括部分flex布局写法、百分比高度、某些选择器。配置为"webview"时CSS兼容性更好，但页面性能不如nvue。

如果项目要从Vue2升级Vue3，建议先把manifest里的"vueVersion"从"2"改成"3"，然后重点检查全局样式文件和App.vue的样式。Vue3版本的uniapp对样式的编译规则有一些调整，升级后跑一遍全部页面，重点看弹窗、tabbar这种高频组件。

5. 常见问题与排查技巧实录

5.1 打包后样式失效，怎么快速定位

这是最气人的问题：开发环境样式正常，打包后乱了。我的排查顺序是：

第一，确认是不是样式文件被tree-shaking了。uniapp打包时，如果某个样式文件只是在main.js里import，但没有在代码里被引用，有可能被优化掉。解决方式是新建一个公共scss文件，在App.vue的<style>里@import引入。

第二，确认是不是类名冲突。生产环境下CSS类名会压缩，如果多个文件里的类名重复，可能互相覆盖。用BEM命名规范或者在类名前加模块前缀能减少这个问题。

第三，确认是不是不同端的样式兼容问题。App端webview渲染和微信小程序的CSS支持范围不同，打包到不同端之前，先跑一遍对应端的模拟器。

5.2 打包App后麦克风权限等系统权限问题

热搜里有“小米手机打包app之后为啥没有麦克风权限”，这个问题和样式没有直接关系，但会间接影响页面布局。uniapp打包AndroidApp时，权限需要在manifest.json的“App权限配置”里手动勾选。如果你没勾选麦克风权限，App运行在小米手机上，系统不会弹出麦克风授权弹窗，录音功能直接不可用。

開發时很多人在plus.android.requestPermissions里申请权限，但如果manifest没声明，系统层面根本不会允许。处理方式是打开manifest.json，在App模块配置里勾选“录音”等需要的权限模块。这个配置会最终写入AndroidManifest.xml。注意Android 6.0以上还需要动态申请权限，这两个步骤缺一不可。

权限弹窗出现和消失的实时监听是另一个热搜点。uniapp中可以通过plus.android监听权限申请结果，但没有一个通用的、跨平台的“权限弹窗出现/消失”的实时回调。你只能通过用户操作后的结果回调来做“同步提示”，或者定期检测权限状态。不建议做复杂的实时监听，很多国产ROM会拦截或延迟通知，容易出bug。

5.3 小程序与App样式差异排查

同一个组件，小程序端和App端显示不一致，先别急着改样式。优先检查三点：

• 是否用了小程序不支持的CSS属性，比如部分position: sticky在低版本小程序有问题。
• 是否依赖了浏览器全局对象，比如window.innerWidth，小程序端没有。
• 是否用了view、text之外的标签，比如p、span，有些端渲染异常。

小程序端样式隔离更严格，App端webview相对宽松。要保证两边一致，尽量使用uniapp内置组件和它在文档中明确支持的样式属性。

5.4 样式优先级与继承问题速查

经常有人问“为什么我写的样式不生效”，90%是优先级或权重问题。

内联样式（style属性）优先级最高。然后是ID选择器、类选择器、标签选择器。uniapp里更容易忽略的是：页面的page选择器相当于根容器，微信小程序的page样式优先级低于组件的根节点样式。在组件里给根view设置样式，有时会覆盖页面在page上设置的背景色。这是因为组件的根节点样式权重更高。

排查时可以打开微信开发者工具的控制台，查看最终计算样式，看自己被覆盖的样式到底被哪一条规则覆盖了，不要瞎猜。

6. 一批可以直接抄的样式片段

6.1 弹窗居中自适应宽度的通用写法

弹窗内容不固定时，宽度不要写死，用max-width加min-width控制范围：

.dialog { min-width: 500rpx; max-width: 650rpx; width: auto; background: #ffffff; border-radius: 24rpx; padding: 40rpx 32rpx; box-sizing: border-box; box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.08); }

6.2 文本溢出省略号两种常用写法

单行省略：

.ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

多行省略：

.ellipsis-2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

多行省略在小程序端兼容性还行，但-webkit-box-orient有时会被打包工具去掉，如果出现不生效，检查打包后的代码里是否保留了-webkit-box-orient，没保留就手动加一行注释形式的声明：

/*! autoprefixer: off */ -webkit-box-orient: vertical; /*! autoprefixer: on */

6.3 常用flex布局工具类

.flex { display: flex; } .flex-col { display: flex; flex-direction: column; } .flex-center { display: flex; align-items: center; justify-content: center; } .flex-between { display: flex; align-items: center; justify-content: space-between; } .flex-1 { flex: 1; }

6.4 自定义tabbar角标与红点

需要“数字角标”和“纯红点”两种状态时，可以给角标组件加一个dot属性区分：

<view class="tab-badge" v-if="badge === 'dot'"></view> <view class="tab-badge" v-else-if="badge > 0">{{ badge > 99 ? '99+' : badge }}</view>

.tab-badge { position: absolute; top: -4rpx; right: -10rpx; min-width: 32rpx; height: 32rpx; padding: 0 8rpx; border-radius: 16rpx; background: #f2270c; color: #ffffff; font-size: 20rpx; line-height: 32rpx; text-align: center; }

判断逻辑在JS里做好，不要在样式里做复杂判断。

7. 再说点样式之外的心里话

写uniapp样式这几年，我的感觉是：很多人把时间浪费在“硬刚框架”上。组件样式不生效就强行覆盖，页面布局错位就到处加!important。但真正的问题大概率出在结构上，而不是样式本身。

我个人建议，写页面时先把DOM结构想清楚，再动手写样式。uniapp的布局异常，七八成是flex嵌套太深导致的计算逻辑混乱，或是不清楚每个端对尺寸单位的处理方式。编译环境的差异没有办法完全消除，能做的就是让代码结构足够简单，减少出错面。

此外，样式代码也需要“可维护性”意识。多看几遍自己一个月前写的样式文件，如果已经看不懂当时为什么这么写，说明注释和组织方式需要改进。好的样式代码是看了就能快速改，而不是改一行崩三处。

如果你正在被某个uniapp样式问题卡住，先按这个顺序自查：先确认运行端、再确认单位、再确认选择器、再确认scoped和深度写法，最后去看真机表现。大多数问题都能在这个流程里找到答案。