小程序自己开发了一套WXML标记语言和WXSS样式语言,并非直接使用标准的HTML5+CSS3。因此,粗略的统计了一下之间的差异,有助于理解小程序,同时遇到HTML5转换小程序的时候,知道如何避开其中的坑。
小程序标签大约为32个左右:
view(视图容器)、rich-text(富文本)、swiper(滑块视图容器)、icon(图标)、text(文字)、progress(进度条)、button(按钮)、form(表单)、input(输入框)、checkbox(多项选择器)、radio(单项选择器)、picker(列表选择器)、slider(滚动选择器)、switch(开关选择器)、textarea(多行输入框)、label(标签)、navigator(应用链接)、audio(音频)、image(图片)、video(视频)、camera(系统相机)、map(地图)、scroll-view(可滚动视图容器)、picker-view(内嵌列表选择器)、canvas(画布)movable-area(可移动区域)、movable-view(可移动的视图容器)、cover-view(覆盖视图)、cover-image(覆盖图片)、functional-page-navigator(跳转到插件功能页)、live-player(实时音视频播放)、live-pusher(实时音视频录制)
| 小程序 | HTML5 | 说明 |
| <view> | div、h1、h2、h3、h4、h5、h6、p、span、acronym、abbr、address、b、bdi、bdo、big、blockquote、center、cite、code、del、dfn、em、font、i、ins、kbd、mark、meter、pre、q、rp、rt、ruby、s、samp、small、strike、strong、sub、sup、time、tt、u、var、wbr、header、footer、section、article、aside、ul、li、ol、dl、dt、dd、table、tbody、thead、tfoot、tr、colgroup、col、td、th、caption | a标签href属性不是有效的地址,标签转为view |
| <text> | div、h1、h2、h3、h4、h5、h6、p、span | <text>具有长按选中的属性,当标签内只有文字,将标签转换为<text> |
| <rich-text> | hr、br | |
| <icon> | <i class="icon"></i> | <icon>可以直接用微信组件默认的图标 |
| <input type="text"> | <input /> | |
| <input type="checkbox"> | <checkbox-group><checkbox /> </checkbox-group> | |
| <input type="radio"> | <radio-group> <radio /></radio-group> |
其它:
微信小程序的app.json文件需要手动添加支持的页面路径
需要引用weui.wxss文件,作为基础样式框架的样式
来自:米筷小程序














