24小時用Python開發一個陰陽師小程序+Python進階教學視頻分享

Qyinyangshi Python Django HTML 設計技術搜索引擎 JSON CSS Redis 網絡爬蟲工程師 python那些事兒 2019-07-08

0.序

玩陰陽師的肝帝們都知道，每天早上5點和下午6點會刷新兩次封印任務，每次做任務時最蛋疼的就是找各種怪物對應的副本以及神祕線索。陰陽師提供了網易精靈可以進行一些數據查詢，但體驗實在太感人，所以大多數人選擇使用搜素引擎搜索怪物分佈及神祕線索。

而每次使用搜索引擎查找又十分不方便，所以筆者決定寫一個查詢陰陽師妖怪分佈的小程序，力求做到使用快捷體驗更快捷，把更多的時間留給狗糧和御魂。

想知道如何用Python實現更多小程序的小夥伴們，可移步文末免費領取小編整理的Python學習資料，各個學習階段的都有，幫助大家在學習Python的過程中不斷進階！

1.構思與設計 ( 3小時 )

1.1 構思

要做的小程序主要功能就是查詢功能，所以主頁應該像搜索引擎一樣簡潔，搜索框是肯定需要的；
主頁包含熱門搜索，緩存最熱式神的搜索；
搜索支持完整匹配或者單字匹配；
點擊搜索結果直接跳轉到式神詳情頁；53. 式神詳情頁應該包含式神的圖鑑、名稱、稀有度、出沒地點，並且出沒地點按妖怪數量從多到少排序；
加入數據報錯及提建議的功能；
支持用戶個人的搜索歷史；
小程序的名字，綜合考慮小程序的功能最後決定叫做 式神獵手 ( 其實這是最後開發完成後才想好的 )；

1.2 設計

構思好後就開始用筆者半吊子的 PS 水平設計了下草圖，大概是這個樣子：

嗯，最主要的首頁和詳情頁設計好就行，然後就可以開始具體考慮怎麼做了！

1.3 技術架構

前端毫無疑問就是微信小程序咯；
後端使用 Django 提供 Restful API 服務；
當前最熱搜索用 redis 做緩存服務器進行緩存；
個人搜索記錄就使用微信小程序提供的 localstorage ;
式神分佈信息使用爬蟲爬取清洗，格式化為 json , 入庫前再做人工檢查；
式神圖片及圖標直接爬取官方資料；
自己製作爬不到的式神圖片及圖標；
小程序要求 HTTPS 連接，恰好筆者之前搞過，可以直接看這裡 HTTPS 免費部署指南

到此，正式開發前的準備得當後，我們就可以開始正式開發

2. API 服務開發 ( 5小時 )

Django 的 API 服務開發筆者之前經常做，所以有比較完整的解決方案，可以參考這裡 django-simple-serializer

之所以花了 5 個小時是因為近 4 個小時在增加 django-simple-serializer 對 Django ManyToManyField 中 through 特性的支持。

簡而言之， through 特性就是可以使多對多關係的中間表增添一些額外的字段或屬性，例如: 怪物副本和怪物之間的多對多關係就需要增加一個儲存每個副本有多少隻相應怪物數量的字段 count。

搞定 through 支持後 API 的構建就很快啦，主要有五個 API ：

搜索接口；
式神詳情接口；
式神副本接口；
熱門搜索接口；
反饋接口；

寫好接口後添加一些 mock data 以供測試；

3. 前端開發 ( 8小時 )

前端花了最久的時間。

一方面筆者真的是個後端工程師，前端屬於半路出家，另一方面小程序有一些坑。當然，最主要的是一直在調整界面效果，這裡花了大量時間。

寫小程序的整體體驗筆者感覺就和寫 vue.js 一摸一樣，只不過一些 html 標籤沒辦法使用，而是需要按小程序官方提供的組件進行書寫，這裡有一點感受就是，小程序本身組件化的設計思路應該是借鑑了 React 而語法之類的應該是借鑑了 vue.js 。

最後前端開發完畢後主要分為這幾個頁面：

主頁（搜索頁）；
式神詳情頁；
我的頁面（主要是放搜索歷史和免責申明等等東西）；
反饋界面；
聲明界面（為何需要這個界面？因為所有圖片及一些資源都是直接抓取陰陽師官方的資源，所以這裡需要申明只是非盈利性質的使用，版權亂七八糟的都還是陰陽師的）。

哎，醜媳婦早晚要見公婆，這裡不得不放最後開發出來的界面圖了

對於微信小程序的入門及基礎，筆者就不在這裡多講了，相信到現在對微信小程序有關注的開發者或多或少自己寫個簡單的 demo 肯定是沒問題的，我就主要講一講我在開發中遇到的坑：

3.1 background-image 屬性

在寫式神詳情頁的時候兩個地方需要用到 background-image 屬性設置背景圖，在微信開發者工具中一切顯示正常，但一到真機調試就沒有辦法顯示，最後發現小程序的 background-image 在真機不支持引用本地資源，解決方案有兩種：

使用網絡圖片：考慮到背景圖的大小，筆者放棄了這種方案；
使用 base64 編碼圖片。

正常來講，css 中的 background-image 就支持 base64 ，這種方案相當於把圖片直接用 base64 編碼成一段 base64 碼進行儲存，在使用時這樣使用即可：

<pre style="-webkit-tap-highlight-color: transparent; box-sizing: border-box; font-family: Consolas, Menlo, Courier, monospace; font-size: 16px; white-space: pre-wrap; position: relative; line-height: 1.5; color: rgb(153, 153, 153); margin: 1em 0px; padding: 12px 10px; background: rgb(244, 245, 246); border: 1px solid rgb(232, 232, 232); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">background-image: url(data:image/image-format;base64,XXXX);

</pre>

image-format 為圖片本身的格式，而 xxxx 就是圖片經過 base64 後得到的編碼。這種方式其實是一種變相引用本地資源的方式，好處在於可以減少請求圖片的次數，而缺點則是會增大 css 文件並使其不是那麼好看。

最後筆者選擇第二種方式主要還是考慮到圖片的大小以及 wxss 的增大在可接受範圍內。

3.2 template

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

另外，在傳入數據時需要將相關數據解構傳入，在模版內部是直接以 {{ xxxx }} 的形式進行訪問，而不是像在循環中 {{ item.xxx }} 這種訪問形式；

關於解構：

</pre>

三個 . 就是解構操作；

一般 template 都會放在單獨的 template 文件中讓其他文件進行調用，而不會直接寫在正常的 wxml 中。比如筆者目錄大概是這樣的：

├── app.json

├── app.wxss

├── pages

│ ├── feedback

│ ├── index

│ ├── my

│ ├── onmyoji

│ ├── statement

│ └── template

│ ├── template.js

│ ├── template.json

│ ├── template.wxml

│ └── template.wxss

├── static

└── utils

</pre>

關於其他文件調用 template，直接使用 import 即可：

</pre>

然後在需要引用模版的地方：

</pre>

這裡遇到另一個問題，template 對應的樣式寫在 template 對應的 wxss 中並沒有作用，需要寫在調用 template 的文件的 wxss 中，比如 index 需要使用 template 則需要將對應的 css 寫在 my/my.wxss 中。

4. 爬取圖片資源 ( 2小時 )

式神的圖標及形象圖基本上陰陽師官網都有，這裡自己做也不現實，所以果斷寫爬蟲爬下來然後存到自己的 cdn 。

大圖和小圖都在 http://yys.163.com/shishen/index.html 這裡可以找到。一開始考慮爬取網頁然後 beautiful soup 提取數據，後面發現式神數據竟然是異步加載的，那就更簡單了，分析網頁得到 https://g37simulator.webapp.163.com/get_heroid_list 直接返回了式神信息的 json 信息，所以很容易寫個爬蟲就可以搞定了：