小程式----小程式架構學習（二）視圖層

程式架構：包括邏輯層、視圖層和flex模型。邏輯層由javascript編寫，視圖層由WXML和WXSS配合元件組成，flex布局確定頁面适應不同螢幕尺寸時在恰當的位置。本篇主要介紹視圖層。

邏輯層介紹見https://blog.csdn.net/maidu_xbd/article/details/102491766

flex布局介紹見https://blog.csdn.net/maidu_xbd/article/details/102566583

1.WXML（WeiXin Markup Language）微信标記語言

WXML是架構設計的一套标簽語言，結合基礎元件+自定義元件；可以建構出頁面的結構。

（1）資料綁定：簡單綁定，組合屬性綁定，控制屬性綁定，運算綁定，組合綁定，依次如下。

<view>{{msg}}</view>
<view id='{{id}}'></view>
<view wx:if='{{age>=18}}'>成年人</view>   //控制屬性綁定
<view wx:if='{{true}}'>為true顯示</view>  //控制屬性綁定
<view>{{a+b}}</view>
<view wx:for='{{[1,2,array]}}'>{{item}}</view>

（2）清單渲染---【wx:for】

【buding.wxml】

<view wx:for='{{student}}' wx:key='student{{index}}'>
  <view>學生{{index+1}}:{{item}}</view>
</view>

【buding.js】

Page({
  /**
   * 頁面的初始資料
   */
  data: {   
    student:['小李','Tom','Sarry']
  }
})

（3）條件渲染---【wx:if="{{condition}}"】

【buding.wxml】

<view wx:if="{{age<18}}">青少年</view>
<view wx:elif="{{age>=18 && age<35}}">青壯年</view>
<view wx:elif="{{age>=35 && age<55}}">中年</view>
<view wx:else>老年</view>

【buding.js】

Page({
  /**
   * 頁面的初始資料
   */
  data: {   
    age:36
  }
})

wx:if與hidden：均可以控制元件的顯示與隐藏，差別在于wx:if是惰性的，如果初始渲染條件為false，架構什麼也不做，在條件第一次變成true時才開始局部渲染，具有更高的切換消耗。而hidden無論條件為true或false，初始就會被渲染，具有更高的初始消耗。是以，如果需要頻繁的切換元件，用hidden更好；如果在運作時條件很少發生改變，則使用wx:if更好。

（4）模闆--【<template>】

is屬性用于指定正确的模闆名稱才能成功引用，引用<template>标簽必須帶有is屬性

<template name="myTemp">
  <view wx:for="{{student}}" wx:key="student{{index}}">
  <view>學生{{index+1}}:{{item}}</view>
</view>
</template>

<template is="myTemp" data="{{student}}"></template>

（5）事件：事件是視圖層到邏輯層的通信方式，特點有①可以将使用者的行為回報到邏輯層進行處理；②可以綁定在元件上，當觸發事件就會執行對應的事件處理函數；③對象可以攜帶額外資訊，例如id，dataset，touches。

---事件使用---

//buding.wxml
<button id="myBtn" bindtap="myTap">按鈕</button>

//buding.js
Page({
   myTap:function(e){
        console.log(e)
  }
})

控制台輸出如下

小程式----小程式架構學習（二）視圖層

---事件分類---

事件分為冒泡事件和非冒泡事件。

冒泡事件：當一個元件上的事件被觸發後，該事件會向父節點傳遞，由内向外傳遞。

非冒泡事件：當一個元件上的事件被觸發後，該事件不會向父節點傳遞。

WXML中支援的冒泡事件

類型	觸發條件
touchstart	手指觸摸動作開始
touchmove	手指觸摸後移動
touchcancel	手指觸摸動作被打斷，如來電提醒，彈窗
touchend	手指觸摸動作結束
tap	手指觸摸後馬上離開
longpress	手指觸摸後，超過350ms再離開，如果指定了事件回調函數并觸發了這個事件，tap事件将不被觸發
longtap	手指觸摸後，超過350ms再離開（推薦使用longpress事件代替）
transitionend	會在 WXSS transition 或 wx.createAnimation 動畫結束後觸發
animationstart	會在一個 WXSS animation 動畫開始時觸發
animationiteration	會在一個 WXSS animation 一次疊代結束時觸發
animationend	會在一個 WXSS animation 動畫完成時觸發

---事件綁定和冒泡---

事件綁定的寫法同元件的屬性，都是以 key=value 的形式。

1）key 以bind或catch開頭，然後跟事件的類型，如bindtap、catchtouchstart。自基礎庫版本 1.5.0 起，bind和catch後可以緊跟一個冒号，其含義不變，如bind:tap、catch:touchstart。
2）value 是一個字元串，需要在對應的 Page 中定義同名的函數，不然當觸發事件的時候會報錯。

bind事件和catch事件的差別：bind事件綁定不會阻止冒泡事件向上冒泡；catch事件綁定可以阻止冒泡事件向上冒泡。

【wxml】

<view>事件冒泡-bind事件綁定不會阻止冒泡事件向上冒泡</view>
<view class="outBox" bindtap="onOutBoxClick">
  <view class="innerBox" bindtap="onInnerBoxClick">
  </view>
</view>

【wxss】

.outBox{
  margin:0 auto;
  width: 200px;
  height: 200px;
  background: rgb(110, 110, 201);
  padding:50px;
  box-sizing: border-box;
}
.innerBox{
  width: 100px;
  height: 100px;
  background: rgb(113, 201, 110);
}

【js】

Page({
  onInnerBoxClick:function(e){
    console.log("内層盒子被點選了")
  },
  onOutBoxClick:function(e){
    console.log("外層盒子被點選了")
  }
})

小程式----小程式架構學習（二）視圖層

當把【<view class="innerBox" bindtap="onInnerBoxClick">】替換為【<view class="innerBox" catchtap="onInnerBoxClick">】，則點選内層盒子，控制台隻輸出“内層盒子被點選了”，因為catch事件綁定可以阻止冒泡事件向上冒泡。

---事件的捕獲階段---

自基礎庫版本 1.5.0 起，觸摸類事件支援捕獲階段。可以在元件的冒泡事件被觸發前進行事件的捕獲。捕獲階段事件的順序與冒泡階段完全相反，由外向内進行捕獲。采用

capture-bind

、

capture-catch

進行捕獲，

capture-catch會

中斷捕獲和取消冒泡。捕獲的優先級大于冒泡。

示例

<view id="A" bindtap="tap1" capture-bind:tap="tap2">
  view A
  <view id="B" bindtap="tap3" capture-bind:tap="tap4">
    view B
  </view>
</view>

如果如果單擊【view A】先後調用tap2,tap1

如果單擊【view B】先後調用tap2,tap4,tap3,tap1,如下

小程式----小程式架構學習（二）視圖層

如果把圖中28行的“capture-bind”替換為“capture-catch”，則隻會觸發tap2，捕獲被中斷，冒泡被取消。

---事件對象---

事件對象分為基礎事件（BaseEvent）、自定義事件（CustomEvent）、觸摸事件（TouchEvent）

基礎事件（BaseEvent）對象屬性清單

屬性	類型	說明
type	String	事件類型
timeStamp	Integer	事件生成時的時間戳
target	Object	觸發事件的元件的一些屬性值集合
currentTarget	Object	目前元件的一些屬性值集合

自定義事件（CustomEvent）對象屬性清單：

屬性	類型	說明
detail	Object	額外的資訊

觸摸事件（TouchEvent）對象屬性清單：

屬性	類型	說明
touches	Array	觸摸事件，目前停留在螢幕中的觸摸點資訊的數組
changedTouches	Array	觸摸事件，目前變化的觸摸點資訊的數組

（6）引用

包括【import】和【include】兩種方式

<import src="temp.wxml" />
<template is="temp01" data="{{text:'hello'}}"></template>

注意：<import>有作用域的概念，即隻會引用目标檔案自己定義的template，不會引用目标檔案中用<import>引用的第三方模闆。這樣做的目的是為了避免多個頁面彼此互相連接配接引用陷入邏輯錯誤。

使用<include>将目标檔案除了<template>以外的代碼引入，相當于複制代碼作用。

<include src="header.wxml" />
<view>正文</view>
<include src="footer.wxml" />

<import>更适合統一樣式但内容需動态變化的情況；<include>更适合無需改動目标檔案的情況。

2.WXSS（WeiXin Style Sheets）微信樣式表

wxss類似于css,用來描述頁面結構對應的樣式。它具有css大部分特性，對css進行了擴充和修改，主要有尺寸機關、樣式導入等擴充和修改。

（1）尺寸機關：

rpx（responsive pixel），可以根據螢幕寬度自适應，規定螢幕寬為750rpx。一般以iphone6螢幕做為視覺設計标準。

rpx 與 px機關換算如下：

裝置	rpx換算px (螢幕寬度/750)	px換算rpx (750/螢幕寬度)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6s	1rpx = 0.552px	1px = 1.81rpx

（2）樣式導入：

【@import "../../templates/common.wxss"】

（3）常用屬性

樣式屬性	說明
background-color	背景色
color	前景色
font-size	字型大小
border	邊框
width	寬度
height	高度

（4）内聯樣式

style 和class

【<view style="color:red;background-color:#ccc">測試1</view>】

【<view style="color:{{color}}">測試2</view>】

【<view class="style1">測試3</view>】

（5）選擇器

選擇器	示例	說明
.class	.style1	選擇所有擁有class=”style1”屬性的元件
#id	#test	選擇所有擁有id=”test”屬性的元件
element	view	選擇所有view元件
element,element	view,text	選擇所有view元件和test元件
::after	view::after	在view元件後插入内容
::before	view:before	在view元件前插入内容

（6）全局樣式與局部樣式

在app.wxss中的樣式為全局樣式，作用于每個頁面。在每個頁面的wxss檔案中定義的樣式為局部樣式，隻作用于對應的頁面，并會覆寫app.wxss中的相同的選擇器。

3.元件

元件是wxml頁面上的基本機關，例如按鈕，圖檔等，具體

小程式----小程式架構學習（二）視圖層

1.WXML（WeiXin Markup Language）微信标記語言

2.WXSS（WeiXin Style Sheets）微信樣式表

3.元件

繼續閱讀

【微信小程式】選擇寶——選擇困難症的拯救者

微信小程式開發規範（初稿）

微信小程式傳值的坑

微信小程式傳值

小程式switchTab傳值

小程式父子元件傳值

頁面傳值的方式 - 小程式篇一、跨頁面傳值二、頁面内傳值三、本地儲存四、全局的app對象

小程式回傳值

小程式url頁面傳值

微信小程式父子傳值

小程式元件傳值通訊

214情人節，使用微信小程式【信鴿相知】寫情書吧

微信小程式npm如何引用Vant Weapp

簡單封裝一個微信小程式的ajax請求

微信小程式的cover-image 無法覆寫的問題！注意一定是位址的問題之前試了好多次！首先要在cover-view 标簽裡面外層是 map chart，camera 等原始元件

微信小程式前端解密擷取使用者資訊