PHP程序设计与微信小程序案例教程PPT课件（共21单元）4 微信小程序代码WXML.pptxVIP

2.3.4 制作“比较成绩”页面 2.“比较成绩”页面WXML代码 view text请输入语文成绩/text input type=number / /view view text请输入数学成绩/text input type=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文件 1 2 在标签内容或者属性需要数据绑定的地方写入 {{变量名}} 对该变量进行定义，把变量的值放在下面所示代码data:{ }中。 2.3.5数据绑定 3.数据绑定示例： view{{name}}/view index.js代码 Page({ /* 页面的初始数据 */ data:{ name:贵州黄果树 } }) ①index.wxml ②index.js 运行结果 2.3.5数据绑定 4.数据绑定{{ }}的使用位置： wxml中数据绑定的位置除了放在内容中，还可以放在其它位置。 * * 主讲人：谭丽君 2.3 微信小程序代码WXML 2.3.1 WXML基本语法 WXML 是从HTML（超文本标签语言）衍生而来的一种在小程序前端页面使用的语言，WXML 仍然是标签语言，使用标记标签来描述页面的结构，页面内容写在标签内部. 2.3.1 WXML基本语法 双标签：成对出现的标签。 格式： 关键词内容/关键词 例如：视图容器 view /view 单标签：不成对出现的标签。 格式： 关键词/ 例如：输入框 input / 1.标签：标签由一对尖括号包围关键词。 2.3.1 WXML基本语法 通用属性 大部分标签都有的属性。 例如：class、id、style等 专用属性 不同标签有自己独特属性。 例如：input password=true/ password作用：输入框中输入内容以小圆点显示 2.标签属性:给组件设置参数用的。 2.3.1 WXML基本语法 3.常用组件 2.3.2 制作第一个小程序 pages:[ pages/test/test, pages/index/index, pages/logs/logs ], view第一个小程序/view???????? ?viewHello?World/view????????? input placeholder=请输入姓名 / 新建一个微信小程序 运行效果 步骤一app.json文件 步骤二test.wxml文件 2.3.3 制作“景区名片”页面 1.“景区名片”页面框架 大框view class=card 大标题框 view class=big-title 图片 image 内容框 view class=content 小标题框view class=small-title 段落框 view class=dl 2.3.3 制作“景区名片”页面 1.“景区名片”页面代码 pages:[ pages/jqmp//jqmp, pages/index/index, pages/logs/logs ], view class=card view class=big-title荔波小七孔/view image src=../../images/lb.jpg /image view class=content view class=small-title简介/view view class=dl小七孔风景区位于贵州省荔波县城南部30余公里的群峰之中，景区全长7公里，面积约10平方公里，有百多个游览景点。是集山、水、林、洞、湖、瀑为一体的原始奇景。1988年被列为国家级自然保护区。/view /view /view 步骤一 app.json文件 步骤二 jqmp.wxml文件 2.3.4 制