手机微网站平台登录入口,苏州相城区最新通告,安阳青峰网站建设,网站如何做分布式三、模板与配置
1、WXML模板语法-数据、属性绑定
讲解#xff1a;
1-1、数据绑定的基本原则
在data中定义数据
Page({data: {//这里是你需要定义的数据}
})在WXML中使用数据
{{ 你定义的数据 }}1-2、在data中定义页面的数据
在页面对应的.js文件中#xff0c;把数据定…三、模板与配置
1、WXML模板语法-数据、属性绑定
讲解
1-1、数据绑定的基本原则
在data中定义数据
Page({data: {//这里是你需要定义的数据}
})在WXML中使用数据
{{ 你定义的数据 }}1-2、在data中定义页面的数据
在页面对应的.js文件中把数据定义到data对象中即可
1-3、 Mustache 语法的格式如何使用定义的数据
把data中的数据绑定到页面中渲染使用Mustache语法双大括号将变量包起来即可。
1-4、Mustache语法的主要应用场景如下 绑定内容 绑定属性 运算三元运算、算数运算等 页面的数据 Page({data: {// 字符串类型的数据info: 我定义的字符串数据,imgSrc: /images/1.png,randomNum: Math.random() * 100 ,//生成 100 以内的随机数randomNum2: Math.random().toFixed(2) //生成一个带两位小数的随机数}
})页面的结构 !-- 绑定内容 --
view{{ info }}/view
!-- 绑定属性 --
image src{{imgSrc}}/image
!-- 三元运算 --
view{{ randomNum 50? 随机数大于或等于50 : 随机数小于50 }}/view
!-- 算数运算 --
view生成100以内的随机数{{randomNum2 * 100}}/view效果图
2、WXML模板语法-事件绑定
讲解
2-1、什么是事件
事件是渲染层到逻辑层 的通讯方式。通过事件可以将用户在渲染层产生的行为反馈到逻辑层进行业务的处理 2-2、小程序中常用的事件
类型绑定方式事件描述适用情景注意点tapbindtap 或 bind:tap手指触摸后马上离开类似于 HTML 中的 click 事件。适用于按钮点击、触发某个操作等场景。比如点击按钮进行页面跳转、触发弹窗等。在快速点击时可能会出现多次触发的情况需要注意进行防抖或节流处理。同时确保按钮等可触发 tap 事件的元素有明确的可点击区域和视觉反馈。inputbindinput 或 bind:input文本框的输入事件。当需要实时获取用户在文本框中输入的内容时使用。比如搜索框实时搜索、表单输入实时验证等。需要注意处理输入内容的合法性和格式规范避免出现错误数据。同时大量的输入事件可能会影响性能可根据实际情况进行优化。changebindchange 或 bind:change状态改变时触发。适用于选择框、开关等组件状态改变时的情况。比如选择下拉菜单选项、切换开关状态等。不同组件的 change 事件触发时机可能不同需要仔细了解其触发规则。同时注意处理状态改变后的逻辑确保数据的一致性。
2-3、事件对象的属性列表
当事件回调触发的时候会收到一个事件对象 event它的详细属性有
属性类型说明适用情景注意点typeString事件类型。用于区分不同类型的事件以便在代码中针对特定事件类型进行处理。确保正确识别和处理不同的事件类型避免因类型判断错误导致错误的逻辑处理。timeStampInteger页面打开到触发事件所经过的毫秒数。可以用于记录事件发生的时间顺序或者进行性能分析等。注意时间戳的精度和准确性可能会受到系统时钟等因素的影响。targetObject触发事件的组件的一些属性值集合。获取触发事件的组件的详细信息例如组件的 ID、类名等以便进行特定的操作。确保正确解析和使用目标组件的属性值避免因属性获取错误导致逻辑错误。currentTargetObject当前组件的一些属性值集合。在事件冒泡或捕获阶段可以区分当前处理事件的组件和触发事件的组件。理解事件传播机制正确区分 target 和 currentTarget 的区别避免混淆。detailObject额外的信息。提供特定事件的额外详细信息例如表单提交事件中的表单数据等。根据具体事件类型正确解析和使用 detail 属性中的信息。touchesArray触摸事件当前停留在屏幕中的触摸点信息的数组。在触摸事件中用于获取触摸点的信息例如坐标、压力等可用于实现触摸交互效果。注意触摸点信息的准确性和实时性处理好多个触摸点的情况。changedTouchesArray触摸事件当前变化的触摸点信息的数组。在触摸事件中用于获取触摸点的信息例如坐标、压力等可用于实现触摸交互效果。注意触摸点信息的准确性和实时性处理好多个触摸点的情况。
2-4、target 和currentTarget的区别
target是触发该事件的源头组件而currentTarget是当前事件所绑定的组件。如 点击内部按钮时点击事件以冒泡的方式向外扩散也会触发外层 view 的 tap 事件处理函数。
属性区别适用情景注意点target指触发事件的原始组件即事件最初发生的那个组件。在处理复杂的组件嵌套结构中的事件时用于确定事件的具体来源。要清楚理解事件是由哪个具体组件触发的避免混淆。currentTarget指当前正在处理事件的组件。在事件的传播过程中currentTarget 会随着事件的冒泡或捕获阶段而变化。在处理复杂的组件嵌套结构中的事件时了解当前处理事件的位置。理解事件传播机制避免错误地使用 currentTarget。
2-5、小程序中 tap 事件及bind:tap/bindtap用法
在小程序中不存在 HTML 中的onclick鼠标点击事件而是通过 tap 事件来响应用户的触摸行为。
使用bind:tap/bindtap绑定 tap 触摸事件
button typeprimary bindtapbtnTapHandler/button在.js 文件中定义事件处理函数 在页面的.js文件中定义对应的事件处理函数事件参数通过形参event一般简写成e来接收
Page({btnTapHandler(e) {// 按钮的 tap 事件处理函数console.log(e);}
});当点击按钮之后在控制台可以看到 2-6、在事件处理函数中为 data 中的数据赋值
通过调用 this.setData(dataObject)方法可以给页面 data 中的数据重新赋值。
.wxml
!-- 在事件处理函数中为 data 中的数据赋值 --
viewcount的值{{ count }}button typeprimary bind:tapchangeCountcount 1/button
/view
.js
//在事件处理函数中为 data 中的数据赋值
Page ({data: {count: 0},//修改 count 的值 changeCount() {this.setData({//赋值的方法count: this.data.count 1})}
})2-7、事件传参
小程序中的事件传参比较特殊不能在绑定事件的同时为事件处理函数传递参数。
vue代码不能正常传工作的代码
!-- 事件传参
vue代码不能正常传工作的代码 --
button typeprimary bind:tapbtnHandler(123)事件传参/button正确方式
可以为组件提供 data-* 自定义属性传参其中 *代表的是参数的名字如
!-- 正确形式 --
button bind:tapbtnHandler data-info{{ 2 }}事件传参/button
!-- info 会被解析为 参数的名字 数值 2 会被解析为 参数的值 --info 会被解析为 参数的名字 数值 2 会被解析为 参数的值;
在事件处理函数中通过 event.target.dataset.参数名 即可获取到具体参数值
.js
// 获取参数btnHandler(event) {//dataset 是一个对象,包含了所有通过 data-* 传递过来的参数项console.log(event.target.dataset)//通过 dataset 可以访问到具体参数的值console.log(event.target.dataset.info)}2-8、bindinput的语法格式
在小程序中通过 input 事件 来响应文本框的输入事件语法格式
通过 bind:input/bindinput可以为文本框绑定输入事件
.wxml
!-- bindinput的语法格式 --
input bindinputinputHandler placeholder请输入/input.js
// bindinput的语法格式
Page ({inputHandler(e) {//e.detail.value 是变化过后文本框文本框最新的值console.log(e.detail.value)}
})效果图: 2-9、实现 文本框 和 data 之间的数据同步
实现步骤定义数据渲染结构美化样式绑定 input 事件处理函数
定义数据.js
//实现 文本框 和 data 之间的数据同步
Page ({data: {msg: 你好}
})渲染结构(.wxml)
!-- 实现 文本框 和 data 之间的数据同步 --
input value{{ msg }} bindinputiptHandler/input美化样式(.wxss):
/* 实现 文本框 和 data 之间的数据同步 */
input {border: 1px solid #eee;padding: 5px;margin: 5px;border-radius: 3px;
}绑定 input 事件处理函数.js
iptHandler(e) {this.setData({//通过 e.detail.value 获取文本框最新的值 msg: e.detail.value})}效果图 3、WXML模板语法-条件渲染
3-1、wx:if
在小程序中使用 wx:if{{condition}}(condition即是控制条件)来判断是否需要渲染在页面显示该代码块
!-- **************WXML模板语法-条件渲染*************** --
!-- wx:if --
view wx:if{{condition}} true /view也可以利用wx:elif 和 wx:else来添加else判断如
效果图 .js
//\**************WXML模板语法-条件渲染***************
Page ({data: {type: 1}
}).wxml
!-- **************WXML模板语法-条件渲染*************** --
!-- wx:if --
!-- view wx:if{{condition}} true /view --
!-- 示例 --
view wx:if{{ type 1}} 男 /view
view wx:elif{{ type 2}}女/view
view wx:else 保密/view
【解释】
代码片段说明涉及语法及作用.js部分//\**************WXML模板语法-条件渲染***************这是一段 JavaScript 文件中的注释内容用于对下方代码的功能进行简要说明告知后续查看代码的人这里主要展示的是关于 WXML 模板语法中的条件渲染相关内容在 JavaScript 端的设置。注释语法在 JavaScript 中//用于单行注释编译器在执行代码时会忽略注释行内容不影响代码的实际运行效果。Page ({ data: { type: 1 } })这是微信小程序中通过Page函数创建页面实例的代码部分。在Page函数的参数对象中通过data属性定义了一个名为type的数据项其值为1。这个数据将被用于页面的 WXML 模板视图层中的条件渲染判断依据。- Page是微信小程序框架中的核心函数用于创建一个页面实例它接受一个对象作为参数该对象可配置页面的多种行为和特性其中data属性用于设置页面的数据。 - data属性这里通过对象字面量形式在data属性下定义了type数据项在后续 WXML 模板的条件渲染中会根据type的值来决定显示不同的内容。.wxml部分!-- **************WXML模板语法-条件渲染*************** --这是一段 WXML 文件中的注释内容用于对下方代码的功能进行简要说明告知后续查看代码的人这里主要展示的是关于 WXML 模板语法中的条件渲染相关内容。注释语法在 HTML 以及微信小程序的 WXML 中!--和--之间的内容为注释部分编译器会忽略注释内容不影响代码的实际执行效果。!-- wx:if -- !-- view wx:if{{condition}} true /view --这是一段示例代码的注释部分展示了wx:if条件渲染语句的基本格式其中{{condition}}是一个占位符表示应该在这里放置一个条件表达式当条件满足时对应的view元素才会被显示出来。注释展示了wx:if的基本语法结构用于后续实际示例的理解参照。!-- 示例 -- view wx:if{{ type 1}} 男 /view在这个示例中通过wx:if属性结合数据绑定{{ type 1}}来进行条件渲染。当在页面的 JavaScript 部分定义的type数据的值等于1时这个view元素会被显示出来并且显示的内容为 “男”。- wx:if是 WXML 模板语法中的条件渲染属性它接受一个条件表达式作为值只有当条件表达式的结果为true时带有该属性的元素才会被显示出来。 - {{ type 1}}这是通过 Mustache 语法进行的数据绑定与条件判断的结合将 JavaScript 部分定义的type数据与1进行比较作为wx:if的条件表达式。view wx:elif{{ type 2}}女/view这是在wx:if条件不满足的情况下继续通过wx:elif属性进行进一步的条件判断。当type数据的值等于2时这个view元素会被显示出来并且显示的内容为 “女”。- wx:elif是 WXML 模板语法中在wx:if之后用于进一步条件判断的属性它的使用方式与wx:if类似接受一个条件表达式作为值当wx:if条件不满足且自身条件表达式结果为true时带有该属性的元素才会被显示出来。 - {{ type 2}}同样是通过 Mustache 语法进行的数据绑定与条件判断的结合作为wx:elif的条件表达式。view wx:else 保密/view当wx:if和wx:elif的条件都不满足时这个view元素会被显示出来显示的内容为 “保密”。它提供了一种默认的情况处理方式用于在前面所有条件都不成立时展示相应的内容。- wx:else是 WXML 模板语法中用于处理前面wx:if和wx:elif条件都不满足情况的属性当处于这种情况时带有该属性的元素会被显示出来无需额外的条件表达式。
3-2、结合block使用 wx:if
如果要一次性控制多个组件的展示与隐藏可以使用一个block /block标签将多个组件包装起来并在block 标签上使用 wx:if 控制属性。
如
!-- 结合block使用 wx:if --
block wx:if{{true}}view view a /viewview view b /view
/block注意: block并不是一个组件它只是一个包裹性质的容器不会在页面中做任何渲染。
3-3、hidden
在小程序中直接使用 hidden{{ condition }}也能控制元素的显示与隐藏
.wxml
!-- hidden --
view hidden{{ flag }} 条件为 true 隐藏 条件为 false 显示/view.js
// hidden
Page({data:{flag: false}
})效果图 3-4、wx:if 和hidden的对比
对比项wx:ifhidden运行方式通过动态创建和移除元素来控制显示与隐藏。当条件为真时创建对应的元素并添加到页面结构中当条件为假时从页面结构中移除该元素。这意味着在条件变化时页面的 DOM 结构会发生实际的改变。通过切换样式属性来控制显示与隐藏。本质上是修改元素的 CSS 样式将其 display 属性在 none 和 block 之间切换。当设置为 hidden 时相当于 display: none元素在页面上不可见但仍然存在于 DOM 结构中当 hidden 属性为 false 时相当于 display: block元素可见。使用场景建议当控制条件较为复杂需要根据多种不同的情况进行显示与隐藏的切换时使用 wx:if 搭配 wx:elif、wx:else 可以清晰地表达不同条件下的显示逻辑。例如根据多个不同的状态变量来决定一个元素是否显示这种情况下使用 wx:if 可以更直观地实现复杂的条件判断。当需要频繁切换元素的显示与隐藏状态时使用 hidden 更为合适。因为 wx:if 的动态创建和移除元素的方式相对开销较大而 hidden 只是简单地切换样式性能开销相对较小。例如在一些需要频繁响应用户交互而切换显示状态的场景中使用 hidden 可以提高性能。
4、WXML模板语法-列表渲染
4-1、wx:for
通过 wx:for 可以根据指定的数组循环渲染重复的组件结构语法实例如下
!-- WXML模板语法-列表渲染
wx:for --
view wx:for{{ array }}索引是: {{ index }} 当前项是:{{ item }}
/view默认情况下当前循环项的索引用index表示当前循环项用item表示。
如
.js
// WXML模板语法-列表渲染
// wx:for
Page({data: {arr1 :[ test1,test2,test3,test4]}
})
.wxml
!-- WXML模板语法-列表渲染
wx:for --
!-- view wx:for{{ array }}索引是: {{ index }} 当前项是:{{ item }}
/view --
view wx:for{{ arr1 }}索引是 : {{ index }} , item 项是 : {{ item }}
/view效果图 4-2、手动指定索引和当前项的变量名按个人习惯需求使用实际开发用到的较少
使用wx:for-index可以指定当前循环项的索引的变量名使用wx:for-item可以指定当前项的变量名语法格式
!-- 手动指定 索引 和 当前项的变量名 --
view wx:for{{array}} wx:for-indexidx wx:for-itemitemName索引是 : {{ idx }} , 当前项是 {{ itemName }}
/view如
.js
// WXML模板语法-列表渲染
// wx:for
Page({data: {arr1 :[ test1,test2,test3,test4],// 手动指定 索引 和 当前项的变量名arr2 :[zhang3,li4,wang5,zhao6]}
}).wxml
!-- 手动指定 索引 和 当前项的变量名 --
!-- view wx:for{{array}} wx:for-indexidx wx:for-itemitemName索引是 : {{ idx }} , 当前项是 {{ itemName }}
/view --
view wx:for{{ arr2 }} wx:for-indexid wx:for-itemstudent第{{id 1}} 名学生的姓名是: {{student}}
/view
效果图 4-3、wx:key的使用
类似于 Vue 列表渲染中的 :key小程序在实现列表渲染时也建议渲染出来的列表项指定唯一的 key值从而提高渲染的效率语法格式如下
!-- wx:key的使用 --
!-- 其中 wx:key 的值是索引,一般使用 id ,根据实际情况使用 --
view wx:for{{array}} wx:keyid按需编码
/view如
.js
//wx:key的使用
Page ({data: {userList:[{id: 1, name: zhang3},{id: 2, name: li4},{id: 3, name: wang5},{id: 4, name: zhao6}]}
}).wxml
!-- wx:key的使用 --
view wx:for{{userList}} wx:keyid{{item.name}}
/view效果图 5、WXSS模板样式
5 - 1、什么是WXSS
WXSS全称为WeiXin Style Sheets它在微信小程序的开发领域中扮演着至关重要的角色是一套专门设计的样式语言。
在微信小程序的架构里我们有WXMLWeiXin Markup Language它主要负责构建小程序页面的结构定义了各个组件在页面中的布局和排列方式等。而WXSS的作用就是对这些由WXML所定义出来的组件样式进行美化和修饰从而让小程序的页面呈现出更加美观、舒适且符合设计需求的视觉效果。
它与我们在传统网页开发中所熟知的CSSCascading Style Sheets有着诸多相似之处。就如同CSS可以通过各种属性和规则来设定网页元素的样式比如设置文字的字体、大小、颜色调整元素的大小、位置、背景颜色等等WXSS也具备类似的功能机制。它能够针对WXML中的各类组件如按钮、文本框、图片展示区域等精确地设置它们的外观样式。
例如我们可以利用WXSS来规定一个按钮组件的背景色为鲜艳的红色文字颜色为醒目的白色并且设置其边框的样式为带有一定弧度的圆角边框同时还能调整按钮的大小以及在页面中的位置布局等。通过这些样式设置使得该按钮在小程序页面中能够更加突出、吸引人并且与整个页面的设计风格相匹配。
总之WXSS作为微信小程序开发中不可或缺的样式语言为打造出精致、美观且用户体验良好的小程序页面提供了强大的样式设定手段其重要性不言而喻。
5-2、WXSS 和CSS的关系
比较项WXSSCSS相似之处可通过各种属性和规则设定页面元素样式如设置文字字体、大小、颜色调整元素大小、位置、背景颜色等。功能机制类似能针对组件进行精确外观样式设置。可设定网页元素样式。扩展特性1、rpx尺寸单位可根据不同设备屏幕宽度自适应调整。1、 import样式导入方便导入外部样式文件实现样式模块化管理。无此特性。选择器通用的选择器。通用的选择器。样式规则通用的样式规则如盒模型、浮动、定位等。通用的样式规则如盒模型、浮动、定位等。
6、WXSS模板样式-rpx
6-1、什么是rpx尺寸单位
描述详情名称rpxresponsive pixel所属微信小程序独有的尺寸单位作用解决屏幕适配问题根据不同设备屏幕宽度自适应调整在小屏幕手机和大屏幕平板电脑等不同设备上能让小程序呈现出较为理想的布局和显示效果提高用户体验确保在不同设备上都有一致且舒适的视觉感受。
6-2、rpx的实现原理
描述详情扩充内容名称rpxresponsive pixel微信小程序特有的尺寸单位在屏幕适配方面发挥着关键作用。所属微信小程序独有的尺寸单位只在微信小程序中使用区别于其他开发环境中的尺寸单位。实现原理将所有设备屏幕宽度等分为 750 份当前屏幕总宽度为 750 rpx。在不同设备上小程序自动将 rpx 换算成对应像素单位渲染。在较小设备上1rpx 所代表的宽度较小在较大设备上1rpx 所代表的宽度较大。这样的设计确保了小程序在各种不同尺寸的设备上都能呈现出良好的布局和视觉效果无需开发者针对不同设备进行复杂的尺寸调整极大地提高了开发效率和用户体验。
6-3、rpx与 px之间的单位换算
设备rpx 与 px 的关系开发举例说明扩充内容iPhone51rpx 0.42px1px 2.34rpx无在 iPhone5 上由于屏幕特性rpx 与 px 的换算比例使得开发者在进行尺寸转换时需要注意精度。这种换算关系确保了小程序在 iPhone5 上也能较好地实现屏幕适配尽管屏幕尺寸相对较小但通过合理的换算可以让小程序的界面在该设备上呈现出合适的布局和视觉效果。iPhone61rpx 0.5px1px 2rpx在 iPhone6 上如果要绘制宽 100px高 20px 的盒子换算成 rpx 单位宽高分别为 200rpx 和 40rpx。iPhone6 的屏幕宽度特性使得其成为微信小程序开发中常用的视觉稿标准参考设备之一。在这个设备上rpx 与 px 的换算较为直观方便开发者进行快速的尺寸转换。这种换算关系有助于确保小程序在 iPhone6 上的显示效果既符合设计要求又能适应不同的屏幕尺寸变化为用户提供良好的交互体验。iPhone6 Plus1rpx 0.552px1px 1.81rpx无iPhone6 Plus 拥有更大的屏幕尺寸其 rpx 与 px 的换算比例与 iPhone6 有所不同。开发者在针对 iPhone6 Plus 进行开发时需要根据这个特定的换算关系来调整界面元素的尺寸以确保小程序在该设备上能够完美适配充分利用其大屏幕的优势同时避免出现布局不合理或元素显示异常的情况。官方建议开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。无选择 iPhone6 作为视觉稿标准是因为其在市场上具有一定的代表性屏幕尺寸适中能够较好地平衡不同设备之间的差异。以 iPhone6 为标准进行设计可以在一定程度上简化开发过程提高开发效率同时确保小程序在大多数设备上都能有较好的显示效果。
7、WXSS模板样式-样式导入
7-1、什么是样式导入
内容说明适用情景注意点样式导入概念使用 WXSS 提供的 import 语法可以导入外联的样式表。当多个页面或组件需要共享相同的样式规则时可以使用样式导入功能避免重复编写代码。确保导入的样式表路径正确并且注意样式的优先级问题避免出现样式冲突。
7-2、import 的语法格式
import 后跟需要导入的外联样式表的相对路径用 ; 表示语句结束。
【如】 首先在项目的根目录新建文件夹common 然后在common文件夹中定义一个公共样式表common.wxss 按需编码样式表 /* common/commmon.wxss */
.userName {color: skyblue;
}在需要导入外联样式表的.wxss文件中导入 /* index.wxss中导入外联样式表 */
import /common/common.wxss;在对应的.wxml文件中使用 !-- 使用类选择器选择公共样式表中的类名 --
view wx:for{{userList}} wx:keyid classuserName{{item.name}}
/view效果图
