作者：北京雅舍 | 来源：互联网 | 2017-05-11 02:02
0.序玩阴阳师的肝帝们都知道，每天早上5点和下午6点会刷新两次封印任务，每次做任务时最蛋疼的就是找各种怪物对应的副本以及神秘线索。 阴阳师提供了 网易精灵 可以进行一些数据查询，但体验实在太感人，所以大多数人选择使用搜素引擎搜索怪物分布及神秘线索。
而每次使用搜索引擎查找又十分不方便，所以笔者决定写一个查询阴阳师妖怪分布的小程序，力求做到使用快捷体验更快捷，把更多的时间留给狗粮和御魂。
恰好上周末有两天时间，所以立马开写。
1.构思与设计 ( 3小时 )1.1 构思
要做的小程序主要功能就是查询功能，所以主页应该像搜索引擎一样简洁，搜索框是肯定需要的；
主页包含热门搜索，缓存最热式神的搜索；
搜索支持完整匹配或者单字匹配；
点击搜索结果直接跳转到式神详情页；53. 式神详情页应该包含式神的图鉴、名称、稀有度、出没地点，并且出没地点按妖怪数量从多到少排序；
加入数据报错及提建议的功能；
支持用户个人的搜索历史；
小程序的名字，综合考虑小程序的功能最后决定叫做 式神猎手 ( 其实这是最后开发完成后才想好的 )；
1.2 设计
构思好后笔者就开始用笔者半吊子的 PS 水平设计了下草图，大概是这个样子：
[Javascript] 纯文本查看
├── 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 即可：
[XML] 纯文本查看
然后在需要引用模版的地方：
[XML] 纯文本查看
这里遇到另一个问题，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 信息，所以很容易写个爬虫就可以搞定了：
[Python] 纯文本查看
# 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(&＃39;jQuery11130959811888616583_1487429691764(&＃39;, &＃39;&＃39;).replace(&＃39;)&＃39;, &＃39;&＃39;)
json_data = json.loads(result)
hellspawn_list = json_data[&＃39;data&＃39;]
p = Pinyin()
for k, v in hellspawn_list.iteritems():
file_name = p.get_pinyin(v.get(&＃39;name&＃39;), &＃39;&＃39;)
print &＃39;id: {0} name: {1}&＃39;.format(k, v.get(&＃39;name&＃39;))
big_url = "https://yys.res.netease.com/pc/zt/20161108171335/data/shishen_big/{0}.png".format(k)
urllib.urlretrieve(big_url, filename=&＃39;big/{0}@big.png&＃39;.format(file_name))
avatar_url = "https://yys.res.netease.com/pc/gw/20160929201016/data/shishen/{0}.png".format(k)
urllib.urlretrieve(avatar_url, filename=&＃39;icon/{0}@icon.png&＃39;.format(file_name))然而，爬完数据后发现一个问题，网易官方的图片都是无码高清大图，对于笔者这种穷 ds 大图放在 cdn 上两天就得破产，所以需要批量将图片转成既不太大又能看的过去。嗯，这里就可以用到 ps 的批处理能力了。
等批处理结束，期间刷个御魂啥的应该就好了，然后将得到的所有图片上传到静态资源服务器，图片这里就处理完啦。
5. 式神数据爬取 ( 4小时 )
式神分布数据网上比较杂并且数据很多有偏差，所以斟酌再三决定采用半人工半自动的方式，爬到的数据输出为 json：
[Javascript]
{
"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小时 )
最后一步基本上就是在手机上体验查错，修改一些效果，关闭调试模式准备提交审核；
此时已经是周日，哦，不对，应该是周一早上一点钟了：
以上就是24小时开发阴阳师小程序的详细内容，更多请关注 第一PHP社区 其它相关文章！
京公网安备 11010802041100号