摘要：最后放效果圖感興趣的同學(xué)歡迎掃碼體驗(yàn)喲手機(jī)長(zhǎng)按不能進(jìn)入小程序，需要在微信發(fā)現(xiàn)小程序搜索式神獵手進(jìn)入結(jié)尾以上所有內(nèi)容均已開(kāi)源，歡迎大家參考后端式神獵手后端小程序端式神獵手小程序解決方案原文地址作者

0.序

玩陰陽(yáng)師的肝帝們都知道，每天早上5點(diǎn)和下午6點(diǎn)會(huì)刷新兩次封印任務(wù)，每次做任務(wù)時(shí)最蛋疼的就是找各種怪物對(duì)應(yīng)的副本以及神秘線(xiàn)索。 陰陽(yáng)師提供了 網(wǎng)易精靈 可以進(jìn)行一些數(shù)據(jù)查詢(xún)，但體驗(yàn)實(shí)在太感人，所以大多數(shù)人選擇使用搜素引擎搜索怪物分布及神秘線(xiàn)索。

而每次使用搜索引擎查找又十分不方便，所以筆者決定寫(xiě)一個(gè)查詢(xún)陰陽(yáng)師妖怪分布的小程序，力求做到使用快捷體驗(yàn)更快捷，把更多的時(shí)間留給狗糧和御魂。

恰好上周末有兩天時(shí)間，所以立馬開(kāi)寫(xiě)。

1.構(gòu)思與設(shè)計(jì) ( 3小時(shí) ) 1.1 構(gòu)思

要做的小程序主要功能就是查詢(xún)功能，所以主頁(yè)應(yīng)該像搜索引擎一樣簡(jiǎn)潔，搜索框是肯定需要的；

主頁(yè)包含熱門(mén)搜索，緩存最熱式神的搜索；

搜索支持完整匹配或者單字匹配；

點(diǎn)擊搜索結(jié)果直接跳轉(zhuǎn)到式神詳情頁(yè)；53. 式神詳情頁(yè)應(yīng)該包含式神的圖鑒、名稱(chēng)、稀有度、出沒(méi)地點(diǎn)，并且出沒(méi)地點(diǎn)按妖怪?jǐn)?shù)量從多到少排序；

加入數(shù)據(jù)報(bào)錯(cuò)及提建議的功能；

支持用戶(hù)個(gè)人的搜索歷史；

小程序的名字，綜合考慮小程序的功能最后決定叫做 式神獵手 ( 其實(shí)這是最后開(kāi)發(fā)完成后才想好的 )；

1.2 設(shè)計(jì)

構(gòu)思好后筆者就開(kāi)始用筆者半吊子的 PS 水平設(shè)計(jì)了下草圖，大概是這個(gè)樣子：

嗯，最主要的首頁(yè)和詳情頁(yè)設(shè)計(jì)好就行，然后就可以開(kāi)始具體考慮怎么做了！

1.3 技術(shù)架構(gòu)

前端毫無(wú)疑問(wèn)就是微信小程序咯；

后端使用 Django 提供 Restful API 服務(wù)；

當(dāng)前最熱搜索用 redis 做緩存服務(wù)器進(jìn)行緩存；

個(gè)人搜索記錄就使用微信小程序提供的 localstorage ;

式神分布信息使用爬蟲(chóng)爬取清洗，格式化為 json , 入庫(kù)前再做人工檢查；

式神圖片及圖標(biāo)直接爬取官方資料；

自己制作爬不到的式神圖片及圖標(biāo)；

小程序要求 HTTPS 連接，恰好筆者之前搞過(guò)，可以直接看這里 HTTPS 免費(fèi)部署指南

到此，正式開(kāi)發(fā)前的準(zhǔn)備得當(dāng)后，我們就可以開(kāi)始正式開(kāi)發(fā)了

2. API 服務(wù)開(kāi)發(fā) ( 5小時(shí) )

Django 的 API 服務(wù)開(kāi)發(fā)筆者之前經(jīng)常做，所以有比較完整的解決方案，可以參考這里 django-simple-serializer

之所以花了 5 個(gè)小時(shí)是因?yàn)榻?4 個(gè)小時(shí)在增加 django-simple-serializer 對(duì) Django ManyToManyField 中 through 特性的支持。

簡(jiǎn)而言之， through 特性就是可以使多對(duì)多關(guān)系的中間表增添一些額外的字段或?qū)傩?，例? 怪物副本和怪物之間的多對(duì)多關(guān)系就需要增加一個(gè)儲(chǔ)存每個(gè)副本有多少只相應(yīng)怪物數(shù)量的字段 count。

搞定 through 支持后 API 的構(gòu)建就很快啦，主要有五個(gè) API ：

搜索接口；

式神詳情接口；

式神副本接口；

熱門(mén)搜索接口；

反饋接口；

寫(xiě)好接口后添加一些 mock data 以供測(cè)試；

3. 前端開(kāi)發(fā) ( 8小時(shí) )

前端花了最久的時(shí)間。

一方面筆者真的是個(gè)后端工程師，前端屬于半路出家，另一方面小程序有一些坑。 當(dāng)然，最主要的是一直在調(diào)整界面效果，這里花了大量時(shí)間。

寫(xiě)小程序的整體體驗(yàn)筆者感覺(jué)就和寫(xiě) vue.js 一摸一樣，只不過(guò)一些 html 標(biāo)簽沒(méi)辦法使用，而是需要按小程序官方提供的組件進(jìn)行書(shū)寫(xiě)， 這里有一點(diǎn)感受就是，小程序本身組件化的設(shè)計(jì)思路應(yīng)該是借鑒了 React 而語(yǔ)法之類(lèi)的應(yīng)該是借鑒了 vue.js 。

最后前端開(kāi)發(fā)完畢后主要分為這幾個(gè)頁(yè)面：

主頁(yè) （ 搜索頁(yè) ）；

式神詳情頁(yè)；

我的頁(yè)面 （ 主要是放搜索歷史和免責(zé)申明等等東西 ）；

反饋界面；

聲明界面 （ 為何需要這個(gè)界面？ 因?yàn)樗袌D片及一些資源都是直接抓取陰陽(yáng)師官方的資源，所以這里需要申明只是非盈利性質(zhì)的使用，版權(quán)亂七八糟的都還是陰陽(yáng)師的 ）。

哎，丑媳婦早晚要見(jiàn)公婆，這里不得不放最后開(kāi)發(fā)出來(lái)的界面圖了

對(duì)于微信小程序的入門(mén)及基礎(chǔ)，筆者就不在這里多講了，相信到現(xiàn)在對(duì)微信小程序有關(guān)注的開(kāi)發(fā)者或多或少自己寫(xiě)個(gè)簡(jiǎn)單的 demo 肯定是沒(méi)問(wèn)題的，我就主要講一講我在開(kāi)發(fā)中遇到的坑：

3.1 background-image 屬性

在寫(xiě)式神詳情頁(yè)的時(shí)候兩個(gè)地方需要用到 background-image 屬性設(shè)置背景圖，在微信開(kāi)發(fā)者工具中一切顯示正常，但一到真機(jī)調(diào)試就沒(méi)有辦法顯示，最后發(fā)現(xiàn)小程序的 background-image 在真機(jī)不支持引用本地資源，解決方案有兩種：

使用網(wǎng)絡(luò)圖片： 考慮到背景圖的大小，筆者放棄了這種方案；

使用 base64 編碼圖片。

正常來(lái)講，css 中的 background-image 就支持 base64 ，這種方案相當(dāng)于把圖片直接用 base64 編碼成一段 base64 碼進(jìn)行儲(chǔ)存，在使用時(shí)這樣使用即可：

background-image: url(data:image/image-format;base64,XXXX);

image-format 為圖片本身的格式，而 xxxx 就是圖片經(jīng)過(guò) base64 后得到的編碼。這種方式其實(shí)是一種變相引用本地資源的方式，好處在于可以減少請(qǐng)求圖片的次數(shù)，而缺點(diǎn)則是會(huì)增大 css 文件并使其不是那么好看。

最后筆者選擇第二種方式主要還是考慮到圖片的大小以及 wxss 的增大在可接受范圍內(nèi)。

3.2 template

小程序支持模版，但要注意模板擁有自己的作用域，只能使用data傳入的數(shù)據(jù)。

另外，在傳入數(shù)據(jù)時(shí)需要將相關(guān)數(shù)據(jù)解構(gòu)傳入，在模版內(nèi)部是直接以 {{ xxxx }} 的形式進(jìn)行訪(fǎng)問(wèn)，而不是像在循環(huán)中 {{ item.xxx }} 這種訪(fǎng)問(wèn)形式；

關(guān)于解構(gòu)：