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

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

實(shí)戰(zhàn)演練

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

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

例如上圖，分別是微博、知乎、美團(tuán)和boss直聘的小程式首頁?？梢钥吹?，它們基本上都是由一個頂部的

搜尋輸入框和主體部分一個可以持續(xù)上劃的內(nèi)容列表所組成的。

首頁開發(fā)

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

首先，我們打開

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

接著，我們打開首頁的

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

清空前

清空後

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

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

另外，我們發(fā)現(xiàn)上面四個主流小程式的首頁都沒有標(biāo)題內(nèi)容，所以我們也將

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

搜尋框元件

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

搜尋輸入框 內(nèi)容清單兩個元件了，因?yàn)檫@兩個元素都可能是被其他頁面重複使用的。

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

圓角輸入框，輸入框內(nèi)部最左邊有一個搜尋圖示，輸入框內(nèi)部有一行預(yù)設(shè)的提示文字。

內(nèi)建元件input

輸入框我們會使用小程式提供的內(nèi)部元件

input，文件可見input

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

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

例如我們在

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

這裡我們使用了小程式內(nèi)建元件

input，並透過placeholder屬性為其設(shè)定了預(yù)設(shè)提示文字。

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

我們?yōu)樵貥?biāo)籤新增了樣式屬性

接著在

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

樣式調(diào)試

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

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

圖示引入

最後，我們還需要在輸入框內(nèi)部的最左側(cè)顯示一個搜尋樣式的圖標(biāo)，那麼首先我們要從網(wǎng)路上找一個搜尋樣式的圖片。這裡推薦使用iconfont 這個網(wǎng)站進(jìn)行圖示篩選

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

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

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

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

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

#首先，我們可以使用上圖所示的方法，點(diǎn)擊偵錯器左上角的圖標(biāo)，來查看我們頁面目前的元素結(jié)構(gòu)。方法是先點(diǎn)擊調(diào)試器左上角的查看圖標(biāo)，然後將滑鼠移動到左側(cè)小程式預(yù)覽中的任意位置，可以看到右側(cè)面板會隨著左側(cè)選中的位置而高亮提示你選中的元素所對應(yīng)的代碼區(qū)域。

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

位置佈局

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

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

真機(jī)預(yù)覽

那麼經(jīng)過上述開發(fā)，我們的首頁已經(jīng)初具雛形了。這裡我們再介紹一個開發(fā)者工具所提供的強(qiáng)大功能──真機(jī)預(yù)覽功能。

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

總結(jié)

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

• 內(nèi)建元件使用
• 樣式偵錯方法
• 圖片資源引入
• 真機(jī)預(yù)覽

#當(dāng)然，本篇其實(shí)還沒有進(jìn)行真正地進(jìn)行元件開發(fā)，因?yàn)槲覀冞€是直接在頁面文件內(nèi)進(jìn)行了元素的開發(fā)，下一篇我們將會把首頁按照搜尋輸入框組件 內(nèi)容列表組件進(jìn)行拆分，從而詳細(xì)介紹小程式組件開發(fā)的方法。

更多程式相關(guān)知識，請?jiān)煸L：程式設(shè)計(jì)影片！ ！

以上是手把手教你在小程式中開發(fā)一個搜尋輸入框組件的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！