我用vue写的原神抽卡分析工具

我在工作闲暇之余写了给原神抽卡分析,我觉得你们或许对代码也想知道,反正也是写着玩玩,就一并分享了。我用的是vue框架,无后台服务器,代码写成可直接本地跑。
其实写原神抽卡分析用原生和jq就能实现,但我有其他项目,所以使用vue方便管理。
由于新版本无刷新按钮,需要root获取链接,我需近一步研究获取链接方式

我用vue写的原神抽卡分析工具

搭建项目

vue有vue-lic,那不是手到擒来,安装的插件如下:

  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vant": "^2.12.46",
    "element-ui": "^2.15.3"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.12",
    "@vue/cli-plugin-eslint": "~4.5.12",
    "@vue/cli-plugin-router": "^4.5.18",
    "@vue/cli-service": "~4.5.12",
    "axios": "^0.18.0",
    "babel-eslint": "^10.1.0",
    "babel-plugin-component": "^1.1.1",
    "babel-plugin-import": "^1.13.5",
    "compression-webpack-plugin": "^5.0.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-cli-plugin-axios": "0.0.4",
    "vue-cli-plugin-pxtorem": "^1.3.0",
    "vue-cli-plugin-vant": "^1.0.1",
    "vue-template-compiler": "^2.6.11"
  },

观察原神接口

我们通过断网操作,可以获取到祈愿查询页面的url,然后我们复制url通过浏览器打开可以找到原神的抽卡查询接口。把两链接都复制到编辑器进行对比观察,如下:

// 链接很长的,略有删除,不影响观察
https://webstatic.mihoyo.com/hk4e/event/e20190909gacha/index.html
?authkey_ver=1&sign_type=2&auth_appid=webview_gacha&init_type=301&gacha_id=49763b105936b36e522abc232fb293b6c07654×tamp=1653954782&lang=zh-cn&device_type=mobile&ext=xxx&game_version=CNRELAndroid2.7&plat_type=android®ion=cn_gf01&authkey=xxxxxxx&game_biz=hk4e_cn
#/log
上面这链接是原神的祈愿查询页面

// 链接很长的,略有删除,不影响观察
https://hk4e-api.mihoyo.com/event/gacha_info/api/getGachaLog
?authkey_ver=1&sign_type=2&auth_appid=webview_gacha&init_type=301&gacha_id=49763b105936b36e522abc232fb293b6c07654×tamp=1653954782&lang=zh-cn&device_type=mobile&ext=xxx&game_version=CNRELAndroid2.7&plat_type=android®ion=cn_gf01&authkey=xxxxxxx&game_biz=hk4e_cn
&gacha_type=100&page=1&size=6&end_id=0
上面这链接是原神的抽卡查询接口
如何知道原神查询接口?

如下图:

原神查询接口

观察什么?

观察链接的相同处,如下图:

观察原神所需要数据

小结

通过观察原神接口,我们发现原神居然用的是get查询数据,熟悉前端的同学应该清楚,get传输的数据就是在链接上(“?”后面既是传输的数据)。
我们再观察 祈愿查询页面链接 和 抽卡查询接口链接 就能发现,有一段一模一样,而不一样的只有下列字段

{
  gacha_type=100 // 查询池子类型
  page=1 // 查询第几页
  size=6 // 一页展示几条数据
  end_id=0 // 最后一条数据的id
}

代码编写

1、通过原神的祈愿查询页面获取抽卡查询接口部分数据

之前说到 祈愿查询页面链接 和 抽卡查询接口链接 有一段一模一样,这一模一样的数据就是我们需要的数据之一。我通过字符串截取获取:

this.params = this.forms.url.substr(this.forms.url.indexOf("?")).split("#")[0]
2、补充剩余4个字段
page=1 // 查询第几页
size=6 // 一页展示几条数据

这两数据没什么好说的,做过分页的同学都知道。
但原神他不按套路出牌,page字段没用,填一就行,而size最大只能是20,填20就行。这两字段直接写死。

gacha_type=100 // 查询池子类型

这个字段是查询的池子类型,可以做成下拉选,让查询者选择,可选数据如下:

options: [
    {label: '新手祈愿', value: '100'},
    {label: '常驻祈愿', value: '200'},
    {label: '活动祈愿', value: '301'},
    {label: '武器祈愿', value: '302'},
],

最重要的是end_id字段! 它是每次查询的最后一条id。
首先默认是0,发起请求获取数据,找到数据的list数组,最后一个数组就是id就是下次查询的end_id。如下图:

end_id说明

3、封装请求

我们把参数都弄清楚后就可以封装一个查询接口。
1、拼接出完整的get请求:

// this.params:之前观察到两链接相同的部分
// this.forms.gacha_type:使用者选择的池子类型字段
// this.end_id:这个就不再多说了
'/event/gacha_info/api/getGachaLog'+this.params+'&gacha_type='+this.forms.gacha_type+'&page=1&size=20&end_id='+this.end_id

2、进行封装
我们知道,vue的跨域请求需要用proxy(代理),所以在vue.config.js里添加:

module.exports = {
  devServer: {
    proxy: {
      // 请求https,代理写前面
      "/event":{
        target:"https://hk4e-api.mihoyo.com",
        secure: false,   // 如果是https接口,需要配置这个参数
        changeOrigin: true,    //是否跨域
      },
    }
  }
};

然后就行封装,下面是我封装的:

mihoyo(){
    // console.log('/event/gacha_info/api/getGachaLog'+this.params+'&page='+i+'&size=20&end_id=0')
    return new Promise(resolve=>{
        this.$axios.get(
            '/event/gacha_info/api/getGachaLog'+this.params+'&gacha_type='+this.forms.gacha_type+'&page=1&size=20&end_id='+this.end_id,
        ).then((response)=>{
            console.log(response)
            if(response.data.retcode == -101){
                alert('url过期!请重新获取')
                this.bool = false
            }else{
                var data = response.data.data
                if(data == null){
                    resolve([])
                }
                var list = data.list
                if(list.length == 0){
                    this.bool = false
                }else{
                    this.end_id = list[list.length - 1].id
                }
                resolve(list)
            }
        })
    })
},
4、整理数据

整理数据需要十分注意!因为我们要写一个while循环,循环的判断变量初始为true,这就很有可能出现死循环。上面我封装的函数有一个this.bool变量,这个变量就是当ajax获取数据为空时停止循环。

this.bool = true
while (this.bool){
    let a = await this.mihoyo() // 调用接口函数
    data = data.concat(a) // 使用数组连接汇总数据
}
data = data.reverse() // 数组倒序,因为原数据按时间由远到近排序。

获取到完整的数据后,要怎么分析就看自己了。

页面完整代码

vue写原神抽卡分析工具完整页面代码

原神抽卡分析工具

原神抽卡分析工具

评论

  1. yic
    2月前
    2022-10-17 16:35:33

    大佬知道怎么查询角色详情和圣遗物数据吗

    • 博主
      2月前
      2022-10-17 17:12:34

      没去研究,有时间我会去研究一下

      • yic
        2月前
        2022-10-17 21:44:19

        大佬有交流群啥的吗

        • 博主
          1月前
          2022-10-25 8:59:30

          我自己业余时间写的玩的[笑哭],没有时间管理什么群

发送评论 编辑评论


				
上一篇
下一篇