微信小程序开发(四)(共9页).docx

《微信小程序开发(四)(共9页).docx》由会员分享，可在线阅读，更多相关《微信小程序开发(四)(共9页).docx（9页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、精选优质文档-倾情为你奉上微信小程序开发(四)第三章 表现层第1节 页面文件:page.wxml1. 数据绑定:bind data+普通绑定data+三元运算flag?true:false+算数运算a+b+c+字符运算“hello”+” world”+对象属性obj.property+数组item+逻辑5”+混合2. 条件渲染:condition render+条件渲染语法1. wx.if2. wx.elif3. wx.else4. block wx:if+代码示例webappother3. 列表渲染:list render+普通列表item+列表嵌套i*j4. 模板渲染:template r

2、ender+模板定义 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,dataSet4cur

3、rentTargetobj当前目标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. 导入外部样式文件:impor

4、t “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

5、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. 文章:ARTIC

6、LE大标题章标题1.1节标题XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXWEUI返回 大标题 章标题 1.1 节标题 Lorem . 1.2 节标题 . 8. 活动区:ACTION SHEETWEUI返回 取消 actionsheet示例菜单一示例菜单二取 消9. 图标:ICONWEUI返回第5节 兼容知识小程序的功能不断的增加，但是旧版本的微信客户端并不支持新功能，所以在使用这些新能力的时候需要做兼容。可以通过 wx.getSystemInfo 或者 wx.getSystemInfoSync 获取到小程序的基础库版本号。也可以通过 wx.canIUse 详情 来判断是否可以在该基础库版本下直接使用对应的API或者组件专心-专注-专业