中国网站建设市场分析报告,f006网站建设,一个高端网站设计,合肥做网站123cms微信小程序模板与配置 1.WXML 模版语法1.1 数据绑定1.2事件绑定1.3 条件渲染1.4 列表渲染 2. WXSS 模版样式2.1 WXSS 和 CSS的关系2.2 rpx2.3 样式导入2.4 全局样式和局部样式 3. 全局配置3.1 Window3.2 tabBar 1.WXML 模版语法
1.1 数据绑定 数据绑定的基本原则 在data中定义… 微信小程序模板与配置 1.WXML 模版语法1.1 数据绑定1.2事件绑定1.3 条件渲染1.4 列表渲染 2. WXSS 模版样式2.1 WXSS 和 CSS的关系2.2 rpx2.3 样式导入2.4 全局样式和局部样式 3. 全局配置3.1 Window3.2 tabBar 1.WXML 模版语法
1.1 数据绑定 数据绑定的基本原则 在data中定义数据在WXML中使用的数据 在data中定义页面的数据 在页面对应的.js文件中把数据定义到data对象中即可 Page({data: {//字符串类型的数据info: inti data,//数组类型的数据msgList: [{msg: hello}, {msg: world}]}
})Mustache语法的格式 把data中的数据绑定到页面中渲染使用Mustache语法双大括号将变量包起来即可 !-- 语法格式 --
view{{要绑定的数据名称}}/viewMustache语法的应用场景 绑定内容绑定属性运算三元运算、算数运算等 动态绑定内容 Page({data: {//字符串类型的数据info: inti data}
})view{{ info }}/view动态绑定属性 Page({data: {imgSrc:路径}
})image src{{imgSrc}}/image三元运算 Page({data: {randomNumber: Math.random() * 10 //100以内的随机数}
})view{{randomNumber 5 ? 随机数字大于或等于5 随机数小于5}}/view算数运算 Page({data: {randomNumber: Math.random().toFixed(2) //生成一个带两位小数的随机数}
})view生成100以内的随机数{{randomNumber * 100}}/view1.2事件绑定
事件渲染层到逻辑层的通讯方式。通过时间可以将用户在渲染层产生的行为反馈到逻辑层进行业务的处理。 小程序常用的事件
类型绑定方式事件描述tapbindtap或bind:tap手指触摸后马上离开inputbindinput或bind:input文本块的输入事件changebindchange或bind:change状态改变时触发 事件对象的属性列表 当事件回调触发的时候会收到一个事件对象 event它的属性为 属性类型说明typeString事件类型timeStampInteger页面打开到触发事件所经过的毫秒数targetObject触发事件的组件的一些属性值集合currentTargetObject当前组件的一些属性值集合detailObject额外信息touchesArray触摸事件当前停留在屏幕中的触摸点信息的数组changedTouchesArray触摸事件当前变化的触摸点信息的数组 target 和 currentTarget的区别 target 是触发该事件的源头组件而currentTarget是当前事件所绑定的组件。 bindtap语法格式 通过bindtap可以为组件绑定tap触摸事件 button typeprimary bindtabtnTapHandler按钮/button在页面的.js文件中定义对应的事件处理函数事件参数通过形参 event简写 e来接收 Page({binTapHandler(e){ //按钮的 tap 事件处理函数console.log(e) //事件参数对象 e}
})事件在处理函数中为 data中的数据赋值 通过调用 this.setData(dataObject) 方法可以给页面 data中的数据重新赋值 Page({data:{count: 0},//修改 count 的值changeCount(){this.setData({count: this.data.count 1})}
})事件传参 小程序不能在绑定事件的同时为事件处理函数传递参数 而是使用 data-* 自定义属性传参 * 代表的是参数名字 button bidtapbtnHandler data-info{{2}}事件传参/button通过 event.target.dataset.参数名即可获取到具体参数值 Page({binTapHandler(event){ //按钮的 tap 事件处理函数//dataset 是一个对象包含 data-* 传递的参数项console.log(event.target.dataset) //通过 dataset 可以访问到具体参数的值console.log(event.target.dataset.info) }
})bindinput的语法格式 通过bindinput可以为文本框绑定输入事件 input bindinputinputHandler/input.js 文件中定义事件处理函数 inputHandler(e){//e.detail.value 是变化过后文本框最新的值console.log(e.detail.value)
}文本框和data之间的数据同步 定义数据 Page({data:{msg: 你好}
})渲染结构 input value{msg} bindinputiptHandler/input美化样式: input{/*添加 1 像素宽、实线、颜色为#ee(浅灰色)的边框*/border: 1px solid #eee;/*输入框内部内容与边框之间的距离为 5 像素*/padding: 5px;/*输入框与其他元素之间的外部间距为 5 像素*/margin: 5px;/*输入框的边框添加圆角效果半径为3像素*/border-radius: 3px;
}绑定input事件处理函数 //文本框内容改变的事件
iptHandler(e){this.setData({//通过 e.detail.value 获取文本框的最新数值msg: e.detail.valu})
}1.3 条件渲染 wx:if 小程序中使用 wx:if“{condition}” 判断是否渲染该代码块 view wx:if{{condition}}True/viewwx:elif 和 wx:else 来天剑 else 判断 view wx:if{{condition}}True/view
view wx:elif{{condition}}True/view
view wx:else{{condition}}True/view结合block使用 wx:if 要一次性控制多个组件的展示与隐藏可以使用一个 block/block标签将多个组件包装起来在 block标签上使用 wx:if 控制属性 block不是一个组件只是一个包裹性的容器不会在页面中做任何渲染 block wx:if{{condition}}view view1 /viewview view2 /view
/blockhidden在小程序中直接使用 hidden“{{condition}}” 也可以控制元素的显示与隐藏 vilew hidden{{condition}}条件为 true 隐藏为false 显示/vilewwx:if 与 hidden 的对比 运行方式不同 wx:if 以动态创建和移除元素的方式控制元素的展示与隐藏hidden以切换样式的方法display:none/block;,控制元素的显示与隐藏 使用建议 频繁切换用 hidden控制条件复杂使用 wx:if 搭配 wx:elif、wx:else 进行展示与隐藏的切换
1.4 列表渲染 wx:for通过wx:for可以根据指定的数组循环渲染重复的组件结构 默认的索引和当前循环项用 index与item view wx:for{{array}}索引是{{index}} 当前项是{{item}}
/view手动指定索引与当前项的变量名* 使用 wx:for-index 指定当前索引项的索引的变量名 使用 wx:for-item 指定当前项的变量名 view wx:for{{array}} wx:for-indexidx wx:for-itemitemName索引是{{idx}} 当前项是{{itemName}}
/viewwx:key 的使用 小程序在实现列表渲染时为渲染出来的列表指定唯一的key值从而提高渲染的效率 //data数据
data:{userList:[{id: 1, name: 小红},{id: 2, name: 小黄},{id: 3, name: 小白}]
}//wxml 结构
view wx:for{{userList}} wx:keyid{{item.name}}/view2. WXSS 模版样式
WXSSWeiXin StyleSheets是一套样式语言用于美化WXML的组件样式。
2.1 WXSS 和 CSS的关系
WXXSS具有CSS大部分特性通用的选择器通用的样式规则同时还进行了扩充以及修
rpx 尺寸单位import样式导入
2.2 rpx
rpx 尺寸单位 rpxresponsive pixel用来解决屏适配的尺寸单位 rpx的实现 rpx把所有设备的屏幕在宽度上等分为 750 份 rpx 与 px 之间的单位换算 在iPhone6上屏幕宽度为 375px共有 750个物理像素等分为 750rpx 750rpx 375px 750 物理像素1rpx 0.5px 1 物理像素
2.3 样式导入
使用 WXSS提供的import语法可以导入外联的样式表 import的语法格式 import后跟需要导入的外联式表的相对路径用 ; 表示语句结束。 improt 路径;
.middle-p{padding:15px;
}2.4 全局样式和局部样式 全局样式定义在 app.wxss 中的样式为 全局样式作用于每一个页面。 局部样式在页面的 .wxss文件中定义的样式为 局部样式只作用与当前页面 当局部样式和全局样式冲突时根据就近原则局部样式会覆盖全局样式当局部样式的权重大于或等于全局样式的权重时才会覆盖全局样式
3. 全局配置
小程序跟目录下的app.json文件是小程序的全局配置文件。常用的配置项
pages记录当前小程序所有页面的存放路径window全局设置小程序窗口的外观tabBar设置小程序底部的 tabBar效果style是否用新版的组件样式
3.1 Window window 节点常用的配置项 属性名类型默认值说明navigationBarTitleTextString字符串导航栏标题文字内容navigationBarBackgroundColorHexColor#000000导航栏背景颜色navigationBarTextStyleStringwhile导航栏标题颜色仅支持 black/whilebackgroundColorHexColor#ffffff窗口的背景颜色backgroundColorStringdark下来 loading的样式仅支持 dark/lightenablePullDownRefreshBooleanfalse是否全局开启下来刷新onReachBottomDistanceNumber50页面上拉触底事件触发时距页面底部距离单位为 px 导航栏的标题 步骤app.json window navigationBarTitleText 导航栏的背景色 步骤app.json window navigationBarBackgroundColor 导航栏的标题颜色 步骤app.json window navigationBarTextStyle 全局开启下拉刷新功能下拉刷新时移动端的专有名词指的是通过手指在屏幕上的下拉滑动操作从而重写加载页面数据的行为。 步骤app.json window enablePullDownRefresh 的值设置为 true 下拉刷新时窗口的背景色 步骤app.json window backgroundColor 指定 16进制的颜色值 下拉刷新时 loading 的样式当全局开启下拉刷新功能之后默认窗口的 loading样式为白色 步骤app.json window backgroundTextStyle 指定 dark 值 上拉触底的距离是移动端的专有名词通过手指在屏幕上的上啦滑动操作从而加载更多数据的行为默认距离为 50px 步骤app.json window onReachBottomDistance 设置新的数组
3.2 tabBar
tabBar是移动端应用常见的页面效果用于使用多页面的快速切换。小程序通常将其分为底部 tabBar 顶部 tabBartabBar只能配置最少 2 个、最多5个tab页签当渲染顶部 tabBar是不延时 icon只显示文本
tabBar的6个组成部分
backgroundColortabBar 的背景色selectedIconPath选中时的图片路径borderStyletabBar 上边框的颜色iconPath未选中时的图片路径selectedColortab上的文字选中时的颜色colortab上文字的默认未选中颜色 tabBar 节点的配置项
属性类型必填默认值描述positionString否bottomtabBar的位置仅支持 bottom/topborderStyleString否blacktabBar上边框的颜色仅支持 black/whitecolorHexColor否tab上文字的默认未选中颜色selectedColorHexColor否tab上的文字选中时的颜色backgroundColorHexColor否tabBar的背景色listArray是tab页面的列表最少2个最多5个tab
tab项的配置选项
属性类型必填描述pagePathString是页面路径页面必须在pages中预先定义textString是tab上显示的文字iconPathString否未选中时的图标路径当postion为top时不显示 iconselectedIconPathString否选中时的图标路径当postion为top时不显示 Icon
