微信小游戏多账号快速登录插件

开发背景:
随着微信小程序用户越来越多,生态越来越繁荣,越来越多的企业开发者参与到小程序/小游戏的开发工作中,不断的推出新的产品,这也导致很多产品经理、运营人员、开发人非常频繁的登录微信公众平台,进行多账号的登录。

微信公众平台为了确保账号的安全性,采用了账号密码+扫描二维码的方式进行账号验证登录。我们可以通过浏览器记住账号密码的方式对输入框进行快速填充,但是当我们有多个甚至几十个账号的时候,我们很难记住每一个游戏的登录邮箱,没法通过双击账号输入框的填充提示来快速填充账号和密码。

怎么办,每次从记事本里面复制账号密码吗?这个过程太繁琐没有效率啦!

还有其他更有效率的办法吗?作为一个喜欢“偷懒”的程序员,当然得寻找或开发出更便捷的方法!

先上开发成果图(微信公众平台):
在这里插入图片描述
平台后台登录页面 列出了经常需要登录的小程序,是一个个可点击的按钮,点击按钮后自动登录,显二维码扫描页面。省去了寻找账号密码,填写账号密码,点击登录按钮的过程。

有没有很便捷!有没有节省了很多腐败拍拖睡大觉的时间!有没有很酷!有木有!不要谢,请叫我雷锋!

---------------------------------------这是一根华丽的分割线,下面来讲开发过程---------------------------------------

开发思路
  1. 可行性分析:既然是网页,而且是pc网页,那就可以通过浏览器插件来修改页面、修改数据、模拟事件,既然如此,还有什么办不到!结论当然是可行!
  2. 最先想到的是开发chrome插件,但相对来说开发过程略微复杂。再想想有没有更简单的开发插件方法?有,那就是基于“油猴插件”来二次开发,只要编写处理功能的脚本代码,无需考虑打包插件的额外工作。
  3. "油猴插件"怎么用?本文不做展开介绍,很容易就能掌握,详情请戳这里
  4. 功能设计:整理一个账号列表,针对微信公众平台登录页面,创建一个个游戏名称按钮,点击按钮自动把账号密码填入文本框,模拟点击登录按钮完成登录。
  5. 代码编写,遇到一些坑,比如怎么读取定位网页元素,什么更改值,怎么模拟点击按钮,边测试边修改,问题逐一解决。
完整代码
// ==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小程序开放平台登录界面图:
在这里插入图片描述

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

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

星星之Coder

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值