為元件設定乙個容器，在容器中放置搜尋圖示、輸入框、清除文字按鈕和搜尋按鈕。
搜尋container：高度 100 rpx，背景色 #eee，flex 布局。
input-wrapper：高度 80 rpx，背景色 #fff，flex 布局，border-radius: 20rpx。
search-icon：寬高 32 rpx。
input：字型和游標顏色 #000，字型大小 32 rpx。
close-icon-wrapper：寬高 80 rpx，絕對定位。
text：搜尋按鈕寬 110 rpx，高 65 rpx，絕對定位，左邊框 2rpx solid #eee。
.container
.input-wrapper
.input-wrapper .search-icon
.input-wrapper input
.input-wrapper .close-icon-wrapper
.input-wrapper .close-icon
.input-wrapper text
元件的構造器中要注意區分 properties 和 data，properties 中寫元件的對外屬性，data 寫元件的對內屬性。在本搜尋元件中 placeholder 和 value 從頁面傳來，所以它們寫在 properties 中，控制清除按鈕是否出現的 showcloseicon 要寫在 data 中。
properties: ,
inputvalue:
},data: ,
事件流程
（1）游標不聚焦，沒有任何輸入——顯示搜尋圖示、placeholder和搜尋按鈕。
（2）游標聚焦，沒有任何輸入——游標閃爍，顯示搜尋圖示、placeholder和搜尋按鈕。
（3）游標聚焦，有輸入——游標閃爍，顯示搜尋圖示、輸入文字、清除按鈕和搜尋按鈕。
（4）游標不聚焦，有輸入——顯示搜尋圖示、輸入文字、清除按鈕和搜尋按鈕。
（5）按回車搜尋——清除按鈕隱藏。
（6）點選搜尋按鈕——清除按鈕隱藏。
由此可見，需要 input 元件的聚焦和鍵盤輸入事件。
inputfocused：如果聚焦時，輸入框中有內容，顯示 closeicon；
handleinput：如果輸入時沒有內容，不顯示 closeicon，有內容，顯示 closeicon 並把值存入 value。
handlesearch：點選回車後，不顯示 closeicon。
triggerevent：自定義元件觸發事件時，需要使用 triggerevent 方法，指定事件名、detail物件和事件選項。文件詳情
inputfocused(e) );}},
handleinput(e) );
} else );
this.triggerevent('handleinput', );}},
handlesearch() );
console.log('handlesearch', this.data.inputvalue);
},搜尋
分別為 closeicon 和 搜尋按鈕新增點選事件。
clearvalue() );
this.setdata();
},ontap() );
console.log('ontap', this.data.inputvalue);
},工程的名字是 cookbook，這裡元件字首統一為 ck。
}handleinput(e) );
},至此，搜尋元件已完成初步開發。
讚賞
小程式開發
這次小程式開發所有功能和元件全部都是自己手寫 的，因為之前也沒意識到用別人的外掛程式，所以花費了比較大的力氣，幾乎每天晚上都是7點半之後才下班，雖然辛苦了幾個月，但是還是有所收穫的，記下筆記，放下下次可以快速上手 1.小程式的模態框有以下幾種，差不過等於alert confirm，而且自動居中，這些...
小程式開發
小程式開發基本功能介紹 一 小程式結構介紹 index資料夾舉例 下屬4個不同字尾檔案 1 js 就是頁面內的js檔案，頁面中的變數 監聽事件全都在這裡 2 json 頁面的配置檔案，其實就類似後端的配置檔案，就看成 properties或者xml就好了 3 wxml 頁面的結構檔案，檢視可以發現就...
從0總結iOS開發（一）
最近換了份工作，當然還是ios開發，感覺自己從程式設計師到程式猿。從每週的雙休6點下班，20分鐘路程 到每週8點加班單休，兩個小時的路程。中間一段時間的調整了心態，一段時間算是從新思考了自己的人生 也算是職業規劃吧 我個人理解的區別在於，你在專案的進步，什麼樣子的目標，什麼樣的努力，就會有什麼樣子的...