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

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

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

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

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

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

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

首頁(yè)開(kāi)發(fā)

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

首先，我們打開(kāi)

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

接著，我們打開(kāi)首頁(yè)的

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

清空前

清空後

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

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

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

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

搜尋框元件

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

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

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

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

內(nèi)建元件input

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

input，文件可見(jiàn)input

然後我們?cè)陂_(kāi)發(fā)頁(yè)面或元件的時(shí)候，注意在每一個(gè)元素層級(jí)都盡量以一個(gè)

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

例如我們?cè)?p>pages/index/index.wxml#中寫下如上程式碼，頁(yè)面就會(huì)呈現(xiàn)出左邊的樣子。

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

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

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

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

接著在

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

樣式調(diào)試

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

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

圖示引入

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

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

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

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

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

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

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

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

位置佈局

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

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

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

那麼經(jīng)過(guò)上述開(kāi)發(fā)，我們的首頁(yè)已經(jīng)初具雛形了。這裡我們?cè)俳榻B一個(gè)開(kāi)發(fā)者工具所提供的強(qiáng)大功能──真機(jī)預(yù)覽功能。

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

總結(jié)

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

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

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

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

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