一文解決微信小程序button、input和image表單組件

Posted on by

一，button組件

第一個來介紹的就是button組件，我們可以發現它和HTML中的按鈕標簽同名，是的，該組件在WXML中也是充當按鈕設置功能，不過，相比之下，button組件的功能可比後者多多瞭，下面我們來詳細介紹一下，微信小程序給我們提供哪些button功能。

type屬性，用來設置按鈕的樣式類型，目前有三個值，primary綠色，default白色，warn紅色，我們可以從它們的值的意思理解它們表示什麼，綠色是重要的，紅色是警告，這兩種顏色會給用戶提示的效果，默認樣式為白色

效果如下：

tip： 有的小夥伴可能會看到的樣式有一些差別，這可能是你沒有設置最新樣式的版本，這時候我們需要到app.json文件進行設置

"style": "v2"

這樣就是聲明以最新樣式顯示

size屬性，用來設置按鈕的大小，默認為default，也就是正常大小，我們還可以選擇迷你按鈕，將size設置為mini

效果如下：

plain屬性，是否鏤空，背景色透明，默認值是default，但我們改為true時

效果如下：

loading屬性，是否設置名稱前帶loading圖標，一般會設置在用戶發生點擊事件後或者頁面還在加載時，用JS對loading的屬性值進行數據綁定並操作。

效果如下：

form-type屬性，無默認值，該屬性是用於form組件中，點擊觸發form組件的submit\reset事件，當我們將屬性值設置為submit觸發提交表單事件，而reset則是重置表單事件。

button組件中還有很多強大的屬性，比如open-type可以直接調用微信的開放能力，比如觸發用戶轉發等等，感興趣可以去瞭解一下

補充：button 開發能力

open-type：

  1. contact 直接打開 客服對話功能 需要在微信小程序的後臺配置 隻能夠通過真機調試來打開
  2. share 轉發當前的小程序 到微信朋友中 不能把小程序 分享到 朋友圈
  3. getPhoneNumber 獲取當前用戶的手機號碼信息 結合一個事件來使用 不是企業的小程序賬號 沒有權限來獲取用戶的手機號碼
    1 綁定一個事件 bindgetphonenumber
    2 在事件的回調函數中 通過參數來獲取信息
    3 獲取到的信息 已經加密過瞭
    需要用戶小程序的後臺服務器，在後臺服務器中進行解析手機號碼，返回到小程序中就可以看到信息瞭
  4. getUserInfo 獲取當前用戶的個人信息
    1 使用方法 類似 獲取用戶的手機號碼
    2 可以直接獲取 不存在加密的字段
  5. launchApp 在小程序當中 直接打開 app
    1 需要現在 app中 通過app的某個鏈接 打開 小程序
    2 在小程序 中 再通過 這個功能 重新打開 app
  6. openSetting 打開小程序內置的 授權頁面，授權頁面中 隻會出現用戶曾經點擊過的權限
  7. feedback 打開 小程序內置的 意見反饋頁面 ，隻能夠通過真機調試來打開

二，input組件

第二個要講的是input組件，內容表述為輸入框，該組件大致與HTML中的input標簽相同，為原生組件，不過我們還是要註意該組件的用法

  • value屬性，這個屬性我們很熟悉，這裡不多做闡述，就是來設置輸入框的初始內容，一般對用戶作為一個默認值，用戶可能可以直接用，如性別，默認為男，需要註意的是，該屬性在小程序中是必填屬性
  • type屬性，輸入鍵盤的類型，當我們使用小程序表單提交東西時，會發現它彈出的鍵盤是不一樣的，如正常的文字輸入鍵盤，還有特殊的密碼輸入鍵盤，這些就是靠該屬性實現的。屬性值及說明如下表
屬性值 說明
text 文本輸入鍵盤
number 數字輸入鍵盤
idcard 身份證輸入鍵盤
safe-password 密碼安全輸入鍵盤

password屬性，是否是密碼類型，當我們設置為true，輸入的密碼就會自動用小黑點顯示

效果如下：

placeholder屬性，當輸入框為空時作為占位符，裡面的文字一般是擔任提示用戶的角色

三，image組件

在功能上類似於HTML中的img標簽，用來承載圖片，不過在使用上，image多瞭幾個微信提供的屬性，在功能上更加多樣，支持JPG、PNG、SVG、WEBP、GIF等格式，接下來我們就來說說這個組件有什麼屬性功能。

首先需要說一下image組件是有默認大小的，寬為300px，高為240px，這意味著即使你裡面沒有放圖片，空圖片，在沒有改變其寬高的情況下，空圖片是會占據一個寬300px高240px的空間的，如下所示。

<!-- html -->
<image></image>
<!-- css -->
image{
 	border: solid lightcoral 2px;
}

  1. src屬性，這個不用多說，與img標簽的一樣，指圖片資源地址。
  2. mode屬性，這個是比較重要的屬性，它設置瞭圖片的裁剪、縮放模式，默認值是scaleToFill，稱為縮放模式，也就是不保持縱橫比縮放，將原圖片的寬高拉伸到能完全填滿image元素，該屬性值容易出現圖片變形，其他屬性值如下。
屬性值 說明 圖
aspectFit 保持縱橫比縮放圖片，是圖片的 長邊能完全顯示，能完全顯示圖片，但短邊image組件可能出現空白塊
aspectFill 保持縱橫比縮放圖片，隻保證短邊可以完全顯示，也就是說，長邊可能會因為過長被截取
widthFix image元素的寬度不變，高度自動變化，原圖寬高不改變 –
heightFit image元素的高度不變，寬度自動變化，原圖寬高不改變 –
center 裁剪模式，不縮放圖片，隻顯示圖片的中間區域

show-menu-by-longpress屬性，長按圖片可以顯示菜單，發送給朋友\收藏\保存圖片\搜一搜…默認值為false，這個在使用中可能比較常見，常常會在二維碼圖片上設置

四，API三大類

最後我們再講一下API的三大類，API可以分為事件監聽API、同步API、異步API

4.1 事件監聽API

顧名思義，該類API就是用來監聽某些事件的觸發，而事件就是渲染層到邏輯層的通訊方式，我們通過事件監聽獲取用戶在渲染層的行為，從而在邏輯層進行響應、業務處理。

  • 這類API以on開頭，如wx.onWindowResize(function callback)，監聽窗口尺寸變化的事件，如果觸發，即調用後面的回調函數。
  • wx對象在小程序相當於瀏覽器的window，屬於微信小程序的頂級對象，可以全局調用

4.2 同步API

  • 以Sync結尾，執行的結果可以通過函數返回值直接獲取，但執行錯誤時，直接返回異常
  • 如wx.setStorageSync('key', 'value')，向本地存儲中寫入內容

4.3 異步API

  • 通過success、false、conplete接收調用的結果
  • 如wx.request()，發起網絡請求，可以通過success回調函數接收數據

本次先對API的分類做簡單的闡述，後面再用實例來運用這些API

總結

到此這篇關於微信小程序button、input和image表單組件的文章就介紹到這瞭,更多相關微信小程序表單組件內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：