本篇文章給大家分享一個小程序開發(fā)實戰(zhàn)，介紹一下怎么開發(fā)一個搜索輸入框組件，希望對大家有所幫助！

我們這次來談談組件的開發(fā)。由于小程序可能由很多頁面組成，而不同頁面可能會有相似的部分，所以我們要將頁面合理拆分成不同的組件，就像一塊塊積木一樣，然后再通過組合不同組件完成一個個頁面的組裝，這就是為什么會有組件開發(fā)這個概念?！鞠嚓P學習推薦：小程序開發(fā)教程】

實戰(zhàn)演練

那么話不多說，我們直接開始實戰(zhàn)。如何將一個頁面拆分成組件是由一系列頁面開發(fā)后積累的經驗所指引的，我們先來做幾個頁面找找感覺。

比如我們先來做一個小程序首頁，我們常見的很多應用首頁大多是一個內容列表，其實它有一個比較專業(yè)的名稱，叫做“feed流”。

比如上圖，分別是微博、知乎、美團和boss直聘的小程序首頁?？梢钥吹剑鼈兓径际怯梢粋€頂部的搜索輸入框和主體部分一個可以持續(xù)上劃的內容列表所組成的。

首頁開發(fā)

那么按照這個思路，我們開始自己的小程序首頁開發(fā)。

首先，我們打開app.json文件，其中pages中的所配置的第一項則是小程序首頁。

接著，我們打開首頁的index.wxml文件并清空它，然后開始編寫我們自己的首頁內容。

清空前

清空后

我們可以將上圖中所指的熱重載打開，這樣可以在每次修改完頁面的內容后實時看到修改效果，而無需每次手動點擊編譯。

另外，我們發(fā)現(xiàn)上面四個主流小程序的首頁都沒有標題內容，所以我們也將app.json中的navigationBarTitleText字段改為空字符串即可。

搜索框組件

我們上面提到過，首頁由頂部的搜索輸入框和主體部分的列表所組成，這就已經天然地將首頁拆分成了搜索輸入框+內容列表兩個組件了，因為這兩個元素都可能是被其他頁面重復使用的。

那么先來開發(fā)搜索輸入框，我們以最簡單的形式為例，比如上面主流小程序中第2個和第4個。即一個圓角輸入框，輸入框內部最左側有一個搜索圖標，輸入框內部有一行默認的提示文字。

內置組件input

輸入框我們會使用小程序提供的內部組件input，文檔可見 input

然后我們在開發(fā)頁面或組件的時候，注意在每一個元素層級都盡量以一個view標簽作為容器，對元素進行包裹，這樣后面對于元素在布局中的操控都會更加容易。

比如我們在pages/index/index.wxml中寫下如上代碼，頁面就會呈現(xiàn)出左側的樣子。

這里我們使用了小程序內置組件input，并通過placeholder屬性為其設置了默認提示文字。

接著，我們需要使用一些樣式代碼來對搜索框進行樣式修飾。

我們?yōu)樵貥撕炋砑恿藰邮綄傩?/p>

接著在index.wxss中清空原本的內容，然后添加了我們自己的樣式代碼。

樣式調試

這里講一個非常實用的開發(fā)小技巧，如上圖所示，我們可以使用開發(fā)者工具提供的調試器查看頁面實際渲染出的結構以及樣式屬性，并且我們可以直接在這里對頁面元素的樣式進行修改并實時看到效果。甚至對于顏色類的屬性我們可以像上圖中的操作，點擊當前顏色喚出顏色選擇面板，進而調整該元素的顏色。

然后，當我們把頁面樣式調整到最佳效果后，直接將調試器中的樣式代碼選中并復制，隨即粘貼到我們的index.wxss中即可。

圖標引入

最后，我們還需要在輸入框內部的最左側顯示一個搜索樣式的圖標，那么首先我們需要從網上找一個搜索樣式的圖片。這里推薦使用 iconfont 這個網站進行圖標篩選

我們選擇好圖標后，可以按照下圖對圖標的顏色和大小進行修改，然后下載。

接著，我們將下載好的圖片放到小程序項目文件夾中，打開小程序項目文件夾的方式有很多種。比如你可以右鍵開發(fā)者工具中的資源管理器中任何一個文件，然后選擇在資源管理器中顯示，或者點擊右上角的詳情面板，然后點擊本地目錄一項。

然后我們新建一個assets文件夾用于存放小程序的靜態(tài)文件，比如圖片、公共樣式等。

我們將剛剛下載好的搜索圖片放進assets中的images目錄，并將圖片名稱改為英文名稱（一般建議文件命名都用英文命名，以避免一些程序解析錯誤）

然后我們回到開發(fā)者工具，可以看到剛才拷貝而來的搜索圖標已經準備好。接著，我們通過樣式代碼來將它顯示在輸入框中

首先，我們可以使用上圖所示的方法，點擊調試器左上角的圖標，來查看我們頁面當前的元素結構。方法是先點擊調試器左上角的查看圖標，然后將鼠標移動到左側小程序預覽中的任意位置，可以看到右側面板會隨著左側選中的位置而高亮提示你選中的元素所對應的代碼區(qū)域。

通過這樣的方法，我們可以直觀地了解我們的頁面目前所對應的代碼結構，從而決定我們新加入的圖標元素應該放到哪層容器比較合適。

位置布局

經過如上操作，我們最終在search-bar這一層容器內部的第一行，即與input同級的位置新增了另外一個內置組件image，然后通過src屬性指明要顯示的圖片位置。這里當你在image標簽中設置src屬性時，開發(fā)者工具會自動提示可以選擇的路徑。由于我們的圖片位置在當前文件所在目錄的外部，所以我們一開始只需要輸入..來進行上一級目錄，接下來開發(fā)者工具就會提示我們上一級目錄都有哪些文件。

最終，我們通過在index.wxss中使用CSS語法編寫合理的樣式，將搜索圖標顯示到了輸入框左側垂直居中位置。具體語法可參考 相關文檔 進行學習

真機預覽

那么經過上述開發(fā)，我們的首頁已經初具雛形了。這里我們再介紹一個開發(fā)者工具所提供的強大功能——真機預覽功能。

如圖點擊面板頂部的預覽按鈕，開發(fā)者工具會將當前小程序項目編譯為可預覽狀態(tài)，然后通過登錄了該小程序的開發(fā)者的微信進行二維碼掃描，即可在真機中看到當前小程序的效果

總結

好了，最后我們總結一下今天講了哪些內容。今天我們首先引入了組件開發(fā)的概念以及為什么要進行組件拆分，并通過一個實例介紹了開發(fā)組件過程中所用到的一些開發(fā)技巧，包括

• 內置組件使用
• 樣式調試方法
• 圖片資源引入
• 真機預覽

當然，本篇其實還沒有進行真正地進行組件開發(fā)，因為我們還是直接在頁面文件內進行了元素的開發(fā)，下一篇我們將會把首頁按照搜索輸入框組件+內容列表組件進行拆分，從而詳細介紹小程序組件開發(fā)的方法。

更多編程相關知識，請訪問：編程視頻?。?/p>

以上是手把手教你在小程序中開發(fā)一個搜索輸入框組件的詳細內容。更多信息請關注PHP中文網其他相關文章！