交互 · 程序員講師課件

# 微信小程序--交互目錄結構 [toc] --- ## 微信小程序--交互 ### 一、數據交互（初始數據） * data 是頁面第一次渲染使用的初始數據。 * 頁面加載時，data 將會以JSON字符串的形式由邏輯層傳至渲染層，因此data中的數據必須是可以轉成JSON的類型：字符串，數字，布爾值，對象，數組。 * 可以在 {{ }} 內進行簡單的運算，數據綁定 > js示例： ```js Page({ data: { title: '射雕', array: [ {'id':1,'name':'歐陽克'}, {'id':2,'name':'黃蓉'}, {'id':3,'name':'郭靖'} ] } }) ``` > wxml示例： ```html <view>標題：{{ title }}</view> <view>ID：{{ array[0].id }} --- 姓名：{{ array[0].name }}</view> ``` --- ### 二、字符串運算 ```html <view>{{ '歐陽克'+'黃蓉' }}</view> ``` --- ### 三、算數運算 ```html <view>{{ 1+1 }}</view> ``` --- ### 四、三元運算 > js示例： ```js Page({ data: { title: '射雕' } }) ``` > wxml示例： ```html <view>姓名：{{ title ? '歐陽克' : '黃蓉' }}</view> ``` --- ### 五、邏輯判斷 > js示例： ```js Page({ data: { title: '射雕', array: [ {'id':1,'name':'歐陽克'}, {'id':2,'name':'黃蓉'}, {'id':3,'name':'郭靖'} ], number : 10 } }) ``` > wxml示例： ```html <view wx:if="{{ title }}">標題：{{ title }}</view> <view wx:if="{{ number > 10 }}">人數：{{ number }}</view> <view wx:if="{{ number > 5 }}">1</view> <view wx:elif="{{ number > 2}}">2</view> <view wx:else>3</view> ``` --- ### 六、循環 * 使用 wx:for-item 可以指定數組當前元素的變量名 * 使用 wx:for-index 可以指定數組當前下標的變量名 > js示例： ```js Page({ data: { title: '射雕', array: [ {'id':1,'name':'歐陽克'}, {'id':2,'name':'黃蓉'}, {'id':3,'name':'郭靖'} ] } }) ``` > wxml示例： ```html <view wx:if="{{ title }}">標題：{{ title }}</view> <view wx:for="{{ array }}">ID：{{ item.id }} --- 姓名：{{ item.name }}</view> <view wx:for="{{ array }}" wx:for-index="idx" wx:for-item="itemName">下標：{{idx}} --- ID：{{ itemName.id }} --- 姓名：{{ itemName.name }}</view> ``` --- ### 七、`bindtap` 綁定自定義事件 * 事件是視圖層到邏輯層的通訊方式 * 事件可以將用戶的行為反饋到邏輯層進行處理 * 事件對象可以攜帶額外信息，自定義傳值：data- 進行傳值 > js示例： ```js Page({ zidingyi(){ console.log('我是自定義方法'); }, ouyangke(e){ console.log(e); } }) ``` > wxml示例： ```html <view bindtap="zidingyi">自定義方法</view> <view bindtap="ouyangke" data-id="1" data-name="歐陽克">自定義方法帶傳值</view> ``` --- ### 八、動態設置初始數據 * this 代表當前文件 * this.setData 設置data里的數據 > js示例： ```js Page({ data: { title: '射雕' }, zidingyi(){ this.setData({ title : '歐陽克' }) } }) ``` > wxml示例： ```html <view bindtap="zidingyi">標題：{{ title }}</view> ``` --- ### 九、block組件 * block 并不是一個組件，它僅僅是一個包裝元素，不會在頁面中做任何渲染，只接受控制屬性。 > js示例： ```js Page({ data: { title: '射雕' }, zidingyi(){ this.setData({ title : '歐陽克' }) } }) ``` > wxml示例： ```html <block wx:if="{{title}}"> <view bindtap="zidingyi">標題：{{ title }}</view> </block> ``` --- ### 十、組件屬性：hidden * hidden 組件帶hidden屬性，會被隱藏，但組件存在 * wx:if 惰性的，如果在初始渲染條件為 false，框架什么也不做，組件不存在 > wxml示例： ```html <view wx:if="{{title}}">標題：{{ title }}</view> <view hidden>標題：歐陽克</view> ``` --- ### 十一、組件綁定自定義事件 * 小程序的組件有很多默認動作，可以綁定自定義事件 #### 1、input組件 **屬性**|**類型**|**描述** ---|---|--- bindinput|eventhandle|鍵盤輸入時觸發 bindfocus|eventhandle|輸入框聚焦時觸發 bindblur|eventhandle|輸入框失去焦點時觸發 bindconfirm|eventhandle|點擊完成按鈕時觸發 >> js示例： ```js Page({ a(){ console.log('鍵盤輸入時觸發'); }, b(){ console.log('輸入框聚焦時觸發'); }, c(){ console.log('輸入框失去焦點時觸發'); }, d(){ console.log('點擊完成按鈕時觸發'); } }) ``` >> wxml示例： ```html <input bindinput="a" bindfocus="b" bindblur="c" bindconfirm="d" /> ``` #### 2、picker組件 **屬性**|**類型**|**描述** ---|---|--- bindcancel|eventhandle|取消選擇時觸發 bindchange|eventhandle|value 改變時觸發 change 事件 >> js示例： ```js Page({ a(){ console.log('取消選擇時觸發'); }, b(e){ console.log('value 改變時觸發 change 事件'); console.log(e); } }) ``` >> wxml示例： ```html <picker mode="region" bindcancel="a" bindchange="b"> <view>請選擇：</view> </picker> ``` #### 3、checkbox-group組件、radio-group組件 **屬性**|**類型**|**描述** ---|---|--- bindchange|eventhandle|value 改變時觸發 change 事件 >> js示例： ```js Page({ a(e){ console.log('value 改變時觸發 change 事件'); console.log(e); } }) ``` >> wxml示例： ```html <checkbox-group bindchange="a"> <checkbox value="1" checked />歐陽克 <checkbox value="2" color="red" />黃蓉 <checkbox value="3" disabled />郭靖 </checkbox-group> <radio-group bindchange="a"> <radio value="1" checked="true" />歐陽克 <radio value="2" color="red" />黃蓉 <radio value="3" />郭靖 <radio value="4" />楊康 </radio-group> ```