全棧開發工程師微信小程序-上(下)

全棧開發工程師微信小程序-上(下)

icon
圖標

success, success_no_circle, info, warn, waiting, cancel, download, search, clear

<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>

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

success
success_no_circle
success_circle

info
// info_no_circle
info_circle

warn
// warn_no_circle
// warn_circle

waiting
// waiting_no_circle
waiting_circle

cancel
// cancel_no_circle
// cancel_circle

download
// download_no_circle
// download_circle

search
clear

icon圖標

type: icon類型
size: icon大小
color: icon顏色

text
文本

selectable 文本是否可選
space 顯示連續空格
decode 是否解碼

<view class="btn-area">
  <view class="body-view">
    <text>{{text}}</text>
    <button bindtap="add">add line</button>
    <button bindtap="remove">remove line</button>
  </view>
</view>

const initData = 'this is first line\nthis is second line'
const extraLine = []
Page({
  data: {
    text: initData
  },
  add(e) {
    extraLine.push('other line')
    this.setData({
      text: initData + '\n' + extraLine.join('\n')
    })
  },
  remove(e) {
    if (extraLine.length > 0) {
      extraLine.pop()
      this.setData({
        text: initData + '\n' + extraLine.join('\n')
      })
    }
  }
})

rich-text
富文本

支持默認事件，包括：tap、touchstart、touchmove、touchcancel、touchend和longtap

nodes 節點列表 / HTML String
space 顯示連續空格

nodes 屬性推薦使用 Array 類型，因爲組件會將 String 類型轉換爲 Array 類型，於是性能會有所降低

rich-text是微信小程序的富文本組件,用於渲染部分html標籤.

nodes
文本節點：type = text,全局支持class和style屬性，不支持id屬性。

// 元素節點：type = node
// name
// attrs
<!-- rich-text.wxml -->
<rich-text nodes="{{nodes}}" bindtap="tap"></rich-text>

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

progress
進度條

percent 百分比0~100
show-info 在進度條右側顯示百分比
border-radius 圓角大小
font-size 右側百分比字體大小
stroke-width 進度條線的寬度
color 進度條顏色
activeColor 已選擇的進度條的顏色
backgroundColor 未選擇的進度條的顏色
active 進度條從左往右的動畫

<progress percent="20" show-info />
<progress percent="40" stroke-width="12" />
<progress percent="60" color="pink" />
<progress percent="80" active />

表單組件

button
按鈕

size 按鈕的大小
type 按鈕的樣式類型
plain 按鈕是否鏤空，背景色透明
disabled 是否禁用
loading 名稱前是否帶 loading 圖標
open-type 微信開放能力
hover-class 指定按鈕按下去的樣式類
hover-start-time 按住後多久出現點擊態
hover-stay-time 手指鬆開後點擊態保留時間
lang 指定返回用戶信息的語言
session-from 會話來源
send-message-title 會話內消息卡片標題
send-message-path 會話內消息卡片點擊跳轉小程序路徑
send-message-img 會話內消息卡片圖片
bindcontact 客服消息回調
bindgetphonenumber 獲取用戶手機號回調
app-parameter 打開 APP 時，向 APP 傳遞的參數

open-type="getUserInfo",用於獲取用戶信息.

<button bindgetuserinfo="" open-type="getUserInfo" type="primary">用戶受權</button>

<button open-type="contact">進入客服會話</button>

checkbox-group
多項選擇器，內部由多個checkbox組成

checkbox
多選項目

value 標識
disabled 是否禁用

<checkbox-group bindchange="checkboxChange">
  <label class="checkbox" wx:for="{{items}}">
    <checkbox value="{{item.name}}" checked="{{item.checked}}" />
    {{item.value}}
  </label>
</checkbox-group>

Page({
  data: {
    items: [
      {name: 'USA', value: '美國'},
      {name: 'CHN', value: '中國', checked: 'true'},
      {name: 'BRA', value: '巴西'},
      {name: 'JPN', value: '日本'},
      {name: 'ENG', value: '英國'},
      {name: 'TUR', value: '法國'},
    ]
  },
  checkboxChange(e) {
    console.log('checkbox發生change事件，攜帶value值爲：', e.detail.value)
  }
})

form
表單

將組件內的用戶輸入的<switch/><input/><checkbox/><slider/><radio/><picker/>

bindsubmit 攜帶 form 中的數據觸發 submit 事件
bindreset 表單重置時會觸發 reset 事件

Page({
  formSubmit(e) {
    console.log('form發生了submit事件，攜帶數據爲：', e.detail.value)
  },
  formReset() {
    console.log('form發生了reset事件')
  }
})

<form bindsubmit="formSubmit" bindreset="formReset">

<switch name="switch" />
<slider name="slider" show-value></slider>
<input name="input" placeholder="please input here" />
<radio-group name="radio-group">
<checkbox-group name="checkbox">

<button form-type="submit">Submit</button>
<button form-type="reset">Reset</button>

input
輸入框

value 輸入框的初始內容
type input 的類型
password 是不是密碼類型
placeholder 輸入框爲空時佔位符
placeholder-style 指定 placeholder 的樣式
placeholder-class 指定 placeholder 的樣式類
disabled 是否禁用
maxlength 最大輸入長度
cursor-spacing 指定光標與鍵盤的距離
auto-focus 自動聚焦，拉起鍵盤
focus 獲取焦點
confirm-type 設置鍵盤右下角按鈕的文字
confirm-hold 點擊鍵盤右下角按鈕時是否保持鍵盤不收起
cursor 指定focus時的光標位置

text 文本輸入鍵盤
number 數字輸入鍵盤
idcard 身份證輸入鍵盤
digit 帶小數點的數字鍵盤

confirm-type 有效值：

send 右下角按鈕爲「發送」
search 搜索
next 下一個
go 前往
done 完成

label
用來擴展目標組件的可單擊區域.

1. 使用for屬性找到對應的id,單擊label的區域,會觸發對應的控件.
2. 將目標組件做爲子標籤直接放在label組件內部.

for優先級高於內部控件,內部有多個控件的時候默認觸發第一個控件,用來改進表單組件的可用性,使用for屬性找到對應的id.

目前綁定控件:

<button> <checkbox> <radio> <switch>

label主要是用於什麼?

對於checkbox組件自己沒有文本,就要藉助label組件進行擴展,而後就可單擊區域,若是沒有checkbox放在label標籤的內部,那麼單擊時,就不會被選中.

radio一樣沒有默認標籤文本,因此可用label.對於radio的代碼使用了label的for屬性,一個label的for屬性對應於一個radio的id.

picker

普通選擇器，多列選擇器，時間選擇器，日期選擇器，省市區選擇器，默認是普通選擇器

// 普通選擇器：mode = selector
// 多列選擇器：mode = multiSelector
// 時間選擇器：mode = time
// 日期選擇器：mode = date
// 省市區選擇器：mode = region

mode的屬性:
單選: selector
多選: multiSelector
時間: time
日期: date
省市: region

picker-view
嵌入頁面的滾動選擇器

picker組件是基於picker-view組件實現的.

radio-group
單項選擇器,是由多個單選項目<radio/>組成.

// radio-group
bindchange

// radio
value 標識
checked 當前是否選中
disabled 是否禁用
color radio的顏色

slider
滑動選擇器

min 最小值
max 最大值
disabled 是否禁用
value 當前取值
color 背景條的顏色
activeColor 已選擇的顏色
backgroundColor 背景條的顏色
show-value 是否顯示當前 value

<view class="section section_gap">
  <text class="section__title">設置step</text>
  <view class="body-view"><slider bindchange="slider2change" step="5" /></view>
</view>

<view class="section section_gap">
  <text class="section__title">顯示當前value</text>
  <view class="body-view">
    <slider bindchange="slider3change" show-value />
  </view>
</view>

<view class="section section_gap">
  <text class="section__title">設置最小/最大值</text>
  <view class="body-view">
    <slider bindchange="slider4change" min="50" max="200" show-value />
  </view>
</view>

const pageData = {}
for (let i = 1; i < 5; i++) {
  (function (index) {
    pageData['slider' + index + 'change'] = function (e) {
      console.log('slider' + 'index' + '發生 change 事件，攜帶值爲', e.detail.value)
    }
  }(i))
}
Page(pageData)

min: 最小值
max: 最大值
step: 表示步長
backgroundColor: 表示背景色
activeColor: 表示已經選擇的顏色
show-value: 表示是否顯示當前value

switch
開關選擇器

checked 是否選中
disabled 是否禁用
type 樣式，有效值：switch, checkbox
bindchange checked 改變時觸發 
color switch 的顏色

<view class="body-view">
  <switch checked bindchange="switch1Change" />
  <switch bindchange="switch2Change" />
</view>

Page({
  switch1Change(e) {
    console.log('switch1 發生 change 事件，攜帶值爲', e.detail.value)
  },
  switch2Change(e) {
    console.log('switch2 發生 change 事件，攜帶值爲', e.detail.value)
  }
})

textarea
多行輸入框

value 輸入框的內容
placeholder 輸入框爲空時佔位符
placeholder-style 指定 placeholder 的樣式
placeholder-class 指定 placeholder 的樣式類
disabled 是否禁用
maxlength 最大輸入長度
auto-focus 自動聚焦，拉起鍵盤
focus 獲取焦點
cursor 指定focus時的光標位置

若是看了以爲不錯

點贊！轉發！

達叔小生：日後餘生，惟獨有你
You and me, we are family !
90後帥氣小夥，良好的開發習慣；獨立思考的能力；主動而且善於溝通
簡書博客： 達叔小生
https://www.jianshu.com/u/c785ece603d1

結語

• 下面我將繼續對 其餘知識 深刻講解 ，有興趣能夠繼續關注
• 小禮物走一走 or 點贊