今天呢,我们一起来看看小程序的wxml,其实呢就跟前端写html一样的,只不过这里标签不一样,并且头部head部分也不用写,因为小程序内在都包好了。
wxml基本由这几个标签
数据绑定类似于Vue的数据绑定(“{{value}} ”绑定数据),数据初始化时在js文件的Page()函数里的data对象中。
以下是常用的标签:
view标签:视图标签,默认换行,类似于div标签,块级元素;
icon标签:展示图标 type属性用于展示什么样的图标如:clear,success,info,warn等,size:图标大小;
button标签:size:按钮大小(只有俩个值:mini,default),type:类型(改变颜色,default,warn,primary),plain:是否镂空,背景透明(true/false), loading(名称前是否带下载图标),form-type:用作表单按钮(submit/reset),hover-class(点击下去的样式类, 目前在无type属性并且plain为false时才能生效 );
input: 输入框 type表示类型,里面没有password,password单独作为属性表示输入密码 auto-focus:自动聚焦 placeholder-class:指定占位符的样式类;
checkbox:最外围是checkbox-group 内部包含checkbox,可以添加checked来默认选中,color用于改变对勾的颜色,checkbox-group可以绑定bindchange事件;
Picker(选择器):mode属性用来控制选择器类别(selector 普通选择器,time 时间选择器,date 日期选择器) value:当前选择的值,range:变化范围,对于time选择器和date选择器需要设定start和end属性来确定起止范围(不能设定range)改变选择器的值需要绑定变化函数(bindchange)
text:行及元素。
以下是例子:
基本的数据绑定

列表渲染、循环
条件判断
创建模板的wxml
绑定事件
其实,只写wxml的话,就是将数据放在view里面,再结合css就可以做和传统的web前端做一样的界面了
以上均为个人观点,欢迎指正O(∩_∩)O,下一节讲一下小程序的css
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了