H5 页面定制开发，微信里打开前要查六项

有个深圳客户去年做校招，落地页在设计师电脑上看一切正常。转发到群里之后，安卓手机上日期选择框变成了系统默认的滚轮，iOS 上分享出去的卡片是一张灰底空白图。投放预算花出去三天，转化数据一直上不来，回头查才发现是分享配置和日期控件的问题。

H5页面定制开发的麻烦，大部分不在页面好不好看，而在微信这个环境里的行为跟普通浏览器不一样。上线前有几处位置可以提前查掉，这篇按检查顺序列出来，文末那张表可以直接发给开发团队逐条打勾。

深圳做 H5 活动页，投放入口要先定死

入口这件事在设计阶段就要定死。朋友圈广告点进来的页面，用户是滑动时偶然看到的，前两屏抓不住人就走了，页面结构上得把核心信息压到**屏。公众号菜单点进来的，用户本来就有预期，可以做成多屏的长页面。群二维码扫码进来的，很多是一次性活动页，要考虑有效期和到期后的兜底内容。短信链接的入口在深圳做本地活动的客户里用得多，落地页要能在没有微信环境时正常显示，H5 与常驻页面怎么分工可以参考 target="_blank"。

四种入口对应的分享链路也不同，微信 H5 页面还要单独看右上角菜单能不能用。公众号菜单进来的页面，右上角菜单里的分享是有效的；从外部浏览器直接打开的地址，微信的分享接口调不起来。开工前把入口写在需求里，比页面做完了再改结构省事。

iOS 和安卓在日期、键盘和滚动上的差异

日期选择是差异最明显的一处。同样一个 type 为 date 的输入框，iOS 上弹出的是底部滚轮，安卓上弹出的是日历弹层，两者的高度和占位完全不同。设计要求统一的视觉时，这个控件只能自己写，不能直接用系统控件。

键盘弹出是第二处。表单页面里，底部固定一个提交按钮是常见设计。iOS 上键盘弹起来会把这个按钮顶到键盘上方，安卓上有时候会把整页内容往上推，有时候不动。同一份代码在两台手机上表现可以完全相反，只能靠真机调。

滚动是第三处。iOS Safari 上的惯性滚动跟安卓不一样，页面内嵌套滚动区域时，iOS 上容易出现滚动穿透，弹出层下面的内容跟着一起动。另一个高频坑是 100vh 这个高度单位，iOS 上它包含地址栏的高度，页面底部的按钮会被浏览器工具栏挡住一小截。

微信内置浏览器跟 Safari 是两套内核

很多人以为微信里打开就是 Safari 或 Chrome 套了个壳。安卓微信用的是腾讯自研的内核，iOS 微信受系统限制用的是 WKWebView，两者对 CSS 和 JS 的支持都有各自的脾气。深圳做活动页的团队里，测试环节只开一个浏览器的，上线后多半要返工。

几个具体的差别。视频自动播放在微信里被拦住，必须用户主动点一下，带声音的尤其严格。localStorage 在微信里可能被清理，把关键状态只存在本地会出问题。微信右上角菜单里有自带的分享和刷新，页面里再做一套分享按钮，用户会点错。页面标题在微信里由微信自己接管，用 document.title 改在部分版本上不生效。

这些限制没有统一解法，只能一条条试。做小程序时页面结构的定法又不一样，可以对照 target="_blank"。建议在项目排期里给真机调试留两天，别把上线日和测试日排在同一天。

深圳校招场景的加载时间，实测差在三处

深圳这边做校招和展会活动的 H5，投放时间段往往集中在几天里，用户打开时的网络条件是随机的。我们实测过同一批页面，加载时间能差到三倍，差别主要在三处。

**处是图片格式。同样一张 750 宽的背景图，PNG 是四百多 KB，换成 WebP 之后不到一百 KB，肉眼看不出差别。第二处是长图的处理方式，设计给一张 750×8000 的长图，整张加载要等好几秒；切成六段按屏加载，**屏一秒内就能出来。第三处是第三方脚本，统计代码、客服插件和地图组件各来一份，每份都要单独请求，还要等对方服务器响应。

首屏资源总量控制在 1MB 以内是个实用的线，超过这个数，弱网环境里首屏就要等三秒以上。活动页的跳出率对加载时间非常敏感，多等一秒，留下来的人就少一批。

分享卡片的三条内容要单独配

微信里转发页面出去，别人看到的是一张卡片。卡片的标题、描述和缩略图如果不单独配置，微信会自己去页面里抓，抓出来的经常是页面标题加一张灰底图，或者是页面里**张不相干的图。

配置要走微信的 JS 接口，需要公众号的 AppID，需要后端做签名，还需要把域名加到公众号后台的 JS 安全域名里。这一项要提前一个工作日配好，很多项目卡在这里，是因为域名是临时的，或者签名用的 token 缓存没做好，隔一会儿就失效。

缩略图建议用 300×300 以上的正方形图，不要带透明背景，透明部分在微信里会渲染成黑块。标题控制在二十个字以内，超出的部分在卡片上是截断的。描述那一行在部分版本上不显示，重要信息不要只写在描述里。

授权方式分静默和手动两种

微信里的网页授权有两档。静默授权用户没有任何感知，页面能拿到用户的 openid，在这个公众号下的**标识。手动授权会弹出一个授权确认框，用户点同意之后能拿到更多资料。

能拿到多少资料这两年收紧过。用户信息接口在 2022 年之后做了调整，头像昵称这类内容不再能直接取到，要走专门的资料填写组件。所以现在的判断很简单，只需要在同一公众号下区分用户的场景，用静默授权就够了，没必要让用户多点一次。

深圳做会员和积分活动的客户里，我见过不少页面一进来就弹授权框，理由是后台要统计。多一次弹框就多一次流失，这个代价换一个 openid 不划算。

埋点要跟投放口径对齐

投放后台显示的点击数，和页面统计里的访问数，从来都对不上。广告平台的点击统计发生在跳转之前，页面统计发生在页面加载完成之后，中间的网络跳转和加载失败会吃掉一部分。这个差值在百分之十到百分之三十之间都算正常，超过就要查链路。

对齐的办法是提前约定参数。来源、媒介、计划和创意这几个维度用统一的命名规则拼在链接里，页面这边照着解析，两边就能按同样的口径出报表。转化事件也要提前定义清楚，什么叫一次有效提交，是点提交按钮就算，还是后台收到数据才算，两种口径的差别可以到百分之十几。

上线前六项检查表

微信里常见的不兼容问题清单

• 日期和省市选择器在两套系统上样式不同，需要自己写控件
• 键盘弹出时固定定位元素被顶起或不动，两台手机表现相反
• 页面内嵌套滚动在 iOS 上出现滚动穿透
• 100vh 高度在 iOS 上包含地址栏，底部内容被工具栏遮挡
• 带声音的视频自动播放被拦截，必须用户主动触发
• localStorage 可能被清理，关键状态要有服务端兜底
• 用 document.title 改标题在部分版本不生效
• 缩略图带透明通道时在卡片上渲染成黑块

不建议在 H5 活动页上做的三种效果

• 首屏放自动播放的背景视频。微信里大概率播不了，还会把首屏体积拖到几兆
• 整屏的视差滚动。安卓中低端机上掉帧明显，滑动体验比不做更差
• 进来先弹授权框或者先弹关注引导。用户还没看到内容就先被拦一道，跳出率会明显上升

什么情况下干脆不要做 H5

内容少于两屏的，做成一张长图或者一个公众号图文就够了，没必要单独开发。活动只跑一两天的，投入产出比也不划算，开发和测试的时间比活动本身还长。

反过来，需要收集表单、需要跟后台数据打通，或者需要多轮投放复用同一个页面的，做一个独立的 H5 才值。网站开发定制的项目里，H5 通常只是其中一环，复用价值才是判断标准。深圳这边做展会和校招的客户，H5 活动页开发里同一个页面连着用两三届的情况不少，**版把埋点和分享配扎实，后面每届只改文案和图片就行。

页面上线之后，建议留一天做数据回访。**天的真实访问数据出来，加载时间、跳出位置和表单完成率这几项一看，问题在哪就很清楚了。改完再投第二轮，比一上线就放大预算稳妥。

如需进一步沟通，可直接致电 13928418795。