微信小程序开发项目教程慕课版教案 415页.docx
- 文档编号:12286010
- 上传时间:2023-06-05
- 格式:DOCX
- 页数:26
- 大小:72.29KB
微信小程序开发项目教程慕课版教案 415页.docx
《微信小程序开发项目教程慕课版教案 415页.docx》由会员分享,可在线阅读,更多相关《微信小程序开发项目教程慕课版教案 415页.docx(26页珍藏版)》请在冰点文库上搜索。
微信小程序开发项目教程慕课版教案415页
第3章莫凡商城小程序的项目结构
课时内容
构建小程序页面视图
课时
2
教学目标
掌握构建小程序页面视图的方法
熟悉条件渲染与列表渲染
掌握单列表式导航的实现
教学重点
构建小程序页面视图的方法
单列表式导航的实现
教学难点
单列表式导航的实现
教学设计
1.教学思路:
通过多媒体演示和实机操作讲解构建小程序页面视图的方法及条件渲染与列表渲染;通过实战实现单列表式导航。
2.教学手段:
多媒体+计算机
3.教学资料:
教材、多媒体课件
教学内容
3.3微信小程序WXML视图层
完成小程序和页面的注册,我们就可以开始构建小程序页面视图了。
WXML(WeiXinMarkupLanguage)是视图层框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的视图。
3.3.1WXML标签语言
在框架页面文件的*.wxml文件里,可以利用WXML标签语言来构建小程序页面视图,构建视图页面内容就需要用到组件,如在页面里想显示出“你好,微信小程序”,代码如下。
3.3.2动态绑定数据
在*.wxml文件里,可以使用view组件进行布局设计。
但在3.3.1小节中,显示的内容是直接写在view组件中的,不是动态数据,如何动态地绑定数据呢?
*.wxml文件中使用的动态数据,都来自于*.js文件中Page()函数的data对象。
动态数据绑定就是在*.wxml文件中,通过双大括号({{}})将在*.js文件中定义的变量包起来,放在view组件中,这样就可以实现数据动态绑定效果了。
示例代码如下。
--index.wxml-->
//index.js
Page({
data:
{
message:
'你好,微信小程序'
}
})
3.3.3组件属性动态绑定数据
组件属性动态绑定数据,是将*.js文件data对象里的数据绑定到小程序的组件上,示例代码如下。
--index.wxml-->
//index.js
Page({
data:
{
id:
0
}
})
3.3.4控制属性动态绑定数据
控制属性动态绑定数据是通过条件判断if语句来控制的,如果满足条件判断,则执行该语句,否则不执行,示例代码如下。
--index.wxml-->
if="{{flag}}"> //index.js Page({ data: { flag: true } }) 3.3.5关键字动态绑定数据 关键字动态绑定数据用于将组件的一些关键字绑定数据,如复选框组件,checked关键字如果等于true,则代表选中复选框,等于false则代表不选中复选框,示例代码如下。 不要直接写checked="false",否则其计算结果是一个字符串,转换成boolean类型后代表真值。 3.3.6运算 可以在 {{}} 内进行简单的运算,小程序支持以下几种方式的运算。 (1)三元运算,示例代码如下。 true: false}}">Hidden (2)数学运算,示例代码如下。 --index.wxml--> //index.js Page({ data: { a: 1, b: 2, c: 3 } }) view中的内容为3+3+d。 (3)逻辑判断,示例代码如下。 if="{{length>5}}"> (4)字符串运算,示例代码如下。 --index.wxml--> //index.js Page({ data: { name: 'MINA' } }) (5)数据路径运算,示例代码如下。 --index.wxml--> //index.js Page({ data: { object: { key: 'Hello' }, array: ['MINA'] } }) 3.4微信小程序WXSS样式渲染 WXSS(WeiXinStyleSheets)是一套样式语言,用于描述WXML的组件样式。 WXSS具有CSS(CascadingStyleSheets,层叠样式表)的大部分特性,同时WXSS对CSS进行了扩充及修改,用来决定WXML组件的显示效果。 与CSS相比,WXSS在尺寸单位和样式导入上进行了扩展。 3.4.1尺寸单位 WXSS的尺寸单位是rpx(responsivepixel),它可以根据屏幕宽度进行自适应。 屏幕宽度规定为750rpx。 例如,iPhone6的屏幕宽度为375px,共有750个物理像素,则750rpx=375px=750个物理像素,1rpx=0.5px=1个物理像素。 rpx与px的换算关系如表所示。 rpx与px的换算 设备 rpx换算成px(屏幕宽度/750) px换算成rpx(750/屏幕宽度) iPhone5 1rpx=0.42px 1px=2.34rpx iPhone6 1rpx=0.5px 1px=2rpx iPhone6Plus 1rpx=0.552px 1px=1.81rpx 3.4.2样式导入 使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束,示例代码如下。 /**common.wxss**/ .small-p{ padding: 5px; } /**app.wxss**/ @import"common.wxss"; .middle-p{ padding: 15px; } 这样,在app.wxss文件里,可以将common.wxss文件样式引入进来使用。 定义在app.wxss文件中的样式为全局样式,作用于每一个页面。 在每个页面的*.wxss文件中定义的样式为局部样式,只作用于对应的页面,并会覆盖app.wxss文件中相同的选择器。 3.4.3内联样式 在WXML视图组件中,可以使用style、class属性来控制组件的样式。 (1)style: 用于接收动态的样式,在运行时会进行解析,静态的样式统一写到class中,要尽量避免将静态的样式写进style中,以免影响渲染速度,style属性示例代码如下。 red;"/>//静态的样式写进style,尽量避免使用 {{color}}"/>//动态获取 (2)class: 用于指定样式规则,其属性值是样式规则中类选择器名(样式类名)的集合,样式类名不需要带上“.”,样式类名之间用空格分隔。 3.4.4选择器 WXSS样式渲染支持用选择器来控制,现在支持的选择器如表所示。 支持的选择器 选择器 样例 样例描述 .class .intro 选择所有拥有class="intro"的组件 #id #firstname 选择拥有id="firstname"的组件 element view 选择所有view组件 element,element view,checkbox 选择所有文档的view组件和所有的checkbox组件 : : after view: : after 在view组件后边插入内容 : : before view: : before 在view组件前边插入内容 3.4.5常用样式属性 常用样式包括display(显示)、position(定位)、float(浮动)、background(背景)、border(边框)、outline(轮廓)、text(文本)、font(字体)、margin(外边距)、padding(填充)等。 (1)display(显示)样式,其属性和说明如表所示。 display样式的属性和说明 属性 说明 flex 多栏多列布局,常和flex-direction: row/column一起使用 inline-block 行内块元素 inline 此元素会被显示为内联元素,元素前后没有换行符 inline-table 作为内联表格来显示(类似 inline-flex 将对象作为内联块级弹性伸缩盒显示 none 此元素不会被显示 lock 此元素将显示为块级元素,此元素前后会带有换行符 list-item 此元素会作为列表显示 table 会作为块级表格来显示(类似 table-caption 作为一个表格标题显示(类似 table-cell 作为一个表格单元格显示(类似 table-column 作为一个单元格列显示(类似 table-column-group 作为一个或多个列的分组来显示(类似 table-row 作为一个表格行显示(类似 table-row-group 作为一个或多个行的分组来显示(类似 table-header-group 作为一个或多个行的分组来显示(类似) table-footer-group 作为一个或多个行的分组来显示(类似 inherit 从父元素继承display属性的值 (2)position(定位)样式,其属性和说明如表所示。 position样式的属性和说明 属性 说明 absolute 生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位。 元素的位置通过left、top、right及bottom属性进行规定 relative 生成相对定位的元素,相对于其正常位置进行定位。 因此,“left: 20”会向元素的LEFT位置添加20像素 fixed 生成绝对定位的元素,相对于浏览器窗口进行定位。 元素的位置通过left、top、right及bottom属性进行规定 static 默认值,没有定位,元素出现在正常的流中(忽略top、bottom、left、right或者z-index声明) inline-flex 将对象作为内联块级弹性伸缩盒显示 inherit 规定应该从父元素继承position属性的值 (3)float(浮动)样式,其属性和说明如表所示。 float样式的属性和说明 属性 说明 left 元素向左浮动 right 元素向右浮动 none 默认值,元素不浮动,并会显示其在文本中出现的位置 inherit 规定应该从父元素继承float属性的值 (4)background(背景)样式,其属性和说明如表所示。 background样式的属性和说明 属性 说明 background 简写属性,作用是将背景属性设置在一个声明中background: colorpositionsizerepeatoriginclipattachmentimage; background-color 指定要使用的背景颜色 background-position 指定背景图像的位置background-position: center background-size 指定背景图像的大小background-size: 80px60px;(宽度、高度) background-repeat 指定如何重复背景图像repeat,repeat-x,repeat-y,no-repeat,inherit background-origin 指定背景图像的定位区域padding-box。 背景图像填充框的相对位置 border-box 背景图像边界框的相对位置 content-box 背景图像相对位置的内容框 background-clip 指定背景图像的绘画区域。 属性值,同上 background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动 scroll 背景图像随页面的其余部分滚动。 这是默认属性 fixed 背景图像是固定的 inherit 指定background-attachment的设置应该从父元素继承 local 背景图像随滚动元素滚动 background-image 指定要使用的一个或多个背景图像,使用url('URL')提供图像的URL (5)border(边框)样式,其属性和说明如表所示。 border样式的属性和说明 属性 说明 属性值 border 简写属性,用于把针对4个边的属性设置在一个声明中 border: 5pxsolidred; border-width 用于为元素的所有边框设置宽度,或者单独地为各边框设置宽度 thin、medium、thick、length border-style 设置元素所有边框的样式,或者单独地为各边设置边框样式 solid、dashed、dotted、double等 border-color 设置元素的所有边框中可见部分的颜色,或为4个边分别设置颜色 border-color: red; (6)outline(轮廓)样式,其属性和说明如表所示。 outline样式的属性和说明 属性 说明 属性值 outline 在一个声明中设置所有的外边框属性 outline: outline-color,outline-style,outline-width outline-color 设置外边框的颜色 outline-style 设置外边框的样式 Solid、dashed、dotted、double等 outline-width 设置外边框的宽度 thinmediumthicklength (7)text(文本)样式,其属性和说明如表所示。 text样式的属性和说明 属性 说明 属性值 color 设置文本颜色 direction 设置文本方向 ltr: 文本方向从左到右 rtl: 文本方向从右到左 letter-spacing 设置字符间距 line-height 设置行高 text-align 对齐元素中的文本 left: 把文本排列到左边。 默认值,由浏览器决定 right: 把文本排列到右边 center: 把文本排列到中间 justify: 实现两端对齐文本效果 inherit: 规定应该从父元素继承text-align属性的值 text-decoration 向文本添加修饰 underline: 定义文本下的一条线 overline: 定义文本上的一条线 line-through: 定义穿过文本下的一条线 blink: 定义闪烁的文本 text-indent 缩进元素中文本的首行 text-shadow 设置文本阴影 text-shadow: h-shadowv-shadowblurcolor; h-shadow: 水平阴影的位置,允许负值 v-shadow: 垂直阴影的位置,允许负值 blur: 模糊的距离 color: 阴影的颜色 text-transform 控制元素中的字母 capitalize: 文本中的每个单词都以大写字母开头 uppercase: 定义仅有大写字母 lowercase: 定义无大写字母,仅有小写字母 vertical-align 设置元素的垂直对齐 baseline、sub、super、top、text-top、middle、bottom、text-bottom、length、%、inherit white-space 设置元素中空白的处理方式 normal、pre、nowrap、pre-wrap、pre-line、inherit word-spacing 设置字间距 normal、length、inherit (8)font(字体样式),其属性和说明如表所示。 font样式的属性和说明 属性 说明 属性值 font 在一个声明中设置所有字体属性 font: font-stylefont-variantfont-weightfont-size/line-heightfont-family(按顺序) font-style 指定文本的字体样式 normal: 默认值。 浏览器会显示一个标准的字体样式 italic: 浏览器会显示一个斜体的字体样式 oblique: 浏览器会显示一个倾斜的字体样式 inherit: 规定应该从父元素继承字体样式 font-variant 以小型大写字体或者正常字体显示文本 normal: 默认值。 浏览器会显示一个标准的字体 small-caps: 浏览器会显示小型大写字母的字体 inherit: 规定应该从父元素继承font-variant属性的值 font-weight 指定字体的粗细 normal: 默认值。 定义标准的字符 bold: 定义粗体字符 bolder: 定义更粗的字符 lighter: 定义更细的字符 inherit: 规定应该从父元素继承字体的粗细 font-size 指定文本的字体大小 smaller: 把font-size设置为比父元素更小的尺寸 larger: 把font-size设置为比父元素更大的尺寸 length: 把font-size设置为一个固定的值 %: 把font-size设置为基于父元素的一个百分比值 font-family 指定文本的字体系列 (9)margin(外边距)样式,其属性和说明如表所示。 margin样式的属性和说明 属性 说明 属性值 margin 在一个声明中设置所有外边距属性 margin: 10px5px15px20px;(上边距,右边距,下边距,左边距) margin-top 设置元素的上外边距 margin-right 设置元素的右外边距 margin-bottom 设置元素的下外边距 margin-left 设置元素的左外边距 (10)padding(填充)样式,其属性和说明如表所示。 padding样式的属性和说明 属性 说明 属性值 padding 使用缩写属性设置在一个声明中的所有填充属性 padding: 10px5px15px20px;(上填充,右填充,下填充,左填充) padding-top 设置元素的顶部填充 padding-right 设置元素的右部填充 padding-bottom 设置元素的底部填充 padding-left 设置元素的左部填充 3.5 微信小程序条件渲染 在编写微信小程序时,经常需要进行条件判断,以确定是否需要渲染某代码块。 3.5.1使用wx: if判断单个组件 在微信小程序框架里,使用 wx: if="{{condition}}" 来进行条件判断,判断是否需要渲染该代码块,示例代码如下。 if="{{condition}}">你好,欢迎学习微信小程序 使用 wx: elif 和wx: else来添加一个else代码块。 if="{{length>5}}">长度大于5 elif="{{length>2}}">长度大于2 else>长度为3 //index.js Page({ data: { length: 8 } }) 当length=8时,输出结果为长度大于5,执行第一个判断条件。 3.5.2使用blockwx: if判断多个组件 因为wx: if是一个控制属性,需要将它添加到一个组件上。 但是如果我们想一次性判断多个组件,可以使用一个<block/>标签将多个组件包装起来,并在上边使用wx: if控制属性,示例代码如下。 if="{{true}}"> 3.6微信小程序列表渲染 我们经常需要将一些内容以列表的形式显示出来,这就要用到微信小程序的列表渲染。 如果只是将数据以列表的形式显示出来,那么直接一行行显示就行。 但如果数据的显示是动态的,这种方式就不能解决问题了。 微信小程序提供了wx: for的方式来解决这个问题。 3.6.1使用wx: for列表渲染单个组件 在组件上使用wx: for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。 默认数组当前项的下标变量名为index,数组当前项的变量名为item,示例代码如下。 for="{{array}}"> {{index}}: {{item.name}} //index.js Page({ data: { array: [{ name: 'tom', },{ name: 'kevin' }] } }) 使用wx: for-item可以指定数组当前元素的变量名,使用wx: for-index可以指定数组当前下标的变量名,示例代码如下。 for="{{array}}"wx: for-index="idx"wx: for-item="itemName"> {{idx}}: {{itemName.name}} 3.6.2使用blockwx: for列表渲染多个组件 wx: for应用在某一个组件上,但是当想渲染一个包含多节点的结构块时,wx: for就需要应用在 for="{{[1,2,3]}}"> 3.6.3使用wx: key指定唯一标识符 如果列表中项目的位置会动态改变,或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 中的输入内容, key 来指定列表中项目的唯一标识符。 wx: key 的值以下列两种形式提供。 如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。),表格前后没有换行符
),表格前后带有换行符
和 ) ) )