HTML不能直接做成微信小程序页面，因小程序运行在封闭容器中，仅识别wxml、wxss、js三件套；所谓“HTML做小程序页面”实为用HTML/CSS/JS模拟UI风格，用于原型演示或评审，不具原生能力且无法上架。
HTML 不能直接做成微信小程序页面——小程序运行在自家封闭容器里，只认 wxml、wxss、js 三件套，纯 HTML 文件扔进去根本不会被加载。
为什么用 HTML 仿小程序页面？
多数人说的“HTML 做小程序页面”，实际是：用 HTML/CSS/JS 模拟小程序 UI 风格（比如圆角按钮、下拉刷新视觉、tabbar 固定底栏），用于快速预览交互逻辑、做原型演示，或给非小程序开发者看效果。它不跑在微信里，只是长得像。
常见错误现象：document.getElementById('xxx') 在真机小程序中无效；input 绑定 v-model 或 ngModel 在 HTML 里能跑，但和小程序的双向绑定机制无关；把 HTML 文件直接丢进 miniprogram 目录下，微信开发者工具报 page json not found。
- 使用场景：内部评审、前端协作切图、教学演示、PWA 替代方案
- 不适用场景：上架微信小程序、调用微信支付/登录等原生能力
- 性能影响：纯 HTML 实现滚动、下拉刷新时容易卡顿，缺少
scroll-view的原生优化
用 CSS 快速还原小程序常用组件样式
微信小程序默认字体是 system-font，边框圆角统一 4px，主色常为 #1aad19（绿色）。仿写重点不是像素级还原，而是保持视觉一致性。
立即学习“前端免费学习笔记（深入）”；
公众号运营：文章发布至草稿、样式封面、评论与用户管理、数据统计等。用户要求将 Markdown 发送到公众号草稿、查看阅读量统计或类似后台操作时，使用本技能。
示例：仿小程序 button 样式
<button class="mp-btn">确定</button>
.mp-btn {
display: block;
width: 90%;
margin: 20px auto;
padding: 12px;
background-color: #1aad19;
color: white;
border: none;
border-radius: 4px;
font-size: 16px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
box-sizing: border-box;
}
-
border-radius: 4px是关键，小程序几乎所有可点击元素都带这个值 - 避免用
float布局，改用flex或grid，更接近小程序view的行为 - 图标建议用 iconfont 或 SVG，别用图片 sprite，否则在高 DPI 屏幕上模糊
模拟小程序 tabbar 和页面路由切换
小程序的底部 tabbar 是全局固定、跨页面不销毁的；HTML 单页里得手动维护状态，否则切换后页面重载、数据丢失。
实操建议：
- 用
display: none/block控制页面区域显隐，而不是window.location.href跳转 - tabbar 用绝对定位：
position: fixed; bottom: 0; left: 0; width: 100%;，并设z-index: 999 - 监听点击事件时，更新
data-active属性，配合 CSS 切换选中态（如加color: #1aad19） - 不要用
history.pushState模拟路由——它无法触发小程序生命周期（onShow/onHide），纯属自找麻烦
哪些小程序特性 HTML 根本没法仿？
有些东西看着像，一碰就露馅。提前知道边界，能少踩一堆坑。
-
scroll-view的弹性滚动和回弹效果：CSSoverflow: scroll在 iOS Safari 上默认禁用弹性，需加-webkit-overflow-scrolling: touch，但仍不如原生顺滑 -
picker组件：HTML<select>在 iOS 上是全屏弹窗，Android 是下拉列表，和小程序统一滚轮选择器完全不是一回事 -
live-pusher/camera：HTML 的<video>+getUserMedia权限模型、兼容性、画质控制都远弱于小程序原生封装 - 页面栈管理：HTML 没有
getCurrentPages()，无法获取上一页数据，也无法主动redirectTo后清理栈
真正要上线，还是得老老实实写 wxml；HTML 只适合“先让产品看看长啥样”，别把它当开发流程的一环。最易被忽略的是：很多人把 HTML 页面命名为 index.html 放进小程序项目目录，结果微信开发者工具连编译都不触发——它只扫描 pages 下的 json 配置文件，压根不认 .html 后缀。
