一，button組件

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

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

效果如下：

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

"style": "v2"

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

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

效果如下：

plain屬性，是否鏤空，背景色透明，默認(rèn)值是default，但我們改為true時(shí)

效果如下：

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

效果如下：

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

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

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

open-type：

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

二，input組件

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

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

password屬性，是否是密碼類型，當(dāng)我們?cè)O(shè)置為true，輸入的密碼就會(huì)自動(dòng)用小黑點(diǎn)顯示

效果如下：

placeholder屬性，當(dāng)輸入框?yàn)榭諘r(shí)作為占位符，里面的文字一般是擔(dān)任提示用戶的角色

三，image組件

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

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

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

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

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

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

四，API三大類

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

4.1 事件監(jiān)聽API

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

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

4.2 同步API

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

4.3 異步API

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

本次先對(duì)API的分類做簡(jiǎn)單的闡述，后面再用實(shí)例來運(yùn)用這些API

總結(jié)

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

最新評(píng)論