一，引言
微信相信已經成為當下社會人手機必裝的幾個App之一，從一開始的飽受質疑以及不被看好到如今的將近八億用戶量，微信一直在以一種獨特的方式影響著中國移動互聯網App生態鏈。2017年1月9日，微信掌門人張小龍宣布微信小程序正式上線。什么是微信小程序，張小龍說： “小程序是一種不需要下載、安裝即可使用的應用，它出現了觸手可及的夢想，用戶掃一掃或者搜一下即開打開應用，也出現了用完即走的理念，用戶不用關心安裝太多應用的問題，應用隨處可用，但又無須安裝卸載”。這段話體現了小程序的作用和意義，總結一下就是：“用完即走，無額外負擔的輕量化工具”。最近幾天看網頁版Boss直聘，覺得整體風格很不錯，結合Boss直聘作為工具類產品的定位，很符合微信小程序“用完即走”的理念，便萌生了做一個Boss直聘的微信小程序的想法，話不多說
先貼出效果圖
我們做的這個微信小程序功能上很明確，就是為用戶提供一個方便的查找信息的入口，在首頁你可以在搜索框輸入你想要查找的職位信息，比如搜索“北京”會跳出北京市的職位，搜索“Web前端”會出來對應的結果，點擊每個結果會跳轉到對應的信息詳情頁，在詳情頁你可以查看具體崗位需求和聯系人以及公司信息等信息。
項目路徑：
二，準備工作
1.微信Web開發者工具（我用的是0.15.152900版本，其他版本可能會有些許變化，具體請參考微信官方更新日志）。
2.一個順手的編輯器，雖然微信官方提供的開發工具編輯功能也不錯，不過還是比較喜歡自己調教好的Atom(畢竟是來自未來的“hackable text editor“，笑~)。
3.Easy-Mock，一項簡單好用的數據生成服務，她可以幫助我們模擬后臺數據。
4.一顆不輕言放棄的心（逃~）。
先來看一波開發工具界面
畢竟”鵝廠“出品，還是很漂亮的有木有~
我們主要用到的就是位于開發工具最左邊靠上的三個選項卡
1.編輯，顧名思義，就是我們主要的代碼顯示和編輯區域。
2.調試，和chrome自帶的調試器很像，主要輸出調試信息，基本功能都實現了。
3.項目，在這里你主要可以生成二維碼以便在手機上直接查看真機運行效果，另外還提供一些其他的實用設置。
編輯和調試選項卡在右邊都會顯示一個實時預覽的小程序界面，每次保存都會實時刷新，很方便~
相信細心的你一定發現了文章一開始貼出的項目路徑里顯示的文件里奇怪的文件后綴名，其實這不是什么新東西哦，這只是微信小程序官方為了和傳統意義上的HTML/CSS區分開而新推的專門用于小程序開發的文件格式，wxml對應傳統的html，wxss對應css，js后綴格式保持不變。
到這里是不是手已經開始癢了？現在就開始動手吧~
三，Link-Start?。?！
1.定義全局樣式
先讓我們創建一個新項目
創建好項目后，一些文件夾開發者工具會自動幫我們創建好，如圖
1.pages是小程序的主要目錄，里面放著你的小程序的頁面文件（比如自動生成的index文件夾下放著的就是主頁的結構以及樣式等文件）。
2.utils里放著一些微信自帶的處理函數，當然你也可以自己編寫。
3.名字為app的三個文件定義了全局的一些數據和樣式等等。
現在先讓我們到app.json文件定義一些全局的數據
這是JSON格式的數據，里面的一些API定義了我們微信小程序的外貌基本樣式，pages表示的是微信小程序的page頁面路徑，window定義的是內容區以外的樣式，比如”navgationBarBackgroundColor“,意思就是標題欄的背景顏色。以下是一些常用的配置屬性
另外值得一提的是微信小程序官方原生提供了對tabBar開發的支持，只需要在app.json文件里簡單配置一下tabBar的屬性，就可以直接生成對應的tabBar，省去了自己寫樣式的時間，提高了開發效率，給企鵝點個贊~詳情請看微信小程序開發者文檔。
2.完成主頁的開發
先來看看我們的主頁
可以看到，頁面上部是一個搜索框，負責幫助使用我們小程序的人快速找到自己想要的職位，搜索框以下的部分是我們的職位分類以及細化崗位，整個頁面結構還是很清晰的，這里實現的功能有在搜索框搜索關鍵詞會跳轉到搜索頁并顯示對應的搜索結果，當然你也可以直接點擊搜索框下面的細分職位，也能跳轉到對應的搜索結果界面。
什么？view是什么標簽？text又是什么標簽？怎么都是些沒見過的標簽名呢？哈哈，其實她們都是紙老虎，并不是什么全新的東西，相信聰明的你也看出來了，view標簽對于著的是我們平時開發是用的最多的類似div一樣的塊級標簽。text標簽對應著的是span，p標簽，不過和view標簽不同的是text可是一個行內標簽哦。想知道更多框架請參考微信開發者文檔組件篇。
代碼中的bindTap，data-index則是負責數據綁定的，比如給一個view標簽添加一個bindTap屬性，其實就是為該標簽添加了一個手勢單擊事件，后面的屬性名表示對應著index.js部分的事件處理函數，如bindtap = "bindSesrch"則表示為該標簽綁定一個Tap事件觸發bindSearch函數處理，同理，bindinput = "bindInput"就是為當前輸入框綁定一個輸出事件觸發時對應的bindInput處理函數（雙引號內的是自己定義的函數名，雖然沒有硬性規范，但最好還是取個自己和他人都能一眼看出函數作用的名字吧~），在wxml頁面對應標簽綁定好相應的函數后，我們就可以跳到對應的js頁面編寫我們的函數了。
從前面的分析我們知道搜索頁其實是由一個搜索框和幾條搜索項組成，這和我們現在模擬的情況有哪些相同又有哪些不同呢？
對，沒錯，那就是對于每條搜索結果來說，信息在每個項里的位置和格式基本是不變的，只是數據上發生了變化，那么我們就可以這樣考（tou）慮（lan）：只編寫一個項目的模版，但是在對應需要存放數據的地方留好接口，這樣我們可以調用微信小程序官方提供block標簽的"wx:for","wx:key"屬性來把對應的數據通過循環來插入我們的模版里，有多少數據就生成多少個實例。
頁面數據部分我們采用Easy-Mock來模擬后臺數據，登陸Easy-Mock后建立新項目編輯好我們需要的數據，因為我們后面會涉及根據不同的搜索關鍵詞返回對應的結果，所以這里模擬數據可以多元化一些，盡量體現每個數據的差異性。這是我們模擬好的數據接口（Easy-Mock官網有詳細的文檔介紹使用，對這一步感覺有些陌生的同學可以去官網看文檔）。
那么數據我們有了，接下來怎么把她放到頁面上去呢？
這時我們就需要在需要放置數據的地方先定義好一個變量，采用雙大括號包裹一個變量的形式，類似這樣"{{你自己定義的變量名}}"。接下來只要在search.js文件寫好對應的實現函數就能把模擬的數據給渲染上去了。
頁面樣式部分編寫和傳統CSS樣式編寫一致，需要查看的同學請到我的github上查看樣式源碼。
到這里我們搜索頁部分的靜態部分就介紹完了。
現在讓我們來到JS部分，進行功能的編寫
第一項“var app = getApp”用于獲取應用實例，Page項則存放我們需要的一些數據以及函數。
當頁面中元素綁定的事件產生時便會觸發這里定義好的函數以實現對應的功能，我們這里詳細講述下使用官方API實現數據渲染的實現細節：
如圖，data對象存放我們需要的數據，因為我們的數據是從后臺渲染的，所以這里先定義一個空數組用以接收等下傳過來的數據，onLoad函數是指頁面加載完成后生效的函數，在這里我們使用了官方提供的一個API，"wx.request"，這個API用以對我們的數據url發起https請求，獲取到我們需要的數據，接下來我們用setData方法把數據放到我們需要她的地方。
有數據了，我們就可以開始編寫我們的搜索部分了，先在home.js做好傳遞用戶搜索值的判斷邏輯，如圖
我們這里可以看出，用戶搜索關鍵詞有至少四種情況
1. 用戶搜索工作城市
2. 用戶搜索崗位名稱
3. 用戶搜索公司名字
3.用戶在沒輸入值的情況下點擊了搜索按鈕
（還有更多的情況比如搜索薪資，工作經驗等等實現邏輯基本相同，這里僅提出部分情況供參考）。
這樣主頁部分的編寫基本可以告一段落了。
3. 完成搜索頁的開發
現在我們來到搜索頁，搜索頁的結構和樣式在我的GitHub上有源碼，歡迎指點:），
還記得我們在home.js頁面定義過一個searchValue值，用以在頁面之間傳參嗎？現在我們可以用上她啦，我們在search.js的onLoad事件（頁面加載完成后執行）里也定義一個叫searchValue的值來存放從home.js頁面接受到的用戶輸入的值
，獲取到了用戶輸入的值，我們就可以根據用戶輸入的值做搜索邏輯的判斷啦
如圖，我們先定義好一個空數組resultArr用來存放搜索的結果，再定義一個searchArr用來存放我們的數據，下面就是用if語句來進行一個搜索的匹配。從代碼可以看出，我們目前做的只是一個簡單的值對值匹配，用戶輸入“北京”，就會顯示所有在北京的職位，輸入“搜狗”，則顯示搜狗公司的所有職位，那么當用戶輸入“北京市”時，我們的小程序就找不到北京的結果了，這個時候我們可以采用正則表達式來完成一個模糊搜索功能的開發，篇幅有限就不細講了，同學們可以自行完成。
現在再來看看我們的搜索頁
我們在這里也做了一個 搜索框，方便用戶想進一步搜索時直接在本頁面進行搜索而不用回退到主頁，這里的搜索邏輯和上面提到的基本一樣接下來。有需要的同學可以去我GitHub上看源碼。
我們在主頁搜索完跳轉到搜索頁顯示結果的這個過程中，可以調用官方提供的API，wx.showLoading來顯示一個搜索中的提示，wx.showToast也能完成同樣的目的，她們的區別在于showLoading要手動調用hideLoading在合適的時候關閉，shouToast可以自定義顯示的圖標以及持續事件，但整體上不如前者使用靈活。
4.完成詳情頁的開發
詳情頁主要負責信息的顯示，整體思路和主頁基本一致，在這里我們又用到了官方的一個地圖組件用以顯示不同公司的公司地址
--
map標簽可以為我們創建一個地圖組件，我們只要傳入對應的經緯度就可以讓地圖顯示對應的位置，添加一個show-locaton屬性就可以顯示一個帶有方向的定位點。其他屬性請參考微信官方文檔。
四.尾語
到此，我們的Boss直聘微信小程序開發就告一段落了，整個小程序功能不算復雜但該有的都有，也還有很多可以繼續完善的地方，筆者也是剛開始接觸小程序沒多久，這次抱著學習的心態把自己做小程序的過程和一些心得分享出來，希望能和大家交流以提升自己，對這個微信小程序有疑問或者建議的同學可以在評論中提出，謝謝大家！另外，貼出我的項目的GitHub地址，喜歡的可以點個star或者fork。
另外打個廣告：2017年6月畢業生求實習求收留~ 逃~
最后
