微信小程序开发(四).docVIP

. 资料. 微信小程序开发(四) 第三章 表现层 页面文件:page.wxml 数据绑定:bind data + +普通绑定 view{{data}}/view +三元运算 view{{flag?true:false}}/view +算数运算 view{{a+b}}+{{c}}/view +字符运算 view{{“hello”+” world”}}/view +对象属性 view{{obj.property}}/view +数组 view wx:for-items=”{{array}}”{{item}}/view +逻辑 view wx:if=”{{a5}}”/view +混合 template is=”otmp” data=”{{…obj1,obj2,a,}}” /template 条件渲染:condition render + +条件渲染语法 wx.if wx.elif wx.else block wx:if +代码示例 view wx.if=”{{type==’web’}}”{{web}}/view view wx.elif=”{{type==’app’}}”{{app}}/view view wx.else=”{{type==’other’}}”{{other}}/view block wx:if=”{{condition}}”/block 列表渲染:list render + +普通列表 view wx:for=”{{array}}” {{item}} /view +列表嵌套 view wx:for=”{{ary}}” wx:for-item=”i” view wx:for=”{{ary}}” wx:for-item=”j” view{{i*j}}/view /view view 模板渲染:template render + +模板定义 template name=msgItem view text {{index}}: {{msg}} /text text Time: {{time}} /text /view /template +模板使用 template is=msgItem data={{...item}}/ 元素事件:element event 事件种类: NO NO TYPE BIND_METHOD SAMPLE 1 冒泡 Bind+xxxx touchStart,touchMove,touchEnd,tap,longTap 2 不冒泡 Catch+xxxx Submit,input,scroll 事件对象：baseEvent,customerEvent,touchEvent 对象 对象 NO 属性 类型 说明 备注 baseEvent 1 type string 类型 2 timeStamp integer 时间戮 3 target obj 目标 Id,tagName,dataSet 4 currentTarget obj 当前目标 Id,tagName,dataSet cusEvt 5 detail obj 明细 user define touchEvt 6 touches array 接触 Touch::identifer,px,py,cx,cy 7 changedTouches array 变动接触 Touch::identifer,px,py,cx,cy 事件绑定实例： view bindTap=”event-handler”/view 文件引用:include file 引用种类： NO NO TYPE DESC SAMPLE 1 import 引用模板 import src=”template.wxml”/ 2 include 引用页面 include src=”page.wxml”/ 样式文件:page.wxss 引入新单位: Rpx:responsive pixel:自适应设备长宽单位. 导入外部样式文件: @import “out.wxss” 内联样式: 通过style,class属性来实现样式改变. 选择器支持: 目前支持的选择器有:ID.CLSS,ELEMENT,::AFTER,::BEFORE五类。 全局和局部样式: 全局样式:定义在文件[APP.WXSS]中的样式。 局部样式:定义在文件[PAGE.WXSS]中的样式. 组件:compent