HTML → 微信小程序转换器

把常见 HTML / CSS / JS 结构转换成 WXML / WXSS / JS / JSON
HTML 输入0 字符
支持常见标签、class/id、内联样式、图片、链接、表单、点击事件等。复杂 DOM、第三方库和浏览器 API 需要人工调整。
转换器运行在浏览器本地,不上传代码。
等待转换
● 就绪

HTML 转微信小程序代码工具 - 在线免费使用

本工具可以把常见的 HTML 页面一键转换为微信小程序代码。粘贴 HTML / CSS / JS 代码,自动生成小程序页面所需的四件套文件:index.wxml(页面结构)、index.wxss(页面样式)、index.js(页面逻辑)、index.json(页面配置),并支持打包为 ZIP 下载,可直接用微信开发者工具打开继续开发。

HTML 标签与小程序标签转换对照表

HTML 标签小程序标签(WXML)
div / p / section / ul / li / h1-h3view
span / strong / b / em / labeltext
imgimage
buttonbutton
input / textareainput / textarea
a(链接)view(需自行绑定跳转事件)
onclickbindtap(自动生成对应函数占位)

CSS 方面,style 标签中的样式会转换为 WXSS,其中 body、html 选择器会自动替换为小程序的 page 选择器;class 与 id 选择器保持不变,可直接复用。

常见问题(FAQ)

1、转换后的小程序代码可以直接运行吗?
生成的是可直接用微信开发者工具打开的项目页面骨架。普通静态页面转换后基本可用;涉及 wx.request、wx.setStorage 等微信 API、第三方 JS 库、复杂 DOM 操作的部分需要人工调整。
2、我的代码会被上传到服务器吗?
不会。整个转换过程在浏览器本地完成,代码不出你的电脑,可放心粘贴。
3、支持 wx:if、wx:for 这些小程序指令吗?
本工具输出的是标准 WXML 结构,条件渲染和列表渲染指令(wx:if / wx:for)需要你根据业务逻辑自行补充。
4、转换失败或不完整怎么办?
请检查输入的 HTML 是否完整闭合。过于复杂的嵌套、内嵌 script 模板建议先拆分再转换。

相关推荐:微信小程序模板下载、小程序开发教程、小程序源码列表