一，引言

微信相信已經(jīng)成為當(dāng)下社會(huì)人手機(jī)必裝的幾個(gè)App之一，從一開始的飽受質(zhì)疑以及不被看好到如今的將近八億用戶量遗锣，微信一直在以一種獨(dú)特的方式影響著中國(guó)移動(dòng)互聯(lián)網(wǎng)App生態(tài)鏈抚垃。2017年1月9日，微信掌門人張小龍宣布微信小程序正式上線汰聋。什么是微信小程序，張小龍說： “小程序是一種不需要下載喊积、安裝即可使用的應(yīng)用烹困，它出現(xiàn)了觸手可及的夢(mèng)想，用戶掃一掃或者搜一下即開打開應(yīng)用乾吻，也出現(xiàn)了用完即走的理念髓梅，用戶不用關(guān)心安裝太多應(yīng)用的問題，應(yīng)用隨處可用绎签，但又無須安裝卸載”枯饿。這段話體現(xiàn)了小程序的作用和意義，總結(jié)一下就是：“用完即走诡必，無額外負(fù)擔(dān)的輕量化工具”奢方。最近幾天看網(wǎng)頁版Boss直聘，覺得整體風(fēng)格很不錯(cuò)，結(jié)合Boss直聘作為工具類產(chǎn)品的定位蟋字，很符合微信小程序“用完即走”的理念稿蹲，便萌生了做一個(gè)Boss直聘的微信小程序的想法，話不多說

先貼出效果圖

2.1主頁

2-2搜索頁

2-3-1崗位詳情頁

2-3-2崗位詳情頁

我們做的這個(gè)微信小程序功能上很明確愉老，就是為用戶提供一個(gè)方便的查找信息的入口场绿，在首頁你可以在搜索框輸入你想要查找的職位信息，比如搜索“北京”會(huì)跳出北京市的職位嫉入，搜索“Web前端”會(huì)出來對(duì)應(yīng)的結(jié)果焰盗，點(diǎn)擊每個(gè)結(jié)果會(huì)跳轉(zhuǎn)到對(duì)應(yīng)的信息詳情頁，在詳情頁你可以查看具體崗位需求和聯(lián)系人以及公司信息等信息咒林。

項(xiàng)目路徑：

2-4項(xiàng)目路徑

二熬拒，準(zhǔn)備工作

1.微信Web開發(fā)者工具（我用的是0.15.152900版本，其他版本可能會(huì)有些許變化垫竞，具體請(qǐng)參考微信官方更新日志）澎粟。

2.一個(gè)順手的編輯器，雖然微信官方提供的開發(fā)工具編輯功能也不錯(cuò)欢瞪，不過還是比較喜歡自己調(diào)教好的Atom(畢竟是來自未來的“hackable text editor“活烙，笑~)。

3.Easy-Mock遣鼓，一項(xiàng)簡(jiǎn)單好用的數(shù)據(jù)生成服務(wù)啸盏，她可以幫助我們模擬后臺(tái)數(shù)據(jù)。

4.一顆不輕言放棄的心（逃~）骑祟。

先來看一波開發(fā)工具界面

4-1界面

畢竟”鵝廠“出品回懦，還是很漂亮的有木有~

我們主要用到的就是位于開發(fā)工具最左邊靠上的三個(gè)選項(xiàng)卡

1.編輯，顧名思義次企，就是我們主要的代碼顯示和編輯區(qū)域怯晕。

2.調(diào)試，和chrome自帶的調(diào)試器很像缸棵，主要輸出調(diào)試信息舟茶，基本功能都實(shí)現(xiàn)了。

3.項(xiàng)目堵第，在這里你主要可以生成二維碼以便在手機(jī)上直接查看真機(jī)運(yùn)行效果稚晚，另外還提供一些其他的實(shí)用設(shè)置。

編輯和調(diào)試選項(xiàng)卡在右邊都會(huì)顯示一個(gè)實(shí)時(shí)預(yù)覽的小程序界面型诚，每次保存都會(huì)實(shí)時(shí)刷新，很方便~

相信細(xì)心的你一定發(fā)現(xiàn)了文章一開始貼出的項(xiàng)目路徑里顯示的文件里奇怪的文件后綴名鸳劳，其實(shí)這不是什么新東西哦狰贯，這只是微信小程序官方為了和傳統(tǒng)意義上的HTML/CSS區(qū)分開而新推的專門用于小程序開發(fā)的文件格式，wxml對(duì)應(yīng)傳統(tǒng)的html，wxss對(duì)應(yīng)css涵紊，js后綴格式保持不變傍妒。

到這里是不是手已經(jīng)開始癢了？現(xiàn)在就開始動(dòng)手吧~

三摸柄，Link-Start２贰！驱负！

1.定義全局樣式

先讓我們創(chuàng)建一個(gè)新項(xiàng)目

4-1新建項(xiàng)目

創(chuàng)建好項(xiàng)目后嗦玖，一些文件夾開發(fā)者工具會(huì)自動(dòng)幫我們創(chuàng)建好，如圖

4-2新建項(xiàng)目路徑

1.pages是小程序的主要目錄跃脊，里面放著你的小程序的頁面文件（比如自動(dòng)生成的index文件夾下放著的就是主頁的結(jié)構(gòu)以及樣式等文件）宇挫。

2.utils里放著一些微信自帶的處理函數(shù)，當(dāng)然你也可以自己編寫酪术。

3.名字為app的三個(gè)文件定義了全局的一些數(shù)據(jù)和樣式等等器瘪。

現(xiàn)在先讓我們到app.json文件定義一些全局的數(shù)據(jù)

4-3全局的一些樣式數(shù)據(jù)

這是JSON格式的數(shù)據(jù)，里面的一些API定義了我們微信小程序的外貌基本樣式绘雁，pages表示的是微信小程序的page頁面路徑橡疼，window定義的是內(nèi)容區(qū)以外的樣式，比如”navgationBarBackgroundColor“,意思就是標(biāo)題欄的背景顏色庐舟。以下是一些常用的配置屬性

4-4window屬性配置項(xiàng)

另外值得一提的是微信小程序官方原生提供了對(duì)tabBar開發(fā)的支持欣除，只需要在app.json文件里簡(jiǎn)單配置一下tabBar的屬性，就可以直接生成對(duì)應(yīng)的tabBar继阻，省去了自己寫樣式的時(shí)間耻涛，提高了開發(fā)效率，給企鵝點(diǎn)個(gè)贊~詳情請(qǐng)看微信小程序開發(fā)者文檔瘟檩。

2.完成主頁的開發(fā)

先來看看我們的主頁

4-2-1主頁

可以看到抹缕，頁面上部是一個(gè)搜索框，負(fù)責(zé)幫助使用我們小程序的人快速找到自己想要的職位墨辛，搜索框以下的部分是我們的職位分類以及細(xì)化崗位卓研，整個(gè)頁面結(jié)構(gòu)還是很清晰的，這里實(shí)現(xiàn)的功能有在搜索框搜索關(guān)鍵詞會(huì)跳轉(zhuǎn)到搜索頁并顯示對(duì)應(yīng)的搜索結(jié)果睹簇，當(dāng)然你也可以直接點(diǎn)擊搜索框下面的細(xì)分職位奏赘，也能跳轉(zhuǎn)到對(duì)應(yīng)的搜索結(jié)果界面。

4-2搜索“廣州”

4-3搜索“Web前端”

4-4搜索頁的結(jié)構(gòu)

什么太惠？view是什么標(biāo)簽磨淌？text又是什么標(biāo)簽？怎么都是些沒見過的標(biāo)簽名呢凿渊？哈哈梁只，其實(shí)她們都是紙老虎缚柳，并不是什么全新的東西，相信聰明的你也看出來了搪锣，view標(biāo)簽對(duì)于著的是我們平時(shí)開發(fā)是用的最多的類似div一樣的塊級(jí)標(biāo)簽秋忙。text標(biāo)簽對(duì)應(yīng)著的是span，p標(biāo)簽构舟，不過和view標(biāo)簽不同的是text可是一個(gè)行內(nèi)標(biāo)簽哦灰追。想知道更多框架請(qǐng)參考微信開發(fā)者文檔組件篇。

代碼中的bindTap狗超，data-index則是負(fù)責(zé)數(shù)據(jù)綁定的弹澎，比如給一個(gè)view標(biāo)簽添加一個(gè)bindTap屬性，其實(shí)就是為該標(biāo)簽添加了一個(gè)手勢(shì)單擊事件抡谐，后面的屬性名表示對(duì)應(yīng)著index.js部分的事件處理函數(shù)裁奇，如bindtap = "bindSesrch"則表示為該標(biāo)簽綁定一個(gè)Tap事件觸發(fā)bindSearch函數(shù)處理，同理麦撵，bindinput = "bindInput"就是為當(dāng)前輸入框綁定一個(gè)輸出事件觸發(fā)時(shí)對(duì)應(yīng)的bindInput處理函數(shù)（雙引號(hào)內(nèi)的是自己定義的函數(shù)名刽肠，雖然沒有硬性規(guī)范，但最好還是取個(gè)自己和他人都能一眼看出函數(shù)作用的名字吧~）免胃，在wxml頁面對(duì)應(yīng)標(biāo)簽綁定好相應(yīng)的函數(shù)后音五，我們就可以跳到對(duì)應(yīng)的js頁面編寫我們的函數(shù)了。

從前面的分析我們知道搜索頁其實(shí)是由一個(gè)搜索框和幾條搜索項(xiàng)組成羔沙，這和我們現(xiàn)在模擬的情況有哪些相同又有哪些不同呢躺涝？

對(duì)，沒錯(cuò)扼雏，那就是對(duì)于每條搜索結(jié)果來說坚嗜，信息在每個(gè)項(xiàng)里的位置和格式基本是不變的，只是數(shù)據(jù)上發(fā)生了變化诗充，那么我們就可以這樣考（tou）慮（lan）：只編寫一個(gè)項(xiàng)目的模版苍蔬，但是在對(duì)應(yīng)需要存放數(shù)據(jù)的地方留好接口，這樣我們可以調(diào)用微信小程序官方提供block標(biāo)簽的"wx:for","wx:key"屬性來把對(duì)應(yīng)的數(shù)據(jù)通過循環(huán)來插入我們的模版里蝴蜓，有多少數(shù)據(jù)就生成多少個(gè)實(shí)例碟绑。

頁面數(shù)據(jù)部分我們采用Easy-Mock來模擬后臺(tái)數(shù)據(jù)，登陸Easy-Mock后建立新項(xiàng)目編輯好我們需要的數(shù)據(jù)茎匠，因?yàn)槲覀兒竺鏁?huì)涉及根據(jù)不同的搜索關(guān)鍵詞返回對(duì)應(yīng)的結(jié)果格仲，所以這里模擬數(shù)據(jù)可以多元化一些，盡量體現(xiàn)每個(gè)數(shù)據(jù)的差異性诵冒。這是我們模擬好的數(shù)據(jù)接口（Easy-Mock官網(wǎng)有詳細(xì)的文檔介紹使用凯肋，對(duì)這一步感覺有些陌生的同學(xué)可以去官網(wǎng)看文檔）。

那么數(shù)據(jù)我們有了汽馋，接下來怎么把她放到頁面上去呢侮东？

這時(shí)我們就需要在需要放置數(shù)據(jù)的地方先定義好一個(gè)變量午笛，采用雙大括號(hào)包裹一個(gè)變量的形式，類似這樣"{{你自己定義的變量名}}"苗桂。接下來只要在search.js文件寫好對(duì)應(yīng)的實(shí)現(xiàn)函數(shù)就能把模擬的數(shù)據(jù)給渲染上去了。

頁面樣式部分編寫和傳統(tǒng)CSS樣式編寫一致告组，需要查看的同學(xué)請(qǐng)到我的github上查看樣式源碼煤伟。

到這里我們搜索頁部分的靜態(tài)部分就介紹完了。

現(xiàn)在讓我們來到JS部分木缝，進(jìn)行功能的編寫

4-5搜索部分用到的幾個(gè)功能函數(shù)

第一項(xiàng)“var app = getApp”用于獲取應(yīng)用實(shí)例便锨，Page項(xiàng)則存放我們需要的一些數(shù)據(jù)以及函數(shù)。

當(dāng)頁面中元素綁定的事件產(chǎn)生時(shí)便會(huì)觸發(fā)這里定義好的函數(shù)以實(shí)現(xiàn)對(duì)應(yīng)的功能我碟，我們這里詳細(xì)講述下使用官方API實(shí)現(xiàn)數(shù)據(jù)渲染的實(shí)現(xiàn)細(xì)節(jié)：

4-6數(shù)據(jù)渲染

如圖放案，data對(duì)象存放我們需要的數(shù)據(jù)，因?yàn)槲覀兊臄?shù)據(jù)是從后臺(tái)渲染的矫俺，所以這里先定義一個(gè)空數(shù)組用以接收等下傳過來的數(shù)據(jù)吱殉，onLoad函數(shù)是指頁面加載完成后生效的函數(shù)，在這里我們使用了官方提供的一個(gè)API厘托，"wx.request"友雳，這個(gè)API用以對(duì)我們的數(shù)據(jù)url發(fā)起https請(qǐng)求，獲取到我們需要的數(shù)據(jù)铅匹，接下來我們用setData方法把數(shù)據(jù)放到我們需要她的地方押赊。

有數(shù)據(jù)了，我們就可以開始編寫我們的搜索部分了包斑，先在home.js做好傳遞用戶搜索值的判斷邏輯流礁，如圖

4-7給搜索頁面?zhèn)髦?/div>

我們這里可以看出，用戶搜索關(guān)鍵詞有至少四種情況

1. 用戶搜索工作城市

2. 用戶搜索崗位名稱

3. 用戶搜索公司名字

3.用戶在沒輸入值的情況下點(diǎn)擊了搜索按鈕

（還有更多的情況比如搜索薪資罗丰，工作經(jīng)驗(yàn)等等實(shí)現(xiàn)邏輯基本相同神帅，這里僅提出部分情況供參考）。

這樣主頁部分的編寫基本可以告一段落了丸卷。

3. 完成搜索頁的開發(fā)

現(xiàn)在我們來到搜索頁枕稀，搜索頁的結(jié)構(gòu)和樣式在我的GitHub上有源碼，歡迎指點(diǎn):）谜嫉，

還記得我們?cè)趆ome.js頁面定義過一個(gè)searchValue值萎坷，用以在頁面之間傳參嗎？現(xiàn)在我們可以用上她啦沐兰，我們?cè)趕earch.js的onLoad事件（頁面加載完成后執(zhí)行）里也定義一個(gè)叫searchValue的值來存放從home.js頁面接受到的用戶輸入的值

4-8接受從home.js頁面?zhèn)鱽淼闹?/div>

哆档，獲取到了用戶輸入的值，我們就可以根據(jù)用戶輸入的值做搜索邏輯的判斷啦

4-7搜索邏輯

如圖住闯，我們先定義好一個(gè)空數(shù)組resultArr用來存放搜索的結(jié)果瓜浸，再定義一個(gè)searchArr用來存放我們的數(shù)據(jù)澳淑，下面就是用if語句來進(jìn)行一個(gè)搜索的匹配。從代碼可以看出插佛，我們目前做的只是一個(gè)簡(jiǎn)單的值對(duì)值匹配杠巡，用戶輸入“北京”，就會(huì)顯示所有在北京的職位雇寇，輸入“搜狗”氢拥，則顯示搜狗公司的所有職位，那么當(dāng)用戶輸入“北京市”時(shí)锨侯，我們的小程序就找不到北京的結(jié)果了嫩海，這個(gè)時(shí)候我們可以采用正則表達(dá)式來完成一個(gè)模糊搜索功能的開發(fā)，篇幅有限就不細(xì)講了囚痴，同學(xué)們可以自行完成叁怪。

現(xiàn)在再來看看我們的搜索頁

4-8搜索頁

我們?cè)谶@里也做了一個(gè) 搜索框，方便用戶想進(jìn)一步搜索時(shí)直接在本頁面進(jìn)行搜索而不用回退到主頁深滚，這里的搜索邏輯和上面提到的基本一樣接下來奕谭。有需要的同學(xué)可以去我GitHub上看源碼。

我們?cè)谥黜撍阉魍晏D(zhuǎn)到搜索頁顯示結(jié)果的這個(gè)過程中成箫，可以調(diào)用官方提供的API展箱，wx.showLoading來顯示一個(gè)搜索中的提示，wx.showToast也能完成同樣的目的蹬昌，她們的區(qū)別在于showLoading要手動(dòng)調(diào)用hideLoading在合適的時(shí)候關(guān)閉混驰，shouToast可以自定義顯示的圖標(biāo)以及持續(xù)事件，但整體上不如前者使用靈活皂贩。

4.完成詳情頁的開發(fā)

詳情頁主要負(fù)責(zé)信息的顯示栖榨，整體思路和主頁基本一致，在這里我們又用到了官方的一個(gè)地圖組件用以顯示不同公司的公司地址

--

4-9工作地址

4-10地圖組件

map標(biāo)簽可以為我們創(chuàng)建一個(gè)地圖組件明刷，我們只要傳入對(duì)應(yīng)的經(jīng)緯度就可以讓地圖顯示對(duì)應(yīng)的位置婴栽，添加一個(gè)show-locaton屬性就可以顯示一個(gè)帶有方向的定位點(diǎn)。其他屬性請(qǐng)參考微信官方文檔辈末。

4-11創(chuàng)建地圖上下文

四.尾語

到此愚争，我們的Boss直聘微信小程序開發(fā)就告一段落了，整個(gè)小程序功能不算復(fù)雜但該有的都有挤聘，也還有很多可以繼續(xù)完善的地方轰枝，筆者也是剛開始接觸小程序沒多久，這次抱著學(xué)習(xí)的心態(tài)把自己做小程序的過程和一些心得分享出來组去，希望能和大家交流以提升自己鞍陨，對(duì)這個(gè)微信小程序有疑問或者建議的同學(xué)可以在評(píng)論中提出，謝謝大家从隆！另外诚撵，貼出我的項(xiàng)目的GitHub地址缭裆，喜歡的可以點(diǎn)個(gè)star或者fork。

另外打個(gè)廣告：2017年6月畢業(yè)生求實(shí)習(xí)求收留~ 逃~

最后

? ? ? ?為開源的世界獻(xiàn)上祝福寿烟！