主讲人：谭丽君2.3微信小程序代码WXML微信小程序开发

2.3.1WXML基本语法WXML是从HTML（超文本标签语言）衍生而来的一种在小程序前端页面使用的语言，WXML仍然是标签语言，使用标记标签来描述页面的结构，页面内容写在标签内部.

2.3.1WXML基本语法双标签：成对出现的标签。格式：关键词内容/关键词例如：视图容器view/view单标签：不成对出现的标签。格式：关键词/例如：输入框input/1.标签：标签由一对尖括号包围关键词。

2.3.1WXML基本语法通用属性大部分标签都有的属性。例如：class、id、style等专用属性不同标签有自己独特属性。例如：inputpassword=true/password作用：输入框中输入内容以小圆点显示2.标签属性:给组件设置参数用的。

2.3.1WXML基本语法3.常用组件

2.3.2制作第一个小程序pages:[pages/test/test,pages/index/index,pages/logs/logs],view第一个小程序/view?????????viewHello?World/view?????????inputplaceholder=请输入姓名/新建一个微信小程序运行效果步骤一app.json文件步骤二test.wxml文件

2.3.3制作“景区名片”页面1.“景区名片”页面框架大框viewclass=card大标题框viewclass=big-title图片image内容框viewclass=content小标题框viewclass=small-title段落框viewclass=dl

2.3.3制作“景区名片”页面1.“景区名片”页面代码pages:[pages/jqmp//jqmp,pages/index/index,pages/logs/logs],viewclass=card viewclass=big-title荔波小七孔/view imagesrc=../../images/lb.jpg/image viewclass=content viewclass=small-title简介/view viewclass=dl小七孔风景区位于贵州省荔波县城南部30余公里的群峰之中，景区全长7公里，面积约10平方公里，有百多个游览景点。是集山、水、林、洞、湖、瀑为一体的原始奇景。1988年被列为国家级自然保护区。/view /view /view步骤一app.json文件步骤二jqmp.wxml文件

2.3.4制作“比较成绩”页面1.“比较成绩”页面框架框框按钮框框框按钮框文本输入框文本输入框文本

2.3.4制作“比较成绩”页面

2.“比较成绩”页面WXML代码viewtext请输入语文成绩/textinputtype=number//viewviewtext请输入数学成绩/textinputtype=number//viewbutton比较成绩/buttonviewtext比较结果：/text/view{??pages:[??pages/bjcj/bjcj,pages/index/index,pages/logs/logs??]}步骤一app.json步骤二bjcj.wxml

2.3.5数据绑定

1.数据绑定：就是通过双重花括号{{变量名}}的语法格式，将一个变量绑定到页面上。小程序上的大部分数据都是后端服务器返回给小程序的，也就是说这些数据是动态的，每次加载小程序都要先访问服务器，服务器处理数据后，再返回小程序显示数据绑定

2.3.5数据绑定

2.数据绑定的操作方法wxml文件js文件12在标签内容或者属性需要数据绑定的地方写入{{变量名}}对该变量进行定义，把变量的值放在下面所示代码data:{}中。

2.3.5数据绑定

3.数据绑定示例：view{{name}}/viewindex.js代码Page({/*页面的初始数据*/data:{name:贵州黄果树}})①index.wxml②index.js运行结果

2.3.5数据绑定

4.数据绑定{{}}的使用位置：wxml中数据绑定的位置除了放在内容中，还可以放在其它位置。

2.3.6列表渲染

列表渲染：在组件上使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。wx:for是