4.1 WXML是什么WXMLWeiXin Markup Language是微信小程序的页面结构语言类似于网页开发中的HTML。WXML vs HTML对比HTMLWXML语言类型超文本标记语言微信标记语言标签div,span,pview,text,block数据绑定需JavaScript操作DOM直接在标签中写{{}}4.2 常用标签view - 视图容器相当于HTML中的div用于包裹内容viewclasscontainer内容区域/view标注view 标签使用示例text - 文本用于显示文本内容text这是文本内容/text特点支持嵌套可以绑定数据换行需使用\ntext第一行\n第二行/textbutton - 按钮button点击我/button可添加点击事件buttonbindtaponClick点击我/button标注按钮样式input - 输入框inputplaceholder请输入内容/标注输入框样式image - 图片imagesrc/assets/logo.pngmodeaspectFit/4.3 数据绑定WXML最强大的特性之一数据绑定。基本语法在 JS 的data中定义数据// pages/index/index.jsPage({data:{title:欢迎使用,userName:张三}})在 WXML 中使用{{}}显示数据viewtext{{title}}/texttext用户{{userName}}/text/view渲染结果欢迎使用 用户张三标注JS中定义数据标注WXML中绑定数据标注渲染结果动态属性属性值也可以使用数据绑定!-- 动态绑定输入框值 --inputvalue{{inputValue}}/!-- 动态切换样式 --viewclass{{isActive ? active : normal}}内容/view运算表达式{{}}中可以进行简单运算text{{a b}}/text!-- 数学运算 --text{{name admin}}/text!-- 比较运算 --text{{flag ? 是 : 否}}/text!-- 三元运算 --4.4 条件渲染根据条件显示或隐藏元素。wx:ifviewwx:if{{isShow}}这段内容会显示/viewwx:if / wx:elif / wx:elseviewwx:if{{type news}}新闻/viewviewwx:elif{{type notice}}公告/viewviewwx:else其他/viewhidden vs wx:if属性原理适用场景hidden切换display属性频繁切换wx:if条件为false时不渲染条件很少变化标注条件为true时的显示标注条件为false时的显示代码示例// JSPage({data:{isVip:false}})!-- WXML --viewwx:if{{isVip}}text尊贵VIP会员/text/viewviewwx:elsetext普通用户/text/view4.5 列表渲染循环渲染多个相同元素。wx:forviewwx:for{{array}}{{index}}: {{item}}/view默认变量{{index}}- 当前索引从0开始{{item}}- 当前元素示例// JSPage({data:{fruits:[苹果,香蕉,橙子]}})!-- WXML --viewwx:for{{fruits}}{{index 1}}. {{item}}/view渲染结果1. 苹果 2. 香蕉 3. 橙子标注JS数据标注WXML代码标注渲染结果指定索引和元素变量名viewwx:for{{fruits}}wx:for-indexiwx:for-itemfruit{{i}}: {{fruit}}/viewwx:key为列表中的每一项指定唯一标识提高渲染性能viewwx:for{{list}}wx:keyid{{item.name}}/view标注wx:key 用法4.6 模板WXML 支持定义可复用的代码片段。定义模板使用template标签定义模板!-- 定义模板 --templatenameitemCardviewclasscardtext{{title}}/texttext{{content}}/text/view/template使用模板使用is属性引用模板data传入数据templateisitemCarddata{{{title: 标题1, content: 内容1}}}/templateisitemCarddata{{{title: 标题2, content: 内容2}}}/标注模板定义标注模板使用4.7 事件绑定WXML 中的事件绑定使用bind或catch前缀。常用事件事件触发时机对应HTML事件bind:tap点击onclickbind:input输入oninputbind:change改变onchangebind:focus获得焦点onfocusbind:blur失去焦点onblur语法buttonbind:taphandleClick点击/buttoninputbind:inputhandleInput/在JS中处理事件// pages/index/index.jsPage({handleClick(){console.log(按钮被点击了)},handleInput(e){console.log(输入了,e.detail.value)}})标注WXML事件绑定标注JS事件处理函数bind vs catch区别bindcatch冒泡会冒泡阻止冒泡!-- 点击inner会同时触发inner和outer的处理函数 --viewbind:tapouterviewbind:tapinner点击/view/view!-- 点击inner只触发innerouter不会触发 --viewbind:tapouterviewcatch:tapinner点击/view/view4.8 实战短信生成器WXML现在我们来看政务短信助手的首页结构!-- pages/index/index.wxml --viewclasscontainer!-- 模板类型选择 --viewclasscardviewclasslabel选择短信类型/viewviewclasstype-tabsviewwx:for{{templateTypes}}wx:keyidclasstype-tab {{currentType item.id ? active : }}bindtapselectTypedata-type{{item.id}}viewclasstype-name{{item.name}}/viewviewclasstype-desc{{item.description}}/view/view/view/view!-- 输入区域 --viewclasscardviewclasslabel领导称呼/viewinputclassinput-fieldplaceholder请输入领导称呼value{{leader}}bindinputonLeaderInput//viewviewclasscardviewclasslabel核心正文/viewtextareaclassinput-field textareaplaceholder请输入短信内容value{{content}}bindinputonContentInput//view!-- 生成按钮 --buttonclassbtn-primarybindtapgenerateSms生成短信/button/view标注列表渲染wx:for标注条件class{{currentType item.id ? ‘active’ : ‘’}}标注事件绑定bindtap4.9 本章小结✅ 掌握了5种常用WXML标签viewtextbuttoninputimage✅ 学会了数据绑定{{}}语法✅ 学会了条件渲染wx:ifwx:elifwx:else✅ 学会了列表渲染wx:forwx:for-itemwx:key✅ 学会了事件绑定bind:tapbind:input