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

1、微信小程序開發(fā)(四)第三章 表現層第1節(jié) 頁面文件: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節(jié) 樣式文件: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節(jié) 組件:compentMINA框架為開發(fā)者提供了一系列基礎組件，開發(fā)者可以通過組合這些基礎組件進行快速開發(fā)。詳細介紹請參考組件文檔第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帶說明列表項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節(jié)標題XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXWEUI<返回<article class="weui_article"> &l

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