微信小程序學習筆記五 常見組件

1. 常見組件

• 重點講解小程序中常用的布局組件
  

1.1 view

代替 原來的div標簽

<!-- pages/index/index.wxml -->
<view hover-class="h-class">
    點擊我試試
</view>

/* pages/index/index.wxss */
.h-class{
  color: green;
}

---

1.2 text

1. 文本標簽
2. 只能嵌套text
3. 長按文字可以復制 (只有該標簽有這個功能)
4. 可以對空格 回車 進行編碼

屬性名	類型	默認值	說明
selectable	Boolean	false	文本是否可選
decode	Boolean	false	是否解碼

  <!-- text 標簽測試 -->
  <text selectable="false" decode="false">
    普&nbsp;通
  </text>

---

1.3 image

1. 圖片標簽, image組件默認寬度320px、高度240px
2. 支持懶加載

屬性名	類型	默認值	說明
src	String		圖片資源地址
mode	String	'scaleToFill'	圖片裁剪、縮放的模式
lazy-load	Boolean	false	圖片懶加載

mode有效值:

• model 有13種模式,其中4種是縮放模式, 9種是裁剪模式

模式	值	說明
縮放	scaleToFill	不保持縱橫比縮放圖片, 使圖片的寬高完全拉伸至填滿image元素
縮放	aspectFit	保持縱橫比縮放圖片, 使圖片的長邊能完全顯示出來
縮放	aspectFill	保持縱橫比縮放圖片, 只保證圖片的短邊能完全顯示出來
縮放	widthFix	寬度不變, 高度自動變化, 保持原圖寬高比不變
裁剪	top	不縮放圖片, 只顯示圖片的頂部區域
裁剪	bottom	不縮放圖片, 只顯示圖片的底部區域
裁剪	center	不縮放圖片, 只顯示圖片的中間區域
裁剪	left	不縮放圖片, 只顯示圖片的左邊區域
裁剪	right	不縮放圖片, 只顯示圖片的右邊區域
裁剪	top left	不縮放圖片, 只顯示圖片的左上邊區域
裁剪	top right	不縮放圖片, 只顯示圖片的右上邊區域
裁剪	bottom left	不縮放圖片, 只顯示圖片的左下邊區域
裁剪	bottom right	不縮放圖片, 只顯示圖片的右下邊區域

---

1.4 swiper

微信內置輪播圖組件

• swiper : 塊視圖容器。
• swiper-item: 滑塊, 默認寬度和⾼度都是100%

• 默認寬度 100% 高度150px

屬性名	類型	默認值	說明
indicator-dots	Boolean	false	是否顯示面板指示點
indicator-color	Color	rgb(0,0,0,.3)	指示點顏色
indicator-active-color	Color	#000000	當前選中的指示點顏色
autoplay	Boolean	false	是否自動切換
interval	Number	5000	自動切換時間間隔
circular	Boolean	false	是否循環輪播

<!-- 
"pages/SwiperText/SwiperText.wxml",
1. 輪播圖的外層容器: swiper
2. 每一個輪播項: swiper-item
3. swiper存在默認樣式 
    - width: 100%
    - height: 150px image 存在默認寬度和高度 320 * 240
4. swiper 高度無法實現由內容撐開
5. 先找出來原圖的高度和寬度, 等比例給swiper定寬度和高度
    - 原圖的寬高880 * 388
    - swiper寬度 / swiper 高度 = 原圖寬度 / 原圖高度
    - swiper高度  = swiper 寬度 * 原圖的高度 / 原圖的寬度
      height : calc(100vw * 338 / 880)

 -->
<swiper indicator-dots="true" autoplay>
  <swiper-item>
    <image mode="widthFix" src="https://i0.hdslb.com/bfs/feed-admin/5ef9aa23c480cf40998be6f0897bcad4ad8e8e3f.jpg@880w_388h_1c_95q">
    </image>
  </swiper-item>
  <swiper-item>
    <image mode="widthFix" src="	https://i0.hdslb.com/bfs/feed-admin/c7c308997d904ec7770062fb0e2062dfeaf54f89.png@880w_388h_1c_95q">
    </image>
  </swiper-item>
  <swiper-item>
    <image mode="widthFix" src="	https://i0.hdslb.com/bfs/feed-admin/5f60c09eb96f604bc4fc8ea78ef5b3be6ef67963.png@880w_388h_1c_95q">
    </image>
  </swiper-item>
</swiper>

/* pages/SwiperText.wxss */
swiper{
  width: 100%;
  height : calc(100vw * 338 / 880)
}
image{
  width: 100%;
}

1.5 navigator

導航組件 類似超鏈接標簽

屬性名	類型	默認值	說明
target	String	self	在哪個目標上發生跳轉, 默認當前小程序, 可選值 self/miniProgram
url	String		當前小程序內的跳轉連接
open-type	String	navigate	跳轉方式

• open-type 有效值:

值	說明
navigate	保留當前頁面, 跳轉到應用內的某個頁面, 但是不能跳到 tabbar 頁面
redirect	關閉當前頁面, 跳轉到應用內的某個頁面, 但是不允許跳轉到 tabbar 頁面
switchTab	跳轉到tabBar頁面, 並關閉其他所有非 tabBar 頁面
reLaunch	關閉所有頁面, 打開到應用內的某個頁面
navigateBack	關閉當前頁面, 返回上一頁面或多級頁面, 可通過 getCurrentPages() 獲取當前的頁面棧, 決定需要返回幾層
exit	退出小程序, target="miniProgram"時生效

<!--pages/navigatorText/navigatorText.wxml-->
<!-- 
  導航組件: navigator
  0 相當於一個塊級元素, 默認會換行 可以直接加寬高
  1. url: 要跳轉的頁面路徑 絕對路徑|相對路徑
  2. target: 要跳轉到當前小程序頁面 還是其他的小程序頁面
        self: 默認值 自己
        miniProgram: 其他的小程序頁面
  3. open-type: 跳轉的方式
 -->
<view>
  <navigator url="/pages/SwiperText/SwiperText">輪播圖頁面</navigator>
  <navigator url="/pages/SwiperText/SwiperText">輪播圖頁面</navigator>
</view>

---

1.6 rich-text

富文本標簽

可以將字符串解析成 對應標簽, 類似Vue 中v-html功能

<!--pages/RichText/RichText.wxml-->
<!-- 1. 加載 節點數組-->
<rich-text nodes="{{nodes}}" bindtap="tap"></rich-text>
<!-- 2.加載 字符串 -->
<rich-text nodes='<img src="https://developers.weixin.qq.com/miniprogram/assets/images/head_global_z_@all.p
ng" alt="">'></rich-text>

// index.js
Page({
  data: {
    nodes: [{
      name: 'div',
      attrs: {
        class: 'div_class',
        style: 'line-height: 60px; color: red;'
     },
      children: [{
        type: 'text',
        text: 'Hello World!'
     }]
   }]
 },
  tap() {
    console.log('tap')
 }
})

1.6.1 nodes 屬性

nodes屬性支持 字符串和標簽節點數組

屬性	說明	類型	必填	備注
name	標簽名	String	是	支持部分受信任的HTML節點
attrs	屬性	Object	否	支持部分受信任的屬性, 遵循 Pascal命名法
children	子節點列表	array	否	結構和 nodes一致

文本節點: type = text

屬性	說明	類型	必填	備注
text	文本	string	是	支持entities

• nodes不推薦使用String類型, 性能會有所下降
• rich-text 組件內屏蔽所有節點的事件
• attrs屬性不支持id, 支持 class
• name 屬性大小寫不敏感
• 如果使用了不受信任的html'節點, 該節點及其所有子節點將會被移除
• img標簽僅支持網絡圖片

---

1.7 button

<button
  type="default"
  size="{{defaultSize}}"
  loading="{{loading}}"
  plain="{{plain}}"
>
 default
</button>

屬性	類型	默認值	必填	說明
size	string	default	否	按鈕的大小
type	string	default	否	按鈕的樣式類型
plain	boolean	false	否	按鈕是否鏤空, 背景色透明
disabled	boolean	false	否	是否禁用
loading	boolean	false	否	名稱前是否帶 loading 圖標
form-type	string		否	用於''組件, 分別會觸發 ''組件的
open-type	string		否	微信開發能力

---

1.7.1 size 的合法值

值	說明
default	默認大小
mini	小尺寸

---

1.7.2 type 的合法值

值	說明
primary	綠色
default	白色
warn	紅色

1.7.3 form-type的合法值

值	說明
submit	提交表單
reset	重置表單

---

1.7.4 open-type 的合法值

值	說明
contact	打開客服會話, 如果用戶在會話中點擊消息卡片后返回小程序, 可以從 bindcontact 回調中獲得具體信息
share	觸發用戶轉發
getPhoneNumber	獲取用戶手機號, 可以從bindgetphonenumber回調中獲取到用戶信息`
launchApp	打開 APP, 可以通過app-parameter屬性設定向APP傳的參數
openSetting	打開授權設置頁
feedback	打開"意見反饋"頁面, 用戶可提交反饋內容並上傳日志, 開發者可以登錄小程序管理后台后進入左側菜單 "客服反饋"頁面獲取到反饋內容

---

1.8 icon

屬性	類型	默認值	必填	說明
type	string		是	icon的類型, 有效值: success, success_no_circle, info,warn,waiting,cancel, download,search, clear
size	number/string	23	否	icon的大小
color	string		否	icon的顏色, 同css的color

js

Page({
  data: {
    iconSize: [20, 30, 40, 50, 60, 70],
    iconType: [
      'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel',
'download', 'search', 'clear'
   ],
    iconColor: [
      'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
   ],
 }

wxml

<view class="group">
  <block wx:for="{{iconSize}}">
    <icon type="success" size="{{item}}"/>
  </block>
</view>
<view class="group">
  <block wx:for="{{iconType}}">
    <icon type="{{item}}" size="40"/>
  </block>
</view>
<view class="group">
  <block wx:for="{{iconColor}}">
    <icon type="success" size="40" color="{{item}}"/>
  </block>
</view>

---

1.9 radio

可以通過 color屬性來修改顏色

需要搭配 radio-group ⼀起使⽤

---

1.10. checkbox

可以通過 color屬性來修改顏色

需要搭配 checkbox-group ⼀起使⽤