0.序
玩陰陽師的肝帝們都知道，每天早上5點和下午6點會重新整理兩次封印任務，每次做任務時最蛋疼的就是找各種怪物對應的副本以及神祕線索。 陰陽師提供了 網易精靈 可以進行一些資料查詢，但體驗實在太感人，所以大多數人選擇使用搜素引擎搜尋怪物分佈及神祕線索。
而每次使用搜尋引擎查詢又十分不方便，所以筆者決定寫一個查詢陰陽師妖怪分佈的小程式，力求做到使用快捷體驗更快捷，把更多的時間留給狗糧和御魂。
恰好上週末有兩天時間，所以立馬開寫。
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 碼進行儲存，在使用時這樣使用即可：
|
1 |
background-image: url(data:image/image-format;base64,XXXX); |
image-format 為圖片本身的格式，而 xxxx 就是圖片經過 base64 後得到的編碼。這種方式其實是一種變相引用本地資源的方式，好處在於可以減少請求圖片的次數，而缺點則是會增大 css 檔案並使其不是那麼好看。
最後筆者選擇第二種方式主要還是考慮到圖片的大小以及 wxss 的增大在可接受範圍內。
3.2 template
小程式支援模版，但要注意模板擁有自己的作用域，只能使用data傳入的資料。
另外，在傳入資料時需要將相關資料解構傳入，在模版內部是直接以 {{ xxxx }} 的形式進行訪問，而不是像在迴圈中 {{ item.xxx }} 這種訪問形式；
關於解構：
|
1 |
<template is="xxx" data="{{...object}}"/> |
三個 . 就是解構操作；
一般 template 都會放在 單獨的 template 檔案中讓其他檔案進行呼叫，而不會直接寫在正常的 wxml 中。 比如筆者目錄大概是這樣的：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
├── app.js ├── app.json ├── app.wxss ├── pages │ ├── feedback │ ├── index │ ├── my │ ├── onmyoji │ ├── statement │ └── template │ ├── template.js │ ├── template.json │ ├── template.wxml │ └── template.wxss ├── static └── utils |
關於其他檔案呼叫 template，直接使用 import 即可：
|
1 |
<import src="../template/template.wxml" /> |
然後在需要引用模版的地方：
|
1 2 |
<template is="xxx" data="{{...object}}"/> <!--is 後填寫模版名稱--> |
這裡遇到另一個問題，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 資訊，所以很容易寫個爬蟲就可以搞定了：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
# coding: utf-8 import json import requests import urllib from xpinyin import Pinyin url = "https://g37simulator.webapp.163.com/get_heroid_list?callback=jQuery11130959811888616583_1487429691764&rarity=0&page=1&per_page=200&_=1487429691765" result = requests.get(url).content.replace('jQuery11130959811888616583_1487429691764(', '').replace(')', '') json_data = json.loads(result) hellspawn_list = json_data['data'] p = Pinyin() for k, v in hellspawn_list.iteritems(): file_name = p.get_pinyin(v.get('name'), '') print 'id: {0} name: {1}'.format(k, v.get('name')) big_url = "https://yys.res.netease.com/pc/zt/20161108171335/data/shishen_big/{0}.png".format(k) urllib.urlretrieve(big_url, filename='big/{0}@big.png'.format(file_name)) avatar_url = "https://yys.res.netease.com/pc/gw/20160929201016/data/shishen/{0}.png".format(k) urllib.urlretrieve(avatar_url, filename='icon/{0}@icon.png'.format(file_name)) |
然而，爬完資料後發現一個問題，網易官方的圖片都是無碼高清大圖，對於筆者這種窮 ds 大圖放在 cdn 上兩天就得破產，所以需要批量將圖片轉成既不太大又能看的過去。嗯，這裡就可以用到 ps 的批處理能力了。
- 開啟 ps ，然後選擇爬到的一張圖片；
- 選擇選單欄上的“視窗”然後選擇“動作；
- 在“動作”選項下，新建一個動作；
- 點選圓形錄製按鈕開始錄製動作；
- 按正常處理圖片等順序將一張圖片存為 web 格式；
- 點選方形停止按鈕停止錄製動作；
- 選擇選單欄上的 檔案－自動－批處理－選擇之前錄製的動作－配置好輸入資料夾和輸出資料夾；
- 點選確定就可以啦；
等批處理結束，期間刷個御魂啥的應該就好了，然後將得到的所有圖片上傳到靜態資源伺服器，圖片這裡就處理完啦。
5. 式神資料爬取 ( 4小時 )
式神分佈資料網上比較雜並且資料很多有偏差，所以斟酌再三決定採用半人工半自動的方式，爬到的資料輸出為 json：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
{ "scene_name": "探索第一章", "team_list": [{ "name": "天邪鬼綠1", "index": 1, "monsters": [{ "name": "天邪鬼綠", "count": 1 },{ "name": "提燈小僧", "count": 2 }] },{ "name": "天邪鬼綠2", "index": 2, "monsters": [{ "name": "天邪鬼綠", "count": 1 },{ "name": "提燈小僧", "count": 2 }] },{ "name": "提燈小僧1", "index": 3, "monsters": [{ "name": "天邪鬼綠", "count": 2 },{ "name": "提燈小僧", "count": 1 }] },{ "name": "提燈小僧2", "index": 4, "monsters": [{ "name": "燈籠鬼", "count": 2 },{ "name": "提燈小僧", "count": 1 }] },{ "name": "首領", "index": 5, "monsters": [{ "name": "九命貓", "count": 3 }] }] } |
然後再人工檢查一遍，當然還是會有遺漏，所以資料包錯的功能就很重要啦。
這一部分實際寫程式碼的時間可能只有半個多小時，剩下時間一直在檢查資料；
一切檢查結束後寫個指令碼直接將 json 匯入到資料庫中，檢查無誤後用 fabric 釋出到線上伺服器進行測試；
6. 測試 ( 2小時 )
最後一步基本上就是在手機上體驗查錯，修改一些效果，關閉除錯模式準備提交稽核；
此時已經是週日，哦，不對，應該是週一早上一點鐘了：
不得不說，小程式團隊稽核速度很快啊，週一下午就稽核通過了，然後果斷上線。
最後放效果圖：
感興趣的同學歡迎掃碼體驗喲：
手機長按不能進入小程式，需要在 微信-發現-小程式-搜尋-式神獵手 進入
7. 結尾
以上所有內容均已開源，歡迎大家參考：
後端： 式神獵手後端 ( https://github.com/bluedazzle… )
小程式端： 式神獵手小程式 ( https://github.com/bluedazzle… )
API 解決方案： django-simple-serializer ( https://github.com/bluedazzle… )
請使用手機”掃一掃”x