开发背景:
随着微信小程序用户越来越多,生态越来越繁荣,越来越多的企业开发者参与到小程序/小游戏的开发工作中,不断的推出新的产品,这也导致很多产品经理、运营人员、开发人非常频繁的登录微信公众平台,进行多账号的登录。
微信公众平台为了确保账号的安全性,采用了账号密码+扫描二维码的方式进行账号验证登录。我们可以通过浏览器记住账号密码的方式对输入框进行快速填充,但是当我们有多个甚至几十个账号的时候,我们很难记住每一个游戏的登录邮箱,没法通过双击账号输入框的填充提示来快速填充账号和密码。
怎么办,每次从记事本里面复制账号密码吗?这个过程太繁琐没有效率啦!
还有其他更有效率的办法吗?作为一个喜欢“偷懒”的程序员,当然得寻找或开发出更便捷的方法!
先上开发成果图(微信公众平台):

平台后台登录页面 列出了经常需要登录的小程序,是一个个可点击的按钮,点击按钮后自动登录,显二维码扫描页面。省去了寻找账号密码,填写账号密码,点击登录按钮的过程。
有没有很便捷!有没有节省了很多腐败拍拖睡大觉的时间!有没有很酷!有木有!不要谢,请叫我雷锋!
---------------------------------------这是一根华丽的分割线,下面来讲开发过程---------------------------------------
开发思路
- 可行性分析:既然是网页,而且是pc网页,那就可以通过浏览器插件来修改页面、修改数据、模拟事件,既然如此,还有什么办不到!结论当然是可行!
- 最先想到的是开发chrome插件,但相对来说开发过程略微复杂。再想想有没有更简单的开发插件方法?有,那就是基于“油猴插件”来二次开发,只要编写处理功能的脚本代码,无需考虑打包插件的额外工作。
- "油猴插件"怎么用?本文不做展开介绍,很容易就能掌握,详情请戳这里
- 功能设计:整理一个账号列表,针对微信公众平台登录页面,创建一个个游戏名称按钮,点击按钮自动把账号密码填入文本框,模拟点击登录按钮完成登录。
- 代码编写,遇到一些坑,比如怎么读取定位网页元素,什么更改值,怎么模拟点击按钮,边测试边修改,问题逐一解决。
完整代码
// ==UserScript==
// @name 多账号一键登录,支持微信公众平台、QQ小程序平台
// @namespace http://tampermonkey.net/
// @version 0.1
// @description 多账号一键快速登录,无需手动输入账号密码,解放您的双手和键盘!操作原理是先配置好账号密码列表,点击按钮程序智能自动登录。
// @author linguifa
// @match https://mp.weixin.qq.com/*
// @match https://q.qq.com/*
// @grant none
// ==/UserScript==
/** 数据对象 *********************************************************************************************************************************************/
var datalist;//[ {id:"xxxxx", name:"xxxxx", pwd:"xxxx"} ];
var datakey;//不同平台的数据key
/** 工具方法 *********************************************************************************************************************************************/
function getElementsClass(classnames){
var classobj= new Array();//定义数组
var classint=0;//定义数组的下标
var tags=document.getElementsByTagName("*");//获取HTML的所有标签
for(var i in tags){//对标签进行遍历
if(tags[i].nodeType==1){//判断节点类型
if(tags[i].getAttribute("class") == classnames)//判断和需要CLASS名字相同的,并组成一个数组
{
classobj[classint]=tags[i];
classint++;
}
}
}
return classobj;//返回组成的数组
}
function addGame() {
//if (!cookie) cookie = document.cookie; //普通的保存
//var selected = document.getElementById('multiaccSelect');
//var defaultText = selected.value ? selected.value : document.title
var value = prompt('请在输入框输入 游戏名称、登录账号(可以是邮箱/微信号/QQ号/原始ID)、密码三项内容,用逗号分隔', "游戏名称,账号,密码");
if (!value) return; //空名字不保存
let values = value.split(",");
if (values.length != 3) return;
datalist.push( {id:values[1], name:values[0], pwd:values[2] } );
localStorage.setItem(datakey, JSON.stringify(datalist));
switch(datakey){
case "weixin_datalist": weixin_insertDiv(datalist);
break;
case "qq_datalist": qq_insertDiv(datalist);
break;
}
}
function deleteAllGame(){
datalist = [];
localStorage.setItem(datakey, "[]");
switch(datakey){
case "weixin_datalist": weixin_insertDiv(datalist);
break;
case "qq_datalist": qq_insertDiv(datalist);
break;
}
}
/** 微信平台 *********************************************************************************************************************************************/
//界面
function weixin_addStyle() {
var style = document.createElement('style');
style.type = 'text/css';
style.textContent = '\
.panelDiv{\
position:relative;\
height:400px;\
width: 380px;\
margin-top: -280px;\
left: 100px;\
}\
#multiaccSelect{\
width:120px;\
}\
.titleBtn{\
width:40%;\
color:#ff0000;\
margin:5px;\
}\
.multiaccBtn{\
margin:5px;\
}'
var head = document.head;
head.appendChild(style);
}
function weixin_insertDiv(list) {
var panelDiv = document["panelDiv"] || document.createElement('div');
document["panelDiv"] = panelDiv;
panelDiv.className = 'panelDiv';
let str = '';
str += "<button type=button class=titleBtn onClick='addGame()'>增加游戏</button>";
str += "<button type=button class=titleBtn onClick='deleteAllGame()'>清空游戏</button>" + "<br>";
for(var i=0; i<list.length; i++){
str += "<button type=button class=multiaccBtn onClick='weixin_autoLogin(\"" + list[i].id + "\",\"" + list[i].pwd + "\")'>" + list[i].name + "</button>";
}
panelDiv.innerHTML = str;
var div = getElementsClass("banner")[0];
div.appendChild(panelDiv);
return div;
}
function weixin_init(){
//隐藏首页的部分元素,留下空白 用于显示游戏名称
var a = getElementsClass("banner");
a[0].style["background"] = "#FFFFFF";
delete a[0].style["background-image"];
datakey = "weixin_datalist";
datalist = JSON.parse(localStorage.getItem(datakey) || "[]")
weixin_addStyle();
weixin_insertDiv(datalist);
window.weixin_autoLogin = weixin_autoLogin;
}
function weixin_autoLogin(id, pwd){
var a = getElementsClass("weui-desktop-form__input");
a[0].value = id || "";
a[1].value = pwd || "";
//this.$store.state.main
a[0].dispatchEvent(new Event("input"))
a[1].dispatchEvent(new Event("input"))
setTimeout(function(){
var a = getElementsClass("btn_login");
a[0].dispatchEvent(new Event("click"))
}, 50);
}
/** QQ平台 *********************************************************************************************************************************************/
//界面
function qq_addStyle() {
var style = document.createElement('style');
style.type = 'text/css';
style.textContent = '\
.panelDiv{\
height:220px;\
width: 380px;\
}\
#multiaccSelect{\
width:120px;\
}\
.titleBtn{\
width:40%;\
color:#ff0000;\
margin:5px;\
height: 24px;\
background: #ffffff;\
font-size: 14px;\
}\
.multiaccBtn{\
margin:5px;\
height: 24px;\
width: 100%;\
color: #000000;\
background: #ffffff;\
font-size: 14px;\
}'
var head = document.head;
head.appendChild(style);
}
function qq_insertDiv(list) {
var panelDiv = document["panelDiv"] || document.createElement('div');
document["panelDiv"] = panelDiv;
panelDiv.className = 'panelDiv';
let str = '';
str += "<button type=button class=titleBtn onClick='addGame()'>增加游戏</button>";
str += "<button type=button class=titleBtn onClick='deleteAllGame()'>清空游戏</button>" + "<br>";
for(var i=0; i<list.length; i++){
str += "<button type=button class=multiaccBtn onClick='qq_autoLogin(\"" + list[i].id + "\",\"" + list[i].pwd + "\")'>" + list[i].name + "</button>";
}
panelDiv.innerHTML = str;
var div = getElementsClass("txt-wrap")[0];
div.appendChild(panelDiv);
return div;
}
function qq_init(){
//隐藏首页的部分元素,留下空白 用于显示游戏名称
var a = getElementsClass("txt-wrap__inner");
a[0].parentNode.removeChild(a[0]);
datakey = "qq_datalist";
datalist = JSON.parse(localStorage.getItem(datakey) || "[]")
qq_addStyle();
qq_insertDiv(datalist);
window.qq_autoLogin = qq_autoLogin;
}
function qq_autoLogin(id, pwd){
var a = getElementsClass("login-wrap__input");
a[0].value = id || "";
a[1].value = pwd || "";
//
a[0].dispatchEvent(new Event("input"))
a[1].dispatchEvent(new Event("input"))
setTimeout(function(){
var a = getElementsClass("login-wrap__button");
a[0].dispatchEvent(new Event("click"))
}, 50);
}
/***********************************************************************************************************************************************/
(function() {
//'use strict';
window.getElementsClass = getElementsClass; //方便调试
window.addGame = addGame;
window.deleteAllGame = deleteAllGame;
var url = location.href;
if(url.indexOf("mp.weixin.qq.com/") != -1){ //微信公众平台
var a = getElementsClass("btn_login");
if(!a || a.length == 0) return; //非登录页面,不执行下面逻辑
weixin_init();
}
else if(url.indexOf("q.qq.com/") != -1){ //qq轻游戏
qq_init();
}
})();
以上代码脚本文件也上传到了 Greasy Fork平台,搜索关键字"多账号一键登录,支持微信公众平台、QQ小程序平台"即可。
编写(下载)好脚本代码,在代码里面配置好你的小程序账号密码,脚本文件保存在"油猴"插件中运行,打开微信公众平台登录页面(或QQ小程序开放平台登录页面),就可以看到如上图这样的登录界面了!大功告成!
附QQ小程序开放平台登录界面图:

本文原创,未经作者同意禁止转载

709

被折叠的 条评论
为什么被折叠?



