《PHP程序设计与微信小程序案例教程》 课件2.3 微信小程序代码WXML

主讲人：谭丽君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>

<view>Hello

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代码<view><text>请输入语文成绩</text><inputtype="number"/></view><view><text>请输入数学成绩</text><inputtype="number"/></view><button>比较成绩</button><view><text>比较结果：</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}}</view>index.js代码Page({/*页面的初始数据*/data:{name:'贵州黄果树'}})①index.wxml②index.js运行结果

2.3.5数据绑定

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

2.3.6列表渲染

列表渲染：在组件上使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。wx:for是标签的一种特殊属性，称为控制属性。默认数组的当前项的下标变量名默认为index，步骤一index.wxml默认数组当前项的变量名默认为item。步骤二index.js运行效果

2.3.7制作“轮播图”

一、轮播组件二、swiper常用属性<swiper></swiper><swiper-item>...</swiper-item>

<swiper-item>...</swiper-item>父级儿子级<swiper

indicator-dots="true“autoplay="true"

interval="1000"

circular="true">

2.3.7制作“轮播图”

步骤1：App.json文件步骤2：在项目根目录下创建images文件夹，粘贴4张图片

2.3.7制作“轮播图”

步骤3：lx.wxml文件

2.3.7制作“轮播图”

使用列表渲染写轮播组件注意：1.wx:for写在需要循环的组件里2.item是数组里每一项3.注意在wxml中数组和变量一定要写在{{}}里。步骤1：lx.wxml文件步骤2：lx.js文件2.3.8条件渲染在wxml中，使用wx:if=“{{条件

}}"来判断是否需要渲染该组件。示例：成绩大于80，显示良好，否则大于60，显示及格<view

wx