说实话整理这份 H5、CSS 的八股文是我面了好几轮前端之后才痛下决心做的事。以前总觉得背面试题没意思但真到写项目的时候才发现很多问题不是 会不会写 的问题而是 知不知道为什么要这么写 的问题。比如 flex 布局的 flex:1 到底是怎么算出来的CSS 选择器优先级为什么不是简单的类大于标签还有 H5 页面在微信里跟小程序、App 之间到底是怎么通信的。这些问题不搞透写出来的页面要么是看着能跑但一改就崩要么是换了个环境就各种兼容性报错。这份笔记我把布局、选择器、视觉效果、微信生态、多端适配这几个高频方向都过了一遍。不管你是准备面试还是正在做 H5 项目被某个兼容性问题卡住应该都能在里面找到能直接抄作业的答案。1. 布局基石Flex 与 Grid怎么答才显得不背题布局这块是 H5、CSS 面试里的重头戏十个问题里至少有五个跟 flex 有关。很多人会把属性背得滚瓜烂熟但一被追问flex:1 到底什么意思就卡壳。这其实暴露了一个问题只记住了答案没理解设计思路。1.1 Flex 面试必备容器与项目的八股清单先过一遍最基础的开启 flex 布局后容器上有六个常用属性项目上有六个常用属性。这些是死知识必须记住但更重要的是理解它们之间的协作关系。容器属性里flex-direction 决定主轴方向row 和 column 是最常用的两种。flex-wrap 控制换行默认 nowrap 会导致项目被压缩。justify-content 管主轴对齐align-items 管交叉轴对齐align-content 管多行之间的分配。项目属性里flex-grow 是放大比例flex-shrink 是缩小比例flex-basis 是项目在主轴上的初始尺寸。面试里最经典的追问是flex:1 是什么 很多人会答等分剩余空间这个答案只对了一半。准确地说flex:1 是 flex-grow:1、flex-shrink:1、flex-basis:0% 的简写。注意那个 flex-basis:0%它意味着项目的初始尺寸被设为 0所以剩余空间会被完整地分配给这个项目。如果写成 flex-grow:1 但 flex-basis 默认是 auto那初始尺寸就是内容宽度分配效果会跟 flex:1 有明显差异。还有一个很容易踩的坑flex-basis 和 width 同时设置时flex-basis 优先。这个特性在很多兼容性 bug 里出现过。比如移动端列表项你明明设了 width:100px但父容器是 flex 布局且项目有 flex-basis最后宽度就不是 100px 了。排查的时候第一反应应该看是不是 flex-basis 覆盖了 width。实际项目里我比较推荐用原子化的思路去封装 flex 工具类比如.flex { display:flex }、.flex-1 { flex:1 }、.items-center { align-items:center }。这不是让你去用某个特定的原子化 CSS 框架而是说把最常用、最稳定的 flex 组合提炼成类名业务代码里就不用每处都写一长串。搜索热词里出现原子性css说明大家在实践中已经意识到这个问题了类名重复不可怕可怕的是同一个布局语义在十个地方写了十种不同的写法。1.2 Grid 布局二维场景的利器别只会用 flexGrid 在面试里出现频率不如 flex但一旦问到基本就是拉开差距的题。flex 解决的是一维布局也就是一条轴上的排列grid 解决的是二维布局行和列可以同时控制。最常用的声明是display:grid然后通过 grid-template-columns 和 grid-template-rows 定义轨道。grid-template-columns: repeat(3, 1fr)是三等分布局的标准写法1fr 是 fr 单位代表剩余空间的一份。很多人会问 fr 跟百分比有什么区别区别在于 fr 是剩余空间的分配而百分比是容器总尺寸的比例。当容器有 gap 或者固定尺寸轨道时fr 会自动消化这些差异而百分比经常导致溢出。Grid 还有一个很实用的特性是 grid-template-areas它允许你用命名的形式描述布局区域。举个例子.container { display: grid; grid-template-areas: header header header sidebar content content footer footer footer; grid-template-columns: 1fr 3fr; grid-template-rows: auto 1fr auto; } .header { grid-area: header; } .sidebar { grid-area: sidebar; } .content { grid-area: content; } .footer { grid-area: footer; }这种写法在页面骨架搭建时特别直观改布局只需要调整 ASCII 字符画不用动 HTML 结构。但要注意 grid-template-areas 的每个单元格都要有名字空位要用.占位否则整个声明无效。关于 flex 和 grid 的选择我的经验是一维导航、按钮组、列表项用 flex二维卡片墙、页面骨架、复杂表单区域用 grid。如果你在面试时能说出flex 是从内容出发grid 是从布局出发这种视角会比单纯背属性高一个档次。1.3 高频小问题gap、居中、底部固定与文本位置搜索热词里有很多看起来简单但实际容易翻车的小问题比如css gap、css div适中在底部、怎么调整css容器里的文本位置。这些恰恰是日常开发里出现频率最高的。gap 属性是 CSS 布局里一个晚到但好用的特性它同时适用于 flex、grid 和多列布局。在 grid 时代我们用的是 grid-gap后来统一改成了 gapgrid-gap 属于旧写法。gap 可以分别设置 row-gap 和 column-gap比如gap: 12px 8px表示行间距 12px、列间距 8px。flex 布局里用 gap 做间距可以避免手动给子元素加 margin 或使用相邻兄弟选择器代码会干净很多。div 固定在底部是个经典需求不同场景有不同解法。如果 div 在内容后面用正常文档流加 margin-top:auto 配合 flex 容器即可如果 div 需要始终固定在视口底部用 position:fixed 加 bottom:0 是最直接的如果底部栏压住了内容就需要给 body 加 padding-bottom 来留出安全高度。面试时如果被问到答完这三种情况还能说明各自适用场景基本就过关了。调整容器里的文本位置本质上是对 line-height、text-align、vertical-align、padding 的理解。单行文本垂直居中用 line-height 等于容器高度多行文本垂直居中用 flex 加 align-items:center这是最常见的两种方案。文本水平位置由 text-align 控制但要注意 text-align 作用于块级容器内的行内容对行内元素本身没有效果。vertical-align 则是调整行内元素在行框内的垂直对齐方式常用于图标和文字的对齐。这几个属性区分清楚文本位置的问题就解决了一大半。另外搜索热词里那个css 加边框盒子不变形这是 box-sizing 的经典问题。默认的 content-box 下元素宽度不含 padding 和 border加上 border 后盒子会变大。改成box-sizing: border-box后width 是最终占位宽度padding 和 border 在内部消化。现在主流做法是全局设置* { box-sizing: border-box; }这个设置几乎是所有现代 CSS 重置方案的标配。2. 选择器、伪元素与变量最刁钻的八股角落选择器优先级在 CSS 八股文里地位很高但很多人理解是错的。记得有一次面试官让我写几个选择器并排优先级我写了 类选择器大于元素选择器就被追问那类选择器和伪类谁大。这种题不把权重计算规则吃透很容易露馅。2.1 选择器优先级别再说类大于标签CSS 优先级本质上是一个四位数的比较规则行内样式 ID 选择器 类选择器、属性选择器、伪类 元素选择器、伪元素。!important 可以改变排序但它是特异性外挂一般不建议用。有个面试官教我的记忆方式把优先级当成一个数字内联样式是最高位ID 是第二位类、属性、伪类是第三位元素、伪元素是第四位。比如div.container .item:hover这个选择器的优先级就是 0,2,1。两个选择器比较时从左到右逐位比较数字大的胜出。为什么:hover、:not、:nth-child这些伪类都比元素选择器权重高因为它们在第三位而元素选择器在第四位。但:not本身不计入权重它里面的选择器才计入。比如div:not(.active)的优先级是类选择器权重加元素选择器权重而不是伪类权重。实际开发中我建议尽量把选择器层级控制在两层以内比如.card .title就足够。层级越深优先级越复杂代码越难覆盖。遇到要覆盖第三方组件样式的情况优先通过添加自定义类名来提高权重而不是无脑加 !important。项目里如果用了原子化 CSS优先级管理更要注意因为原子类大多是单类选择器权重相同的情况下后定义的类会覆盖先定义的类这和样式表中写死一条规则是两回事。2.2 伪元素与 CSS 变量配合起来能玩出花::before和::after这两个伪元素面试必考。它们有两个硬性要求必须设置 content 属性哪怕值是空字符串默认是行内元素要设置宽高得先转成 block 或 inline-block。伪元素的经典用法包括清除浮动、绘制装饰线条、实现气泡小箭头以及给不存在的元素补充结构。搜索热词里有一条css 控制伪元素变量这其实是在问 CSS 变量在伪元素中的使用方式。CSS 变量是继承的父元素定义的变量子元素和伪元素都能读取。在伪元素里使用变量的常见姿势是.btn { --icon-color: #ff6600; } .btn::after { color: var(--icon-color); } .btn:hover { --icon-color: #00ff88; }这种写法比在伪元素里重写一遍颜色值清晰得多。如果你想在 JS 里动态控制伪元素样式不能用 element.style 直接操作 ::after但可以操作 CSS 变量element.style.setProperty(--icon-color, #ff6600)然后伪元素里用 var() 读取。这算是动态控制伪元素最优雅的方案。css hover延迟关闭也是热词里一个很实用的技巧。很多下拉菜单在鼠标移出后立刻消失体验很差。要让它延迟消失最基础的做法是使用 transition 加 transition-delay.dropdown-content { opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0s linear 0.2s; } .nav-item:hover .dropdown-content { opacity: 1; visibility: visible; transition-delay: 0s; }这个方案的好处是显示时无延迟消失时延迟 0.2 秒给用户一个容错窗口。另一种方案是用 animation 的延迟配合 forwards 填充模式但那样控制逻辑更绕我更喜欢 transition-delay。如果下拉菜单有二级导航最好在菜单项和目标菜单之间留出一条没有 gap 的桥把鼠标移出到进入菜单的路径连起来体验会顺滑很多。还要提一下 Vue 里的深度选择器问题搜索热词里的css deep方法说的就是这个。在 scoped 样式中父组件的样式默认不会作用到子组件内部这时需要深度选择器来穿透。不同时期、不同工具链有不同写法/deep/、::v-deep、、:deep()。Vue 3 推荐用:deep(.child-class)Vue 2 里常用::v-deep或/deep/。这一点在面试中经常作为是否真的写过规模化项目的考察点。2.3 Mask、背景图与裁剪合成CSS mask 在热词里出现说明大家开始关注图片处理之外的视觉效果了。mask 的用法很简单但概念比较抽象它是一个遮罩元素内容在遮罩的透明区域会被隐藏在遮罩的不透明区域会被显示。常见用法是用渐变做图片淡出效果.fade-image { mask-image: linear-gradient(to bottom, black 60%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%); }这样图片底部会平滑地消失在背景里性能比用 rgba 渐变盖在图片上好很多。注意 mask 需要 -webkit- 前缀来兼容 Safari 和旧版 Chrome。背景图相关的面试题也常考 background-size 的 cover 和 contain 区别。cover 是把背景图缩放到完全覆盖容器可能被裁剪contain 是完整显示背景图可能留白。这在响应式 banner、头像裁剪场景里非常关键。background 简写顺序容易记混我的记忆方式是background: color image position / size repeat attachment origin clip其中 position 和 size 要写成position / size比如background: url(img.png) center / cover no-repeat。这个斜杠很多人会漏掉漏掉之后 size 就不生效。背景图定位还有一种常见需求图标和文字的垂直居中对齐。用background-position: right center或者background-position: 100% 50%可以让背景图在容器内垂直居中。这比用绝对定位去摆放背景图简洁很多。3. 文字与视觉渐变、竖排、省略号与炫光效果文字处理是 H5 页面里的高频需求也是面试里很容易被考察细节的环节。从字体渐变到文字竖排从单行省略到金光闪闪的装饰效果每个点背后都有对应的 CSS 机制。3.1 字体渐变background-clip 的经典组合css 字体渐变和css 字体这些热词出现的背后是 H5 视觉设计里越来越常见的渐变文字需求。实现文字渐变核心是 background-clip: text 配合 color: transparent。.gradient-text { background: linear-gradient(135deg, #ff6a00, #ffb700); -webkit-background-clip: text; background-clip: text; color: transparent; }原理其实不复杂background 绘制到文字的形状上然后把文字本身变成透明背景渐变就从文字里透出来。注意 background-clip: text 需要 -webkit- 前缀来兼容部分浏览器而且设置 color: transparent 时如果 background 加载失败或者不支持 background-clip文字会直接消失。稳妥的做法是加一个 supports 判断supports (background-clip: text) or (-webkit-background-clip: text) { .gradient-text { background: linear-gradient(...); -webkit-background-clip: text; color: transparent; } }这样不支持的浏览器会回退到正常文字颜色而不是变成透明文字。这属于经验问题面试里如果答出来会显得你不是只会写 demo。3.2 文字竖排、单行省略和盒子变形css文字竖着排列是个不太起眼但问的人不少的问题。实现竖排最标准的是 writing-mode 属性.vertical-text { writing-mode: vertical-rl; }vertical-rl 表示文字从上到下排列、从右往左换行符合中文传统排版的习惯。如果想控制单字间距配合 letter-spacing 调整就行。这个属性还可以用在 table 的表头文字、侧边栏标签等场景。css 单行显示超出点点点考察的是文本溢出处理。单行省略是三件套.ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }三行缺一不可overflow:hidden 让超出的内容隐藏white-space:nowrap 阻止换行text-overflow:ellipsis 显示省略号。如果要两行或三行省略用 -webkit-line-clamp.multi-ellipsis { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }这个写法要注意 display:-webkit-box 会和 flex 的 display 冲突如果元素本身是 flex 容器得在外面套一层。css 加边框盒子不变形在 3.2 里提过了本质是 box-sizing:border-box。实际项目里边框、内边距导致的宽度溢出是最常见的布局 bug 来源。给所有元素统一设置 border-box 后布局计算会直观很多这也是 Bootstrap、Tailwind 等框架都在做的基础重置。3.3 动画效果涟漪、波浪、rotate3d 与金光闪闪搜索热词里大量视觉动画相关的词比如css涟漪光圈扩散、css波浪效果、css rotate3d、css如何做出来金光闪闪的效果、css动画效果网站。这些看起来是炫技但背后其实都是 CSS 动画的经典组合。涟漪光圈扩散的核心是 box-shadow 和 transform 的 scale。一个常见的实现是用 ::after 伪元素画一个圆然后让它的 box-shadow 向外扩散并逐渐变透明同时 scale 变大.ripple { position: relative; width: 80px; height: 80px; border-radius: 50%; background: rgba(255, 102, 0, 0.6); } .ripple::after { content: ; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255, 102, 0, 0.6); animation: ripple 1.5s ease-out infinite; } keyframes ripple { from { transform: scale(1); opacity: 1; } to { transform: scale(2.5); opacity: 0; } }关于波浪效果常见两种实现一种是用 CSS border-radius 做不规则圆角变形动画但效果有限另一种是用 SVG 波浪路径配合 CSS 平移实现前后两层波浪交错运动。SVG 那块儿稍微复杂适合做 H5 页面顶部的动态分隔线。如果只要简单的波纹也可以用 border-radius: 50% 加多个 radial-gradient 背景来模拟。rotate3d 是 CSS 3D 变换里常被考到的点。transform: rotate3d(x, y, z, angle)四个参数分别代表绕 X、Y、Z 轴旋转的矢量分量和角度。最常见的写法是rotate3d(1, 1, 0, 45deg)表示同时绕 X 轴和 Y 轴各旋转 45 度。要看到 3D 效果必须给父容器设置 perspective否则只是平面上的斜切。金光闪闪效果是 H5 活动页里的高频需求做法通常是光带扫过。思路是用一个线性渐变色块加上 background-position 的动画让高亮区域从左到右扫过文字或卡片。配合 background-clip:text 可以做出文字扫光。如果是纯色块也可以用 ::after 做一条倾斜的半透明白条用 translateX 动画扫过。这个效果不高级但很实用能明显提升页面的质感。如果你需要动画灵感可以看看一些 CSS 动画展示站比如 Animate.css、Hover.css、动漫风格的 codepen 精选。但注意别直接往生产项目里塞整库动画最好按需提取关键帧否则包体积和渲染性能都扛不住。4. H5 与微信生态真正的实战题都在这H5 开发里微信生态绝对是绕不开的一环。从公众号内嵌页、微信支付、分享卡片到开放标签调用小程序每一个需求背后都有一堆文档和坑。这块内容在面试里也越来越常被问到因为它是 H5 开发者实战能力的分水岭。4.1 公众号 H5 与微信开放标签搜索热词里有不少微信公众号h5怎么打开小程序、微信公众号h5 点击按钮调取打开小程序页面 如何实现、h5微信浏览器内跳转app这些都属于微信开放标签的范畴。先说场景一个公众号的 H5 页面里想通过一个按钮跳转到某个关联的小程序。官方方案是使用 wx-open-launch-weapp 开放标签它允许在微信内置浏览器中打开同一公众号关联的小程序。使用前提是公众号和小程序必须已关联且域名已经配置到 JS 安全域名页面引入了微信 JS-SDK 并通过 wx.config 注入了权限。标签写起来像自定义元素wx-open-launch-weapp idlaunchBtn usernamegh_xxxx pathpages/index/index script typetext/wxtag-template style.btn { padding: 12px 24px; background: #07c160; color: #fff; border-radius: 6px; }/style div classbtn打开小程序/div /script /wx-open-launch-weapp注意里面必须用 script 标签包一个 wxtag-template 模板不能直接写按钮元素。而且 wx-open-launch-weapp 是微信内置浏览器特有的在普通浏览器里不会渲染成按钮所以要给容器写一个降级样式。调试的时候如果点击没反应优先检查 wx.config 的签名是否成功、用户名 username 是否为小程序的原始 IDgh_ 开头的以及公众号和小程序是否在同一个开放平台账号下。如果要跳转的是 App用的是 wx-open-launch-app 或者 URL Scheme。URL Scheme 的方式更灵活但分享到微信以外的场景大概率会被拦截。开放标签在普通浏览器里没有效果所以一般会写降级逻辑检测微信环境才显示“在微信中打开”的引导提示。通过微信公众号访问h5页面这个搜索词背后其实是两个层面一是公众号菜单/图文可以直接配置 H5 链接二是 H5 页面通过 OAuth2 获取微信用户身份。很多开发者混淆了微信 H5 和微信小程序之间的登录方式实际上 H5 网页走的是公众号网页授权需要 appid、redirect_uri、scopesnsapi_base 或 snsapi_userinfo拿到的 code 换 openid再换用户信息。这个流程在面试里如果被深入问可以从静默授权 vs 用户授权的区别来答。4.2 分享、支付与文件下载的边界h5分享卡片到开发文档、企微h5分享这两个热词指向的都是微信分享能力。公众号 H5 页面可以调用微信 JS-SDK 的 updateAppMessageShareData 和 updateTimelineShareData 来定制分享到好友和朋友圈的卡片标题、描述、图片和链接。注意现在分享卡片的配置需要用户主动触发一次点击后才会生效不能一进页面就静默设置。这个需要用户点击一次的机制让很多开发踩过坑因为老的接口 wx.onMenuShareTimeline 在旧版本里是允许直接设置的新版本改成了需要用户点击后才生效面试时说出这个差异会加分。企微h5文件下载是企业微信环境下常见的需求但企业微信对普通文件下载限制比较严格。常规做法是通过企业微信 JS-SDK 的 wx.agentConfig 注入后调用相应下载接口或者在后端生成链接后引导用户在企业微信浏览器里打开。直接 window.open 或者 a 标签 download 在企微里经常失效这是环境限制不是代码问题。知道这一点遇到企微里下载不了文件的报障就能快速定位而不是白查代码。h5微信浏览器内跳转app在 4.1 提过用 wx-open-launch-app 或 URL Scheme。这里要提醒一句微信对 URL Scheme 的拦截策略是动态变化的可能在版本更新后突然失效所以生产环境一定要做好「无法打开则引导用户复制链接到浏览器」的降级方案。热词里还出现了京东h5支付、鸿蒙微信无法h5支付这些本质上是 H5 支付在不同客户端的兼容性问题。京东 H5 支付是指京东商城在手机网页端拉起收银台的方案鸿蒙版微信无法使用 H5 支付可能是鸿蒙客户端对微信支付组件支持不完整这种问题在前端无解只能提示用户用其他客户端或走 App 支付。遇到这类问题第一反应应该是排查环境而不是改代码因为很多时候根本不是代码问题。4.3 昵称、定位与能否调用小程序经纬度h5页面获取微信昵称这个问题我要先说一个更新微信官方在 2022 年之后已经将 wx.getUserProfile 废弃新规下 H5 里获取用户头像和昵称应该使用头像昵称填写能力也就是 button 的 open-typechooseAvatar 配合 input 的 typenickname。这个变化对开发者影响很大很多老项目还在用 getUserProfile 获取用户信息现在基本都被限制或改为返回匿名信息。如果是通过公众号网页授权OAuth 里可以拿到用户的昵称和头像但前提是 scope 为 snsapi_userinfo 且用户主动授权。h5能调用微信小程序当前经纬度不是个非常典型的实战问题。直接答案是不能。H5 页面无法直接调用小程序的 wx.getLocation 获取经纬度。但小程序可以通过 web-view 承载 H5在合适的时机通过 postMessage 把小程序里的经纬度传给 H5。流程是小程序里用 wx.getLocation 拿到经纬度通过 web-view 的 bindmessage 事件把数据传给 H5H5 用 window.addEventListener(message) 接收。需要注意的是 postMessage 消息只能在特定时机触发比如小程序分享、组件销毁或特定按钮点击时才会传递给 H5不是实时通道。所以如果业务要求实时位置建议 H5 自己用浏览器 Geolocation或者接入地图 SDK 的定位能力。说到定位uniapp h5使用腾讯地图获取定位报错:getlocation:fail translate coordinate system这个热词也很典型。腾讯地图定位返回的坐标系是 GCJ-02国测局坐标但某些环境下 SDK 要求的是 WGS-84 或者反过来才报 translate coordinate system 错误。解决办法是明确坐标系的转换// 在 uni-app 中选择坐标系参数 uni.getLocation({ type: gcj02, success: (res) { // 坐标已经是 GCJ-02直接传给腾讯地图 } });如果项目同时接了微信 JS-SDK 的 getLocation要注意微信返回的坐标系默认是 gcj02直接传给浏览器 Geolocation 的 API 会导致偏移反之亦然。这就是坐标系转换问题在多端项目里的典型表现。5. 多端适配与 Uniapp 实战网上搜不到答案的坑最后这部分写给那些已经在写 H5、但经常被多端问题折磨的人。搜索热词里大量 uniapp 相关的词说明很多人正在用 uniapp 同时做 App、小程序和 H5。多端适配的第一步就是搞清楚当前代码跑在什么环境里。5.1 环境判断App、小程序还是嵌套 H5uniappvue3h5 里面怎么判断别人嵌套你的h5是app还是小程序这个问题核心是判断宿主环境。在 H5 世界里UA 是判断环境的钥匙。小程序 web-view 的 UA 通常带有miniProgram 或 MicroMessenger 特征App 内嵌的 webview UA 可能带有 App 品牌信息。比如微信内置浏览器 UA 里一定会有 MicroMessenger企业微信会有 wxwork。uniapp 自身也提供了一套环境判断 API// #ifdef H5 // 只有 H5 平台会编译到这一段 // #endif这种条件编译是在编译期生效的它解决的是同一个工程编译到不同平台时执行不同代码的问题。如果要判断运行时环境可以用uni.getSystemInfoSync().uniPlatform或者uni.getSystemInfoSync().hostName。判断嵌套 H5 是 App 还是小程序更准确的方式是让宿主向 H5 注入标识。比如原生 App 的 webview 通过 JSBridge 注入了一个全局变量小程序 web-view 可以通过 URL query 传参或者使用 postMessage。如果你发现 UA 里没有可靠标识最稳的做法是约定一个全局变量或者 URL 参数由宿主容器在加载时写入。这个约定在项目初期就要定义好否则后面很难补。uniapp微信小程序跳转h5在小程序端是用 web-view 组件承载 H5 页面web-view srchttps://example.com/page/web-viewweb-view 的 src 域名需要在小程序后台配置业务域名否则线上会白屏这是最容易踩的坑。而uniapp apk内跳转到微信h5页面这个热词指的应该是 App 中需要拉起微信并打开某个 H5通常配合 H5 支付或微信登录使用。App 端拉起微信有专门的 SDK 接口不能简单打开一个浏览器链接否则会失败。搜索热词里还有通用万能封装app源码(可以封装任意网站,h5游戏,盒子,手游等等)带教程。这里我要提醒一句这种万能封装听起来很方便但往往暗藏风险封装包的代码不透明、更新不受控、甚至可能被用来承载违规内容。正规做法是用 uniapp 或 Capacitor 这类成熟框架做壳再按规范接管 webview 能力和原生交互。面试时如果被问到封装 App回答用成熟跨端框架 原生能力桥接比说下载了一个万能封装包要专业得多。5.2 扫一扫、定位与苹果底部安全区uni运行到h5上怎样使用扫一扫功能这个问题很典型。uni.scanCode 在小程序端是封装的摄像头扫码能力但在 H5 端uni.scanCode 很可能不受支持或依赖原生 WebView 的扫码插件。纯浏览器场景里想用扫码得引入第三方库比如 html5-qrcode 或者基于 camera API 自己封装。再或者在微信内置浏览器里可以引导用户使用微信的扫一扫能力通过微信 JS-SDK 或开放标签但跳出微信后就没法用了。所以在 H5 里做扫一扫功能第一步是明确当前运行环境然后按环境选择实现方式否则很容易白做。小程序苹果底部兼容css和h5 苹果底部兼容本质是同一个问题iPhone 的底部 Home 指示条会遮挡固定定位的底部导航。解决方案是用环境安全区变量.bottom-bar { padding-bottom: constant(safe-area-inset-bottom); /* iOS 11.0 */ padding-bottom: env(safe-area-inset-bottom); /* iOS 11.2 */ }还要配合 viewport-fitcover确保页面能延伸到安全区之外meta nameviewport contentwidthdevice-width, initial-scale1.0, viewport-fitcover如果不加 viewport-fitcoversafe-area-inset-bottom 始终为 0env() 就不会生效。这是很多开发者遇到为什么加了 env 没反应的原因。uniapp h5使用腾讯地图获取定位报错已经在 4.3 提过这里补充一个实战建议多端定位不要依赖单一的 API最好做一个统一封装在 H5 端优先用浏览器 Geolocation在 App 端用原生定位模块在小程序端用 uni.getLocation。接口统一返回内部各自实现。这样每端踩的坑都被隔离在封装内部业务代码不需要知道坐标系的区别。5.3 打包超时、Word 预览与宝塔部署uniapp打包h5 出现连接服务器超时,点击屏幕重试的页面这个问题我在实际项目里遇到过。这个提示页一般不是业务代码报的错而是 uniapp 内置的异常兜底页面通常是静态资源加载失败或者接口请求异常导致。常见原因是打包后的 index.html 里引用了绝对路径的静态资源部署到二级目录时资源 404于是页面卡在加载状态。解决办法是检查 manifest.json 里的 h5 配置把路由模式从 hash 改成 history 时必须有后端 rewrite 支持同时确认 publicPathVite或 baseWebpack设置正确。vue2 h5页面想要预览word文件也是个高频需求。浏览器原生不支持 Word 预览常见方案有三种第一种是用微软的 Office Online Viewer把 Word 链接嵌入 iframe 就能预览第二种是后端把 Word 转成 PDF 或图片前端直接展示第三种是用 docx-preview 这类纯前端库渲染 docx但复杂排版支持有限。如果是企业内部系统我优先推荐后端转 PDF因为兼容性最好如果是公开场景可以试试 Office Viewer 的 iframe 方案。宝塔部署h5是很多小团队常用的部署方式。宝塔面板里部署 H5 的步骤如下在宝塔面板新建站点绑定域名创建静态网站。将构建产物dist 目录上传到站点根目录。如果是 history 路由需要在站点配置里加一条伪静态规则把所有请求重写到 index.htmllocation / { try_files $uri $uri/ /index.html; }配置 HTTPS 证书启用强制 HTTPS避免微信等场景下的签名或请求问题。这段配置是 H5 部署最常被忽略的一环。很多人以为上传完就能访问结果刷新二级路由就 404其实就是少了 try_files 这条规则。另外微信里的 H5 页面如果涉及 JS-SDK 签名页面域名必须配置在公众号的 JS 安全域名里否则 wx.config 会失败。结尾这套八股文整理下来最大的体会是很多问题从表面上是一道面试题本质上是一个完整的工程决策场景。比如 flex 和 grid 的选择、盒模型的理解、微信生态里的各种跳转限制你只有真正做过、踩过坑才能把八股答案说出为什么。所以我建议你在看这些知识点的时候不要只背结论最好能对应到自己项目里某个具体场景想一想当时如果按这个思路处理会不会少加班几小时。我每次整理笔记都会逼自己补一句它解决了什么问题、在什么场景下不适用这句话比背十个属性都值钱。 H5与CSS八股文：从布局到微信生态的实战笔记
说实话整理这份 H5、CSS 的八股文是我面了好几轮前端之后才痛下决心做的事。以前总觉得背面试题没意思但真到写项目的时候才发现很多问题不是 会不会写 的问题而是 知不知道为什么要这么写 的问题。比如 flex 布局的 flex:1 到底是怎么算出来的CSS 选择器优先级为什么不是简单的类大于标签还有 H5 页面在微信里跟小程序、App 之间到底是怎么通信的。这些问题不搞透写出来的页面要么是看着能跑但一改就崩要么是换了个环境就各种兼容性报错。这份笔记我把布局、选择器、视觉效果、微信生态、多端适配这几个高频方向都过了一遍。不管你是准备面试还是正在做 H5 项目被某个兼容性问题卡住应该都能在里面找到能直接抄作业的答案。1. 布局基石Flex 与 Grid怎么答才显得不背题布局这块是 H5、CSS 面试里的重头戏十个问题里至少有五个跟 flex 有关。很多人会把属性背得滚瓜烂熟但一被追问flex:1 到底什么意思就卡壳。这其实暴露了一个问题只记住了答案没理解设计思路。1.1 Flex 面试必备容器与项目的八股清单先过一遍最基础的开启 flex 布局后容器上有六个常用属性项目上有六个常用属性。这些是死知识必须记住但更重要的是理解它们之间的协作关系。容器属性里flex-direction 决定主轴方向row 和 column 是最常用的两种。flex-wrap 控制换行默认 nowrap 会导致项目被压缩。justify-content 管主轴对齐align-items 管交叉轴对齐align-content 管多行之间的分配。项目属性里flex-grow 是放大比例flex-shrink 是缩小比例flex-basis 是项目在主轴上的初始尺寸。面试里最经典的追问是flex:1 是什么 很多人会答等分剩余空间这个答案只对了一半。准确地说flex:1 是 flex-grow:1、flex-shrink:1、flex-basis:0% 的简写。注意那个 flex-basis:0%它意味着项目的初始尺寸被设为 0所以剩余空间会被完整地分配给这个项目。如果写成 flex-grow:1 但 flex-basis 默认是 auto那初始尺寸就是内容宽度分配效果会跟 flex:1 有明显差异。还有一个很容易踩的坑flex-basis 和 width 同时设置时flex-basis 优先。这个特性在很多兼容性 bug 里出现过。比如移动端列表项你明明设了 width:100px但父容器是 flex 布局且项目有 flex-basis最后宽度就不是 100px 了。排查的时候第一反应应该看是不是 flex-basis 覆盖了 width。实际项目里我比较推荐用原子化的思路去封装 flex 工具类比如.flex { display:flex }、.flex-1 { flex:1 }、.items-center { align-items:center }。这不是让你去用某个特定的原子化 CSS 框架而是说把最常用、最稳定的 flex 组合提炼成类名业务代码里就不用每处都写一长串。搜索热词里出现原子性css说明大家在实践中已经意识到这个问题了类名重复不可怕可怕的是同一个布局语义在十个地方写了十种不同的写法。1.2 Grid 布局二维场景的利器别只会用 flexGrid 在面试里出现频率不如 flex但一旦问到基本就是拉开差距的题。flex 解决的是一维布局也就是一条轴上的排列grid 解决的是二维布局行和列可以同时控制。最常用的声明是display:grid然后通过 grid-template-columns 和 grid-template-rows 定义轨道。grid-template-columns: repeat(3, 1fr)是三等分布局的标准写法1fr 是 fr 单位代表剩余空间的一份。很多人会问 fr 跟百分比有什么区别区别在于 fr 是剩余空间的分配而百分比是容器总尺寸的比例。当容器有 gap 或者固定尺寸轨道时fr 会自动消化这些差异而百分比经常导致溢出。Grid 还有一个很实用的特性是 grid-template-areas它允许你用命名的形式描述布局区域。举个例子.container { display: grid; grid-template-areas: header header header sidebar content content footer footer footer; grid-template-columns: 1fr 3fr; grid-template-rows: auto 1fr auto; } .header { grid-area: header; } .sidebar { grid-area: sidebar; } .content { grid-area: content; } .footer { grid-area: footer; }这种写法在页面骨架搭建时特别直观改布局只需要调整 ASCII 字符画不用动 HTML 结构。但要注意 grid-template-areas 的每个单元格都要有名字空位要用.占位否则整个声明无效。关于 flex 和 grid 的选择我的经验是一维导航、按钮组、列表项用 flex二维卡片墙、页面骨架、复杂表单区域用 grid。如果你在面试时能说出flex 是从内容出发grid 是从布局出发这种视角会比单纯背属性高一个档次。1.3 高频小问题gap、居中、底部固定与文本位置搜索热词里有很多看起来简单但实际容易翻车的小问题比如css gap、css div适中在底部、怎么调整css容器里的文本位置。这些恰恰是日常开发里出现频率最高的。gap 属性是 CSS 布局里一个晚到但好用的特性它同时适用于 flex、grid 和多列布局。在 grid 时代我们用的是 grid-gap后来统一改成了 gapgrid-gap 属于旧写法。gap 可以分别设置 row-gap 和 column-gap比如gap: 12px 8px表示行间距 12px、列间距 8px。flex 布局里用 gap 做间距可以避免手动给子元素加 margin 或使用相邻兄弟选择器代码会干净很多。div 固定在底部是个经典需求不同场景有不同解法。如果 div 在内容后面用正常文档流加 margin-top:auto 配合 flex 容器即可如果 div 需要始终固定在视口底部用 position:fixed 加 bottom:0 是最直接的如果底部栏压住了内容就需要给 body 加 padding-bottom 来留出安全高度。面试时如果被问到答完这三种情况还能说明各自适用场景基本就过关了。调整容器里的文本位置本质上是对 line-height、text-align、vertical-align、padding 的理解。单行文本垂直居中用 line-height 等于容器高度多行文本垂直居中用 flex 加 align-items:center这是最常见的两种方案。文本水平位置由 text-align 控制但要注意 text-align 作用于块级容器内的行内容对行内元素本身没有效果。vertical-align 则是调整行内元素在行框内的垂直对齐方式常用于图标和文字的对齐。这几个属性区分清楚文本位置的问题就解决了一大半。另外搜索热词里那个css 加边框盒子不变形这是 box-sizing 的经典问题。默认的 content-box 下元素宽度不含 padding 和 border加上 border 后盒子会变大。改成box-sizing: border-box后width 是最终占位宽度padding 和 border 在内部消化。现在主流做法是全局设置* { box-sizing: border-box; }这个设置几乎是所有现代 CSS 重置方案的标配。2. 选择器、伪元素与变量最刁钻的八股角落选择器优先级在 CSS 八股文里地位很高但很多人理解是错的。记得有一次面试官让我写几个选择器并排优先级我写了 类选择器大于元素选择器就被追问那类选择器和伪类谁大。这种题不把权重计算规则吃透很容易露馅。2.1 选择器优先级别再说类大于标签CSS 优先级本质上是一个四位数的比较规则行内样式 ID 选择器 类选择器、属性选择器、伪类 元素选择器、伪元素。!important 可以改变排序但它是特异性外挂一般不建议用。有个面试官教我的记忆方式把优先级当成一个数字内联样式是最高位ID 是第二位类、属性、伪类是第三位元素、伪元素是第四位。比如div.container .item:hover这个选择器的优先级就是 0,2,1。两个选择器比较时从左到右逐位比较数字大的胜出。为什么:hover、:not、:nth-child这些伪类都比元素选择器权重高因为它们在第三位而元素选择器在第四位。但:not本身不计入权重它里面的选择器才计入。比如div:not(.active)的优先级是类选择器权重加元素选择器权重而不是伪类权重。实际开发中我建议尽量把选择器层级控制在两层以内比如.card .title就足够。层级越深优先级越复杂代码越难覆盖。遇到要覆盖第三方组件样式的情况优先通过添加自定义类名来提高权重而不是无脑加 !important。项目里如果用了原子化 CSS优先级管理更要注意因为原子类大多是单类选择器权重相同的情况下后定义的类会覆盖先定义的类这和样式表中写死一条规则是两回事。2.2 伪元素与 CSS 变量配合起来能玩出花::before和::after这两个伪元素面试必考。它们有两个硬性要求必须设置 content 属性哪怕值是空字符串默认是行内元素要设置宽高得先转成 block 或 inline-block。伪元素的经典用法包括清除浮动、绘制装饰线条、实现气泡小箭头以及给不存在的元素补充结构。搜索热词里有一条css 控制伪元素变量这其实是在问 CSS 变量在伪元素中的使用方式。CSS 变量是继承的父元素定义的变量子元素和伪元素都能读取。在伪元素里使用变量的常见姿势是.btn { --icon-color: #ff6600; } .btn::after { color: var(--icon-color); } .btn:hover { --icon-color: #00ff88; }这种写法比在伪元素里重写一遍颜色值清晰得多。如果你想在 JS 里动态控制伪元素样式不能用 element.style 直接操作 ::after但可以操作 CSS 变量element.style.setProperty(--icon-color, #ff6600)然后伪元素里用 var() 读取。这算是动态控制伪元素最优雅的方案。css hover延迟关闭也是热词里一个很实用的技巧。很多下拉菜单在鼠标移出后立刻消失体验很差。要让它延迟消失最基础的做法是使用 transition 加 transition-delay.dropdown-content { opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0s linear 0.2s; } .nav-item:hover .dropdown-content { opacity: 1; visibility: visible; transition-delay: 0s; }这个方案的好处是显示时无延迟消失时延迟 0.2 秒给用户一个容错窗口。另一种方案是用 animation 的延迟配合 forwards 填充模式但那样控制逻辑更绕我更喜欢 transition-delay。如果下拉菜单有二级导航最好在菜单项和目标菜单之间留出一条没有 gap 的桥把鼠标移出到进入菜单的路径连起来体验会顺滑很多。还要提一下 Vue 里的深度选择器问题搜索热词里的css deep方法说的就是这个。在 scoped 样式中父组件的样式默认不会作用到子组件内部这时需要深度选择器来穿透。不同时期、不同工具链有不同写法/deep/、::v-deep、、:deep()。Vue 3 推荐用:deep(.child-class)Vue 2 里常用::v-deep或/deep/。这一点在面试中经常作为是否真的写过规模化项目的考察点。2.3 Mask、背景图与裁剪合成CSS mask 在热词里出现说明大家开始关注图片处理之外的视觉效果了。mask 的用法很简单但概念比较抽象它是一个遮罩元素内容在遮罩的透明区域会被隐藏在遮罩的不透明区域会被显示。常见用法是用渐变做图片淡出效果.fade-image { mask-image: linear-gradient(to bottom, black 60%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%); }这样图片底部会平滑地消失在背景里性能比用 rgba 渐变盖在图片上好很多。注意 mask 需要 -webkit- 前缀来兼容 Safari 和旧版 Chrome。背景图相关的面试题也常考 background-size 的 cover 和 contain 区别。cover 是把背景图缩放到完全覆盖容器可能被裁剪contain 是完整显示背景图可能留白。这在响应式 banner、头像裁剪场景里非常关键。background 简写顺序容易记混我的记忆方式是background: color image position / size repeat attachment origin clip其中 position 和 size 要写成position / size比如background: url(img.png) center / cover no-repeat。这个斜杠很多人会漏掉漏掉之后 size 就不生效。背景图定位还有一种常见需求图标和文字的垂直居中对齐。用background-position: right center或者background-position: 100% 50%可以让背景图在容器内垂直居中。这比用绝对定位去摆放背景图简洁很多。3. 文字与视觉渐变、竖排、省略号与炫光效果文字处理是 H5 页面里的高频需求也是面试里很容易被考察细节的环节。从字体渐变到文字竖排从单行省略到金光闪闪的装饰效果每个点背后都有对应的 CSS 机制。3.1 字体渐变background-clip 的经典组合css 字体渐变和css 字体这些热词出现的背后是 H5 视觉设计里越来越常见的渐变文字需求。实现文字渐变核心是 background-clip: text 配合 color: transparent。.gradient-text { background: linear-gradient(135deg, #ff6a00, #ffb700); -webkit-background-clip: text; background-clip: text; color: transparent; }原理其实不复杂background 绘制到文字的形状上然后把文字本身变成透明背景渐变就从文字里透出来。注意 background-clip: text 需要 -webkit- 前缀来兼容部分浏览器而且设置 color: transparent 时如果 background 加载失败或者不支持 background-clip文字会直接消失。稳妥的做法是加一个 supports 判断supports (background-clip: text) or (-webkit-background-clip: text) { .gradient-text { background: linear-gradient(...); -webkit-background-clip: text; color: transparent; } }这样不支持的浏览器会回退到正常文字颜色而不是变成透明文字。这属于经验问题面试里如果答出来会显得你不是只会写 demo。3.2 文字竖排、单行省略和盒子变形css文字竖着排列是个不太起眼但问的人不少的问题。实现竖排最标准的是 writing-mode 属性.vertical-text { writing-mode: vertical-rl; }vertical-rl 表示文字从上到下排列、从右往左换行符合中文传统排版的习惯。如果想控制单字间距配合 letter-spacing 调整就行。这个属性还可以用在 table 的表头文字、侧边栏标签等场景。css 单行显示超出点点点考察的是文本溢出处理。单行省略是三件套.ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }三行缺一不可overflow:hidden 让超出的内容隐藏white-space:nowrap 阻止换行text-overflow:ellipsis 显示省略号。如果要两行或三行省略用 -webkit-line-clamp.multi-ellipsis { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }这个写法要注意 display:-webkit-box 会和 flex 的 display 冲突如果元素本身是 flex 容器得在外面套一层。css 加边框盒子不变形在 3.2 里提过了本质是 box-sizing:border-box。实际项目里边框、内边距导致的宽度溢出是最常见的布局 bug 来源。给所有元素统一设置 border-box 后布局计算会直观很多这也是 Bootstrap、Tailwind 等框架都在做的基础重置。3.3 动画效果涟漪、波浪、rotate3d 与金光闪闪搜索热词里大量视觉动画相关的词比如css涟漪光圈扩散、css波浪效果、css rotate3d、css如何做出来金光闪闪的效果、css动画效果网站。这些看起来是炫技但背后其实都是 CSS 动画的经典组合。涟漪光圈扩散的核心是 box-shadow 和 transform 的 scale。一个常见的实现是用 ::after 伪元素画一个圆然后让它的 box-shadow 向外扩散并逐渐变透明同时 scale 变大.ripple { position: relative; width: 80px; height: 80px; border-radius: 50%; background: rgba(255, 102, 0, 0.6); } .ripple::after { content: ; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255, 102, 0, 0.6); animation: ripple 1.5s ease-out infinite; } keyframes ripple { from { transform: scale(1); opacity: 1; } to { transform: scale(2.5); opacity: 0; } }关于波浪效果常见两种实现一种是用 CSS border-radius 做不规则圆角变形动画但效果有限另一种是用 SVG 波浪路径配合 CSS 平移实现前后两层波浪交错运动。SVG 那块儿稍微复杂适合做 H5 页面顶部的动态分隔线。如果只要简单的波纹也可以用 border-radius: 50% 加多个 radial-gradient 背景来模拟。rotate3d 是 CSS 3D 变换里常被考到的点。transform: rotate3d(x, y, z, angle)四个参数分别代表绕 X、Y、Z 轴旋转的矢量分量和角度。最常见的写法是rotate3d(1, 1, 0, 45deg)表示同时绕 X 轴和 Y 轴各旋转 45 度。要看到 3D 效果必须给父容器设置 perspective否则只是平面上的斜切。金光闪闪效果是 H5 活动页里的高频需求做法通常是光带扫过。思路是用一个线性渐变色块加上 background-position 的动画让高亮区域从左到右扫过文字或卡片。配合 background-clip:text 可以做出文字扫光。如果是纯色块也可以用 ::after 做一条倾斜的半透明白条用 translateX 动画扫过。这个效果不高级但很实用能明显提升页面的质感。如果你需要动画灵感可以看看一些 CSS 动画展示站比如 Animate.css、Hover.css、动漫风格的 codepen 精选。但注意别直接往生产项目里塞整库动画最好按需提取关键帧否则包体积和渲染性能都扛不住。4. H5 与微信生态真正的实战题都在这H5 开发里微信生态绝对是绕不开的一环。从公众号内嵌页、微信支付、分享卡片到开放标签调用小程序每一个需求背后都有一堆文档和坑。这块内容在面试里也越来越常被问到因为它是 H5 开发者实战能力的分水岭。4.1 公众号 H5 与微信开放标签搜索热词里有不少微信公众号h5怎么打开小程序、微信公众号h5 点击按钮调取打开小程序页面 如何实现、h5微信浏览器内跳转app这些都属于微信开放标签的范畴。先说场景一个公众号的 H5 页面里想通过一个按钮跳转到某个关联的小程序。官方方案是使用 wx-open-launch-weapp 开放标签它允许在微信内置浏览器中打开同一公众号关联的小程序。使用前提是公众号和小程序必须已关联且域名已经配置到 JS 安全域名页面引入了微信 JS-SDK 并通过 wx.config 注入了权限。标签写起来像自定义元素wx-open-launch-weapp idlaunchBtn usernamegh_xxxx pathpages/index/index script typetext/wxtag-template style.btn { padding: 12px 24px; background: #07c160; color: #fff; border-radius: 6px; }/style div classbtn打开小程序/div /script /wx-open-launch-weapp注意里面必须用 script 标签包一个 wxtag-template 模板不能直接写按钮元素。而且 wx-open-launch-weapp 是微信内置浏览器特有的在普通浏览器里不会渲染成按钮所以要给容器写一个降级样式。调试的时候如果点击没反应优先检查 wx.config 的签名是否成功、用户名 username 是否为小程序的原始 IDgh_ 开头的以及公众号和小程序是否在同一个开放平台账号下。如果要跳转的是 App用的是 wx-open-launch-app 或者 URL Scheme。URL Scheme 的方式更灵活但分享到微信以外的场景大概率会被拦截。开放标签在普通浏览器里没有效果所以一般会写降级逻辑检测微信环境才显示“在微信中打开”的引导提示。通过微信公众号访问h5页面这个搜索词背后其实是两个层面一是公众号菜单/图文可以直接配置 H5 链接二是 H5 页面通过 OAuth2 获取微信用户身份。很多开发者混淆了微信 H5 和微信小程序之间的登录方式实际上 H5 网页走的是公众号网页授权需要 appid、redirect_uri、scopesnsapi_base 或 snsapi_userinfo拿到的 code 换 openid再换用户信息。这个流程在面试里如果被深入问可以从静默授权 vs 用户授权的区别来答。4.2 分享、支付与文件下载的边界h5分享卡片到开发文档、企微h5分享这两个热词指向的都是微信分享能力。公众号 H5 页面可以调用微信 JS-SDK 的 updateAppMessageShareData 和 updateTimelineShareData 来定制分享到好友和朋友圈的卡片标题、描述、图片和链接。注意现在分享卡片的配置需要用户主动触发一次点击后才会生效不能一进页面就静默设置。这个需要用户点击一次的机制让很多开发踩过坑因为老的接口 wx.onMenuShareTimeline 在旧版本里是允许直接设置的新版本改成了需要用户点击后才生效面试时说出这个差异会加分。企微h5文件下载是企业微信环境下常见的需求但企业微信对普通文件下载限制比较严格。常规做法是通过企业微信 JS-SDK 的 wx.agentConfig 注入后调用相应下载接口或者在后端生成链接后引导用户在企业微信浏览器里打开。直接 window.open 或者 a 标签 download 在企微里经常失效这是环境限制不是代码问题。知道这一点遇到企微里下载不了文件的报障就能快速定位而不是白查代码。h5微信浏览器内跳转app在 4.1 提过用 wx-open-launch-app 或 URL Scheme。这里要提醒一句微信对 URL Scheme 的拦截策略是动态变化的可能在版本更新后突然失效所以生产环境一定要做好「无法打开则引导用户复制链接到浏览器」的降级方案。热词里还出现了京东h5支付、鸿蒙微信无法h5支付这些本质上是 H5 支付在不同客户端的兼容性问题。京东 H5 支付是指京东商城在手机网页端拉起收银台的方案鸿蒙版微信无法使用 H5 支付可能是鸿蒙客户端对微信支付组件支持不完整这种问题在前端无解只能提示用户用其他客户端或走 App 支付。遇到这类问题第一反应应该是排查环境而不是改代码因为很多时候根本不是代码问题。4.3 昵称、定位与能否调用小程序经纬度h5页面获取微信昵称这个问题我要先说一个更新微信官方在 2022 年之后已经将 wx.getUserProfile 废弃新规下 H5 里获取用户头像和昵称应该使用头像昵称填写能力也就是 button 的 open-typechooseAvatar 配合 input 的 typenickname。这个变化对开发者影响很大很多老项目还在用 getUserProfile 获取用户信息现在基本都被限制或改为返回匿名信息。如果是通过公众号网页授权OAuth 里可以拿到用户的昵称和头像但前提是 scope 为 snsapi_userinfo 且用户主动授权。h5能调用微信小程序当前经纬度不是个非常典型的实战问题。直接答案是不能。H5 页面无法直接调用小程序的 wx.getLocation 获取经纬度。但小程序可以通过 web-view 承载 H5在合适的时机通过 postMessage 把小程序里的经纬度传给 H5。流程是小程序里用 wx.getLocation 拿到经纬度通过 web-view 的 bindmessage 事件把数据传给 H5H5 用 window.addEventListener(message) 接收。需要注意的是 postMessage 消息只能在特定时机触发比如小程序分享、组件销毁或特定按钮点击时才会传递给 H5不是实时通道。所以如果业务要求实时位置建议 H5 自己用浏览器 Geolocation或者接入地图 SDK 的定位能力。说到定位uniapp h5使用腾讯地图获取定位报错:getlocation:fail translate coordinate system这个热词也很典型。腾讯地图定位返回的坐标系是 GCJ-02国测局坐标但某些环境下 SDK 要求的是 WGS-84 或者反过来才报 translate coordinate system 错误。解决办法是明确坐标系的转换// 在 uni-app 中选择坐标系参数 uni.getLocation({ type: gcj02, success: (res) { // 坐标已经是 GCJ-02直接传给腾讯地图 } });如果项目同时接了微信 JS-SDK 的 getLocation要注意微信返回的坐标系默认是 gcj02直接传给浏览器 Geolocation 的 API 会导致偏移反之亦然。这就是坐标系转换问题在多端项目里的典型表现。5. 多端适配与 Uniapp 实战网上搜不到答案的坑最后这部分写给那些已经在写 H5、但经常被多端问题折磨的人。搜索热词里大量 uniapp 相关的词说明很多人正在用 uniapp 同时做 App、小程序和 H5。多端适配的第一步就是搞清楚当前代码跑在什么环境里。5.1 环境判断App、小程序还是嵌套 H5uniappvue3h5 里面怎么判断别人嵌套你的h5是app还是小程序这个问题核心是判断宿主环境。在 H5 世界里UA 是判断环境的钥匙。小程序 web-view 的 UA 通常带有miniProgram 或 MicroMessenger 特征App 内嵌的 webview UA 可能带有 App 品牌信息。比如微信内置浏览器 UA 里一定会有 MicroMessenger企业微信会有 wxwork。uniapp 自身也提供了一套环境判断 API// #ifdef H5 // 只有 H5 平台会编译到这一段 // #endif这种条件编译是在编译期生效的它解决的是同一个工程编译到不同平台时执行不同代码的问题。如果要判断运行时环境可以用uni.getSystemInfoSync().uniPlatform或者uni.getSystemInfoSync().hostName。判断嵌套 H5 是 App 还是小程序更准确的方式是让宿主向 H5 注入标识。比如原生 App 的 webview 通过 JSBridge 注入了一个全局变量小程序 web-view 可以通过 URL query 传参或者使用 postMessage。如果你发现 UA 里没有可靠标识最稳的做法是约定一个全局变量或者 URL 参数由宿主容器在加载时写入。这个约定在项目初期就要定义好否则后面很难补。uniapp微信小程序跳转h5在小程序端是用 web-view 组件承载 H5 页面web-view srchttps://example.com/page/web-viewweb-view 的 src 域名需要在小程序后台配置业务域名否则线上会白屏这是最容易踩的坑。而uniapp apk内跳转到微信h5页面这个热词指的应该是 App 中需要拉起微信并打开某个 H5通常配合 H5 支付或微信登录使用。App 端拉起微信有专门的 SDK 接口不能简单打开一个浏览器链接否则会失败。搜索热词里还有通用万能封装app源码(可以封装任意网站,h5游戏,盒子,手游等等)带教程。这里我要提醒一句这种万能封装听起来很方便但往往暗藏风险封装包的代码不透明、更新不受控、甚至可能被用来承载违规内容。正规做法是用 uniapp 或 Capacitor 这类成熟框架做壳再按规范接管 webview 能力和原生交互。面试时如果被问到封装 App回答用成熟跨端框架 原生能力桥接比说下载了一个万能封装包要专业得多。5.2 扫一扫、定位与苹果底部安全区uni运行到h5上怎样使用扫一扫功能这个问题很典型。uni.scanCode 在小程序端是封装的摄像头扫码能力但在 H5 端uni.scanCode 很可能不受支持或依赖原生 WebView 的扫码插件。纯浏览器场景里想用扫码得引入第三方库比如 html5-qrcode 或者基于 camera API 自己封装。再或者在微信内置浏览器里可以引导用户使用微信的扫一扫能力通过微信 JS-SDK 或开放标签但跳出微信后就没法用了。所以在 H5 里做扫一扫功能第一步是明确当前运行环境然后按环境选择实现方式否则很容易白做。小程序苹果底部兼容css和h5 苹果底部兼容本质是同一个问题iPhone 的底部 Home 指示条会遮挡固定定位的底部导航。解决方案是用环境安全区变量.bottom-bar { padding-bottom: constant(safe-area-inset-bottom); /* iOS 11.0 */ padding-bottom: env(safe-area-inset-bottom); /* iOS 11.2 */ }还要配合 viewport-fitcover确保页面能延伸到安全区之外meta nameviewport contentwidthdevice-width, initial-scale1.0, viewport-fitcover如果不加 viewport-fitcoversafe-area-inset-bottom 始终为 0env() 就不会生效。这是很多开发者遇到为什么加了 env 没反应的原因。uniapp h5使用腾讯地图获取定位报错已经在 4.3 提过这里补充一个实战建议多端定位不要依赖单一的 API最好做一个统一封装在 H5 端优先用浏览器 Geolocation在 App 端用原生定位模块在小程序端用 uni.getLocation。接口统一返回内部各自实现。这样每端踩的坑都被隔离在封装内部业务代码不需要知道坐标系的区别。5.3 打包超时、Word 预览与宝塔部署uniapp打包h5 出现连接服务器超时,点击屏幕重试的页面这个问题我在实际项目里遇到过。这个提示页一般不是业务代码报的错而是 uniapp 内置的异常兜底页面通常是静态资源加载失败或者接口请求异常导致。常见原因是打包后的 index.html 里引用了绝对路径的静态资源部署到二级目录时资源 404于是页面卡在加载状态。解决办法是检查 manifest.json 里的 h5 配置把路由模式从 hash 改成 history 时必须有后端 rewrite 支持同时确认 publicPathVite或 baseWebpack设置正确。vue2 h5页面想要预览word文件也是个高频需求。浏览器原生不支持 Word 预览常见方案有三种第一种是用微软的 Office Online Viewer把 Word 链接嵌入 iframe 就能预览第二种是后端把 Word 转成 PDF 或图片前端直接展示第三种是用 docx-preview 这类纯前端库渲染 docx但复杂排版支持有限。如果是企业内部系统我优先推荐后端转 PDF因为兼容性最好如果是公开场景可以试试 Office Viewer 的 iframe 方案。宝塔部署h5是很多小团队常用的部署方式。宝塔面板里部署 H5 的步骤如下在宝塔面板新建站点绑定域名创建静态网站。将构建产物dist 目录上传到站点根目录。如果是 history 路由需要在站点配置里加一条伪静态规则把所有请求重写到 index.htmllocation / { try_files $uri $uri/ /index.html; }配置 HTTPS 证书启用强制 HTTPS避免微信等场景下的签名或请求问题。这段配置是 H5 部署最常被忽略的一环。很多人以为上传完就能访问结果刷新二级路由就 404其实就是少了 try_files 这条规则。另外微信里的 H5 页面如果涉及 JS-SDK 签名页面域名必须配置在公众号的 JS 安全域名里否则 wx.config 会失败。结尾这套八股文整理下来最大的体会是很多问题从表面上是一道面试题本质上是一个完整的工程决策场景。比如 flex 和 grid 的选择、盒模型的理解、微信生态里的各种跳转限制你只有真正做过、踩过坑才能把八股答案说出为什么。所以我建议你在看这些知识点的时候不要只背结论最好能对应到自己项目里某个具体场景想一想当时如果按这个思路处理会不会少加班几小时。我每次整理笔记都会逼自己补一句它解决了什么问题、在什么场景下不适用这句话比背十个属性都值钱。