24小時從0到1開發陰陽師小程序

時間 2019-11-24

標籤小時開發陰陽程序简体版

原文原文鏈接

0.序

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

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

剛好上週末有兩天時間，因此立馬開寫。 html

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

1.1 構思

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

1.2 設計

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

嗯，最主要的首頁和詳情頁設計好就行，而後就能夠開始具體考慮怎麼作了！ vue

1.3 技術架構

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

到此，正式開發前的準備得當後，咱們就能夠開始正式開發了java

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

Django 的 API 服務開發筆者以前常常作，因此有比較完整的解決方案，能夠參考這裏 django-simple-serializerpython

之因此花了 5 個小時是由於近 4 個小時在增長 django-simple-serializer 對 Django ManyToManyField 中 through 特性的支持。 git

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

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

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

寫好接口後添加一些 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 碼進行儲存，在使用時這樣使用便可：

background-image: url(data:image/image-format;base64,XXXX);複製代碼

image-format 爲圖片自己的格式，而 xxxx 就是圖片通過 base64 後獲得的編碼。這種方式實際上是一種變相引用本地資源的方式，好處在於能夠減小請求圖片的次數，而缺點則是會增大 css 文件並使其不是那麼好看。

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

3.2 template

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

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

關於解構：

<template is="xxx" data="{{...object}}"/>複製代碼

三個 . 就是解構操做；

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

├── 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 便可：

<import src="../template/template.wxml" />複製代碼

而後在須要引用模版的地方：

<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 信息，因此很容易寫個爬蟲就能夠搞定了：

# 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：

{
    "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
            }]
        }]
}複製代碼