持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第9天，点击查看活动详情
前言
上一节简单的介绍了一下油猴脚本的元信息，并写了一个juejin广告去除的小Demo。
那么下面就在用一个小示例来学习脚本的相关知识把，总所周知，juejin可以使用矿石来进行抽奖，你可能存了几十万的矿石想要一口气all in。但一次次手动十连抽又太麻烦，这个时候有一个一键抽奖的脚本就很爽啦，那么下面就来开发一下。
一键抽奖
引入Jquery
为了简化脚本开发，我选择引入jquery框架，那么在脚本元信息中就需要使用@require标签声明一下。
通过官方文档介绍可以看到，@require标签可以在脚本运行前加载指定的JavaScript文件。
// ==UserScript==
// @name 掘金一键抽奖
// @namespace http://tampermonkey.net/
// @version 0.1
// @description 掘金一键抽奖
// @author You
// @match *://*.juejin.cn/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=juejin.cn
// @grant none
// @require https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js
// ==/UserScript==
脚本开发
在引入Jquery后，我们要做的无非就是创建一个能够一键抽奖的按钮，并添加对应的请求点击事件。
掘金的相关API可以参考这里chenzijia12300/juejin-api: 掘金网站web端API收集 (github.com)
这里主要调用两个API：
具体代码如下：
(function() {
$(document).ready(function () {
$("body").prepend('<button id="lottery" style="float:left;margin-top:30%">一键抽奖</button>');
var score
var lottery = function() {
if (score<200) {
window.alert("矿石数不够啦~")
return
}
$.ajax({
type: "POST",
xhrFields:{withCredentials: true},
url: "https://api.juejin.cn/growth_api/v1/lottery/draw",
data: "{}",
dataType: "json",
success: function (response) {
if(response.err_no == 0) {
console.log("奖品:",response.data.lottery_name)
if(score>=200) {
score-=200
lottery()
}
} else {
console.log(response);
window.alert("抽奖失败:"+response.err_msg)
}
},
error: function(response) {
console.log(response)
window.alert("抽奖失败:"+response.err_msg)
}
});
}
$.ajax({
type: "GET",
xhrFields:{withCredentials: true},
url: "https://api.juejin.cn/growth_api/v1/get_cur_point",
success: function (response) {
console.log("当前矿石数："+response.data)
score = response.data
},
error: function(response) {
console.log(response)
}
});
$("#lottery").click(function (e) {
e.preventDefault();
lottery()
});
});
})();
可以看到矿石一键就没啦~，脚本运行正常，但同时也有很多可以优化的地方，例如奖品的输出等。
