我在工作闲暇之余写了给原神抽卡分析，我觉得你们或许对代码也想知道，反正也是写着玩玩，就一并分享了。我用的是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。如下图：

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写原神抽卡分析工具完整页面代码

原神抽卡分析工具

原神抽卡分析工具