微信小程序开发(四)

微信小程序开发(四)第三章 表现层第1节 页面文件:page.wxml1. 数据绑定:bind data+普通绑定data+三元运算flag?true:false+算数运算a+b+c+字符运算“hello”+” world”+对象属性perty+数组item+逻辑5”+混合2. 条件渲染:condition render+条件渲染语法1. wx.if2. wx.elif3. wx.else4. block wx:if+代码示例webappother3. 列表渲染:list render+普通列表item+列表嵌套i*j4. 模板渲染:template render+模板定义 index: msg Time: time +模板使用5. 元素事件:element event事件种类:NOTYPEBIND_METHODSAMPLE1冒泡Bind+xxxxtouchStart,touchMove,touchEnd,tap,longTap2不冒泡Catch+xxxxSubmit,input,scroll事件对象：baseEvent,customerEvent,touchEvent对象NO属性类型说明备注baseEvent1typestring类型2timeStampinteger时间戮3targetobj目标Id,tagName,dataSet4currentTargetobj当前目标Id,tagName,dataSetcusEvt5detailobj明细touchEvt6touchesarray接触Touch:identifer,px,py,cx,cy7changedTouchesarray变动接触Touch:identifer,px,py,cx,cy事件绑定实例：6. 文件引用:include file引用种类：NOTYPEDESCSAMPLE1import引用模板2include引用页面第2节 样式文件:page.wxss1. 引入新单位:Rpx:responsive pixel:自适应设备长宽单位.2. 导入外部样式文件:import “out.wxss”3. 内联样式:通过style,class属性来实现样式改变.4. 选择器支持:目前支持的选择器有:ID.CLSS,ELEMENT,:AFTER,:BEFORE五类。5. 全局和局部样式:全局样式:定义在文件APP.WXSS中的样式。局部样式:定义在文件PAGE.WXSS中的样式.第3节 组件:compentMINA框架为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件进行快速开发。详细介绍请参考组件文档第4节 WeUI.js1. 按钮:BUTTONWeui_btn Weui_btn_primaryWeui_btn Weui_btn_warnWeui_btn Weui_btn_defaultWeui_btn_plain_primaryWeui_btn_plain_primary2. 单元格:CELL带说明列表项WEUI返回Cell带说明列表项选项标题 选项说明带说明的列表项 标题文字 说明文字 其他CELL参照微信UI手册.3. 对话框:DIALOGWEUI返回 题 自定义弹窗内容 确定取消对话框标题对话框内容xxxxxxxx4. 进度条:PROGRESSWEUI返回 XXX5. 定时消失框:TOASTWEUI返回 已完成 已完成6. 信息页:MSG PAGE(内容转下页)WEUI返回 操作成功 内容 查看详情 操作成功MSG7. 文章:ARTICLE大标题章标题1.1节标题XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXWEUI返回 大标题 章标题 1.1 节标题 Lorem . 1.2 节标题 . 8. 活动区:ACTION SHEETWEUI返回 取消 actionsheet示例菜单一示例菜单二取 消9. 图标:ICONWEUI返回第5节 兼容知识小程序的功能不断的增加，但是旧版本的微信客户端并不支持新功能，所以在使用这些新能力的时候需要做兼容。可以通过 wx.getSystem