微信小程序開(kāi)發(fā)(四)

1、微信小程序開(kāi)發(fā)(四)第三章 表現(xiàn)層第1節(jié) 頁(yè)面文件:page.wxml1. 數(shù)據(jù)綁定:bind data+普通綁定<view>data</view>+三元運(yùn)算<view>flag?true:false</view>+算數(shù)運(yùn)算<view>a+b+c</view>+字符運(yùn)算<view>“hello”+” world”</view>+對(duì)象屬性<view>perty</view>+數(shù)組<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+條件渲染語(yǔ)法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事件對(duì)象：baseEvent,customerEvent,touchEvent對(duì)象NO屬性類型說(shuō)明備注baseEvent1typestring類型2timeStampinteger時(shí)間戮3targetobj目標(biāo)Id,tagName,dataSet4currentTargetobj當(dāng)前目標(biāo)Id,tagName,dataSetcusEvt5detailobj明細(xì)<user define>touchEvt6touchesarr

6、ay接觸Touch:identifer,px,py,cx,cy7changedTouchesarray變動(dòng)接觸Touch:identifer,px,py,cx,cy事件綁定實(shí)例：<view bindTap=”event-handler”></view>6. 文件引用:include file引用種類：NOTYPEDESCSAMPLE1import引用模板<import src=”template.wxml”/>2include引用頁(yè)面<include src=”page.wxml”/>第2節(jié) 樣式文件:page.wxss1. 引入新單位:Rpx:

7、responsive pixel:自適應(yīng)設(shè)備長(zhǎng)寬單位.2. 導(dǎo)入外部樣式文件:import “out.wxss”3. 內(nèi)聯(lián)樣式:通過(guò)style,class屬性來(lái)實(shí)現(xiàn)樣式改變.4. 選擇器支持:目前支持的選擇器有:ID.CLSS,ELEMENT,:AFTER,:BEFORE五類。5. 全局和局部樣式:全局樣式:定義在文件APP.WXSS中的樣式。局部樣式:定義在文件PAGE.WXSS中的樣式.第3節(jié) 組件:compentMINA框架為開(kāi)發(fā)者提供了一系列基礎(chǔ)組件，開(kāi)發(fā)者可以通過(guò)組合這些基礎(chǔ)組件進(jìn)行快速開(kāi)發(fā)。詳細(xì)介紹請(qǐng)參考組件文檔第4節(jié) WeUI.js1. 按鈕:BUTTONWeui_btn Weu

8、i_btn_primaryWeui_btn Weui_btn_warnWeui_btn Weui_btn_defaultWeui_btn_plain_primaryWeui_btn_plain_primary2. 單元格:CELL帶說(shuō)明列表項(xiàng)WEUI<返回Cell帶說(shuō)明列表項(xiàng)選項(xiàng)標(biāo)題 選項(xiàng)說(shuō)明<div class="weui_cells_title">帶說(shuō)明的列表項(xiàng)</div><div class="weui_cells"> <div class="weui_cell"> <

9、divclass="weui_cell_bd weui_cell_primary"> <p>標(biāo)題文字</p> </div> <div class="weui_cell_ft"> 說(shuō)明文字 </div> </div></div>其他CELL參照微信UI手冊(cè).3. 對(duì)話框: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">自定義彈窗內(nèi)容</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>確定取消對(duì)話框標(biāo)題對(duì)話框內(nèi)容xxxxxxxx4. 進(jìn)度條: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. 定時(shí)消失框: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. 信息頁(yè):MSG

14、PAGE(內(nèi)容轉(zhuǎn)下頁(yè))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">內(nèi)容</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大標(biāo)題章標(biāo)題1.1節(jié)標(biāo)題XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXWEUI<返回<article class="weui_article"> &l

17、t;h1>大標(biāo)題</h1> <section> <h2 class="title">章標(biāo)題</h2> <section> <h3>1.1 節(jié)標(biāo)題</h3> <p>Lorem .</p> </section> <section> <h3>1.2 節(jié)標(biāo)題</h3> <p>.</p> </section> </section></article>8. 活動(dòng)區(qū):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