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

一，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元件的submitreset事件，當我們將屬性值設定為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屬性，輸入鍵盤的型別，當我們使用小程式表單提交東西時，會發現它彈出的鍵盤是不一樣的，如正常的文字輸入鍵盤，還有特殊的密碼輸入鍵盤，這些就是靠該屬性實現的。屬性值及說明如下表

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表單元件的文章就介紹到這了,更多相關微信小程式表單元件內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！