微信小程序开发(四)课件

1、微信小程序开发(四)第三章 表现层第1节 页面文件:page.wxml1. 数据绑定:bind data+普通绑定<view>data</view>+三元运算<view>flag?true:false</view>+算数运算<view>a+b+c</view>+字符运算<view>“hello”+” world”</view>+对象属性<view>perty</view>+数组<view wx:for-items=”array”>item</v

2、iew>+逻辑<view wx:if=”a>5”></view>+混合<template is=”otmp” data=”obj1,obj2,a,”></template>2. 条件渲染:condition render+条件渲染语法1. wx.if2. wx.elif3. wx.else4. block wx:if+代码示例<view wx.if=”type=web”>web</view><view wx.elif=”type=app”>app</view><view wx.el

3、se=”type=other”>other</view><block wx:if=”condition”></block>3. 列表渲染: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>4. 模板渲染:te

4、mplate render+模板定义<template name="msgItem"> <view> <text> index: msg </text> <text> Time: time </text> </view></template>+模板使用<template is="msgItem" data=".item"/>5. 元素事件:element event事件种类:NOTYPEBIND_METHODSAMPLE1冒泡B

5、ind+xxxxtouchStart,touchMove,touchEnd,tap,longTap2不冒泡Catch+xxxxSubmit,input,scroll事件对象：baseEvent,customerEvent,touchEvent对象NO属性类型说明备注baseEvent1typestring类型2timeStampinteger时间戮3targetobj目标Id,tagName,dataSet4currentTargetobj当前目标Id,tagName,dataSetcusEvt5detailobj明细<user define>touchEvt6touchesarr

6、ay接触Touch:identifer,px,py,cx,cy7changedTouchesarray变动接触Touch:identifer,px,py,cx,cy事件绑定实例：<view bindTap=”event-handler”></view>6. 文件引用:include file引用种类：NOTYPEDESCSAMPLE1import引用模板<import src=”template.wxml”/>2include引用页面<include src=”page.wxml”/>第2节 样式文件:page.wxss1. 引入新单位:Rpx:

7、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 Weu

8、i_btn_primaryWeui_btn Weui_btn_warnWeui_btn Weui_btn_defaultWeui_btn_plain_primaryWeui_btn_plain_primary2. 单元格:CELL带说明列表项WEUI<返回Cell带说明列表项选项标题 选项说明<div class="weui_cells_title">带说明的列表项</div><div class="weui_cells"> <div class="weui_cell"> <

9、divclass="weui_cell_bd weui_cell_primary"> <p>标题文字</p> </div> <div class="weui_cell_ft"> 说明文字 </div> </div></div>其他CELL参照微信UI手册.3. 对话框:DIALOGWEUI<返回<div class="weui_dialog_confirm"> <div class="weui_mask"

10、;></div> <div class="weui_dialog"> <divclass="weui_dialog_hd"><strong class="weui_dialog_title">题</strong></div> <div class="weui_dialog_bd">自定义弹窗内容</div> <div class="weui_dialog_ft"> <a hre

11、f="#" class="weui_btn_dialog default"></a> <a href="#" class="weui_btn_dialog primary"></a> </div> </div></div>确定取消对话框标题对话框内容xxxxxxxx4. 进度条:PROGRESSWEUI<返回<div class="weui_progress"> <div class="

12、;weui_progress_bar"> <div.class="weui_progress_inner_bar"></div> </div> <a href="#" class="weui_progress_opr"> <i class="weui_icon_cancel"></i> </a></div>XXX5. 定时消失框:TOASTWEUI<返回<div id="toast&

13、quot; style="display: none;"> <div class="weui_mask_transparent"></div> <div class="weui_toast"> <i class="weui_icon_toast"></i> <p class="weui_toast_content">已完成</p> </div></div>已完成6. 信息页:MSG

14、PAGE(内容转下页)WEUI<返回<div class="weui_msg"><divclass="weui_icon_area"><I.class="weui_icon_success weui_icon_msg"></i></div> <div class="weui_text_area"> <h2 class="weui_msg_title">操作成功</h2> <p class=

15、"weui_msg_desc">内容</p> </div> <div class="weui_opr_area"> <p class="weui_btn_area"> <a href="#" class="weui_btn weui_btn_primary"></a> <a href="#" class="weui_btn weui_btn_default"><

16、/a> </p> </div> <div class="weui_extra_area"> <a href="">查看详情</a> </div></div>操作成功MSG7. 文章:ARTICLE大标题章标题1.1节标题XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXWEUI<返回<article class="weui_article"> &l

17、t;h1>大标题</h1> <section> <h2 class="title">章标题</h2> <section> <h3>1.1 节标题</h3> <p>Lorem .</p> </section> <section> <h3>1.2 节标题</h3> <p>.</p> </section> </section></article>8. 活动区:A

18、CTION SHEETWEUI<返回<div id="actionSheet_wrap"> <divclass="weui_mask_transition" id="mask"></div> <divclass="weui_actionsheet" id="weui_actionsheet"> <div class="weui_actionsheet_menu"> <div class="weui_actionsheet_cell"></div> <div class="weui_actionsheet_cell"> </div> </div> <div class="weui_actionsheet_action"> <div class="weui_actionsheet_cell">取消</div> </div> </div></div&g