手把手教你在小程式中開發一個搜尋輸入框組件

這篇文章跟大家分享一個小程式開發實戰，介紹一下怎麼開發一個搜尋輸入框元件，希望對大家有幫助！

我們這次來談談元件的開發。由於小程式可能由許多頁面組成，而不同頁面可能會有相似的部分，所以我們要將頁面合理地拆分成不同的元件，就像一塊塊積木一樣，然後再透過組合不同元件完成一個個頁面的組裝，這就是為什麼會有元件開發這個概念。 【相關學習推薦：小程式開發教學】

實戰演練

##那麼話不多說，我們直接開始實戰。如何將一個頁面拆分成元件是由一系列頁面開發後累積的經驗所指引的，我們先來做幾個頁面找找感覺。

例如我們先來做一個小程式首頁，我們常見的許多應用程式首頁大多是一個內容列表，其實它有一個比較專業的名稱，叫做「feed流」。

例如上圖，分別是微博、知乎、美團和boss直聘的小程式首頁。可以看到，它們基本上都是由一個頂部的

搜尋輸入框和主體部分一個可以持續上劃的內容列表所組成的。

首頁開發

那麼按照這個思路，我們開始自己的小程式首頁開發。

首先，我們打開

app.json文件，其中pages中的所配置的第一項則是小程式首頁。

接著，我們打開首頁的

index.wxml檔案並清空它，然後開始寫我們自己的首頁內容。

清空前

清空後

#我們可以將上圖中所指的

熱重載打開，這樣可以在每次修改完頁面的內容後即時看到修改效果，而無需每次手動點擊編譯。

另外，我們發現上面四個主流小程式的首頁都沒有標題內容，所以我們也將

app.json中的navigationBarTitleText欄位改為空字符串即可。

搜尋框元件

我們上面提到過，首頁由頂部的搜尋輸入框和主體部分的清單所組成，這就已經天然地將首頁拆分成了

搜尋輸入框 內容清單兩個元件了，因為這兩個元素都可能是被其他頁面重複使用的。

那麼先來發展搜尋輸入框，我們以最簡單的形式為例，例如上面主流小程式中第2個和第4個。即一個

圓角輸入框，輸入框內部最左邊有一個搜尋圖示，輸入框內部有一行預設的提示文字。

內建元件input

輸入框我們會使用小程式提供的內部元件

input，文件可見input

然後我們在開發頁面或元件的時候，注意在每一個元素層級都盡量以一個

view標籤作為容器，對元素進行包裹，這樣後面對於元素在佈局中的操控都會更加容易。

例如我們在

pages/index/index.wxml#中寫下如上程式碼，頁面就會呈現出左邊的樣子。

這裡我們使用了小程式內建元件

input，並透過placeholder屬性為其設定了預設提示文字。

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

我們為元素標籤新增了樣式屬性

接著在

index.wxss中清空原本的內容，然後加入了我們自己的樣式程式碼。

樣式調試

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

然後，當我們把頁面樣式調整到最佳效果後，直接將偵錯器中的樣式程式碼選取並複製，隨即貼上到我們的index .wxss中即可。

圖示引入

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

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

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

然後我們新建一個assets資料夾用於存放小程式的靜態文件，例如圖片、公共樣式等。

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

#然後我們回到開發者工具，可以看到剛才拷貝而來的搜尋圖標已經準備好。接著，我們透過樣式程式碼來將它顯示在輸入框中

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

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

位置佈局

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

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

真機預覽

那麼經過上述開發，我們的首頁已經初具雛形了。這裡我們再介紹一個開發者工具所提供的強大功能──真機預覽功能。

如圖點擊面板頂部的預覽按鈕，開發者工具會將目前小程式專案編譯為可預覽狀態，然後透過登入了該小程式的開發者的微信進行二維碼掃描，即可在真機中看到目前小程式的效果

總結

#好了，最後我們總結今天講了哪些內容。今天我們首先引入了元件開發的概念以及為什麼要進行元件拆分，並透過一個實例介紹了開發元件過程中所用到的一些開發技巧，包括

• 內建元件使用
• 樣式偵錯方法
• 圖片資源引入
• 真機預覽

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

更多程式相關知識，請造訪：程式設計影片！ ！

以上是手把手教你在小程式中開發一個搜尋輸入框組件的詳細內容。更多資訊請關注PHP中文網其他相關文章！