一，button組件

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

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

效果如下：

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

"style": "v2"

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

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

效果如下：

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

效果如下：

loading屬性，是否設(shè)置名稱前帶loading圖標，一般會設(shè)置在用戶發(fā)生點擊事件后或者頁面還在加載時，用JS對loading的屬性值進行數(shù)據(jù)綁定并操作。

效果如下：

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

button組件中還有很多強大的屬性，比如open-type可以直接調(diào)用微信的開放能力，比如觸發(fā)用戶轉(zhuǎn)發(fā)等等，感興趣可以去了解一下

補充：button 開發(fā)能力

open-type：

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

二，input組件

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

• value屬性，這個屬性我們很熟悉，這里不多做闡述，就是來設(shè)置輸入框的初始內(nèi)容，一般對用戶作為一個默認值，用戶可能可以直接用，如性別，默認為男，需要注意的是，該屬性在小程序中是必填屬性
• type屬性，輸入鍵盤的類型，當我們使用小程序表單提交東西時，會發(fā)現(xiàn)它彈出的鍵盤是不一樣的，如正常的文字輸入鍵盤，還有特殊的密碼輸入鍵盤，這些就是靠該屬性實現(xiàn)的。屬性值及說明如下表

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

效果如下：

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

三，image組件

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

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

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

1. src屬性，這個不用多說，與img標簽的一樣，指圖片資源地址。
2. mode屬性，這個是比較重要的屬性，它設(shè)置了圖片的裁剪、縮放模式，默認值是scaleToFill，稱為縮放模式，也就是不保持縱橫比縮放，將原圖片的寬高拉伸到能完全填滿image元素，該屬性值容易出現(xiàn)圖片變形，其他屬性值如下。

屬性值	說明	圖
aspectFit	保持縱橫比縮放圖片，是圖片的 長邊能完全顯示，能完全顯示圖片，但短邊image組件可能出現(xiàn)空白塊
aspectFill	保持縱橫比縮放圖片，只保證短邊可以完全顯示，也就是說，長邊可能會因為過長被截取
widthFix	image元素的寬度不變，高度自動變化，原圖寬高不改變	-
heightFit	image元素的高度不變，寬度自動變化，原圖寬高不改變	-
center	裁剪模式，不縮放圖片，只顯示圖片的中間區(qū)域

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

四，API三大類

最后我們再講一下API的三大類，API可以分為事件監(jiān)聽API、同步API、異步API

4.1 事件監(jiān)聽API

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

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

4.2 同步API

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

4.3 異步API

• 通過success、false、conplete接收調(diào)用的結(jié)果
• 如wx.request()，發(fā)起網(wǎng)絡(luò)請求，可以通過success回調(diào)函數(shù)接收數(shù)據(jù)

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

總結(jié)

到此這篇關(guān)于微信小程序button、input和image表單組件的文章就介紹到這了,更多相關(guān)微信小程序表單組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論