注意，本文实现功能不涉及任何后端，有后端搭伙的小伙伴可以不用看了哈。
微信
这两天解决公众号广告分发平台项目（基于Electron）的一些棘手问题，其中之一就是微信公众号自动登录问题。
一个PC客户端，内嵌了一个webview，里面塞入的是微信公众号首页，即登录页：https://mp.weixin.qq.com/，拿Cookie，Token什么的不在本文内，较为敏感，这里只说一下实现自动登录功能。
公众号首页
核心功能就两块，webview的preload插入js文件，js文件里面动态嵌入不同的账密。
Electron的webview允许开发者设计预插入一个js文件，具体官网描述如下：
preload
preload
<webview src="https://www.github.com/" preload="./test.js"></webview>
指定一个脚本在访客页中其他脚本执行之前先加载。 该脚本的URL的协议必须是 file: asar:二者之一，因为在访客页中，它是通过“内部”的 require 去加载的
当访客页没有 node integration ，这个脚本仍然有能力去访问所有的 Node APIs, 但是当这个脚本执行执行完成之后，通过Node 注入的全局对象（global objects）将会被删除。
注意: 在为 will-attach-webview 事件指定 webPreferences 时，这个选项将作为 preloadURL 出现，而不是 preload。
所以，相对来说简单的想法就是在preload的js里面，我们做一下输入框内容的填充即可。
道理是这么个道理，但是实际操作起来会有一些问题，我们代码一步一步来，首先想到的是，input.value = x这种操作。
下面是账号input相关信息：
account
下面是密码input相关信息：
pwd
那么就可以通过querySelector方式获取两个输入框了：
// inputs.length === ，刚好两个，不用担心其他的干扰了。 let inputs = document.querySelectorAll(&#;.weui-desktop-form__input&#;)
再观察登录按钮下：
login
嘛，我个人是不喜欢使用a标签当提交按钮……
获取方式：
let a = document.querySelector(&#;.btn_login&#;)
很简单吧。
于是就有如下提交代码：
let inputs = document.querySelectorAll(&#;.weui-desktop-form__input&#;)
// 随手放到数组里，不要较真，账密自己填写自己的
let infos = [&#;account&#;, &#;password&#;]
for(let i = ; i < inputs.length; i++) {
let input = inputs[i]
input.value = infos[i]
setTimeout(() => {
let a = document.querySelector(&#;.btn_login&#;)
a.click()
}, )
}按说，逻辑没问题。但是，实际使用公众号平台会返回告诉你，没有输入账号（密码）。
只能抠下源码分析怎么回事了，源码所在位置（随机数你看到的与我未必一样）：
源码
右侧复制下来，然后本地编辑器新建js，并且格式化后就可以看到比较清晰的源码，虽然命名被压缩后比较奇葩，如下：
源码格式化后
检索相关关键词（比如“你还没有输入帐号！”），或者login（查多了就知道了），就可以找到相关的逻辑所在。
通过第一行的define，第一时间想到的是seajs，后来发现就是seajs，无他。
再看到里面的，computed，watch，mounted之类的，也可以联想到是Vue，所以应当是seajs与Vue混合开发的公众号首页。
到这里，就相对清晰了，获取不到账密原因在于我们直接设置value的方式，并不能触发Vue实例的data修改，如下：
核心data值
此时，就该想到Vue的事件机制（不需要懂源码，用过就差不多），简单来说，就是事件函数驱动data变化，而不是外部手动修改DOM可以触发。
所以，增加一句话就可以混淆Vue的data机制，从而解决data值不响应变化的问题：
input.dispatchEvent(new Event(&#;input&#;))
没错，神奇的Event函数，通过new对象的方式，让相应标签实例主动触发相关事件。
这里注意下，不是所有都是input事件，这个根据标签不同而不同，我们这里要解决的是微信公众号登录的问题，所以是输入框input标签，那么自然就是input事件（oninput）了。
完整处理代码如下，请注意与上方的对比：
let inputs = document.querySelectorAll(&#;.weui-desktop-form__input&#;)
// 随手放到数组里，不要较真，账密自己填写自己的
let infos = [&#;account&#;, &#;password&#;]
for(let i = ; i < inputs.length; i++) {
let input = inputs[i]
input.value = infos[i]
// 修改input的值后，记得主动触发一次input事件。
input.dispatchEvent(new Event(&#;input&#;))
setTimeout(() => {
let a = document.querySelector(&#;.btn_login&#;)
a.click()
}, )
}这样，a的click事件就生效了，至此，完成登录这个事情。
上面解决了模拟登录问题，但是仅仅是模拟，因为账密是写死的，别忘了，我们现在在Electron的一个webview组件里面。
现在要考虑的是，如何给webview组件带入不同的账密。
fs写入新的js，里面插入账密，再读取
通过其他webview文件信息插入
先说第一种，这个是有点node基础的小伙伴都会首先想到的，没错，我尝试了，然后，挂了。
原因很简单，沙盒内的文件路径与你启动前配置的文件路径不同，导致代码上写的读取路径（readFileSync）与写入路径（writeFileSync）不同，能写不能读，WTF……这里使用Sync原因很简单，异步处理相对麻烦，调试用同步，高效快速。
于是我们pass第一种方案，如果你成功了，务必告诉我下。
然后是第二种：
这里先说明下，个人觉得第二种有点侥幸，因为公众号后端验证没有严格到把ua(userAgent)也算进去，所以我找到这个方案。
首先查询了webview能够带入进去的所有属性，很幸运，有个ua，官网介绍如下：
官网ua
useragent
<webview src="https://www.github.com/" useragent="Mozilla/. (Windows NT .; WOW; Trident/.; AS; rv:.) like Gecko"></webview>
在访客页被导航（navigated）之前，为它设置 user agent，一旦这个页面加载之后，使用 setUserAgent 方法去改变这个页面的 user agent。
事实上，还有别的（主要受webview限制，即Electron限制），但是懒得找了，差不多意思就行。
可能已经有小伙伴想到方案了，所以我就不墨迹了，直接上代码处理，先是写入：
// 你也可以写成标签<webview useragent="[&#;account&#;, &#;password&#;]"></webview>，这里为了灵活而已 webview.setAttribute(&#;useragent&#;, "[&#;account&#;, &#;password&#;]")
然后读取并赋值：
let infos = JSON.parse(navigator.userAgent)
由于ua我们写成了字符串的数组，所以这里自然可以解开成数组实例。
那么后面就简单了，不再赘述，直接看完整的核心代码即可，注意对比差异：
let inputs = document.querySelectorAll(&#;.weui-desktop-form__input&#;)
// 从ua获取传入的值
let infos = JSON.parse(navigator.userAgent)
for(let i = ; i < inputs.length; i++) {
let input = inputs[i]
input.value = infos[i]
// 修改input的值后，记得主动触发一次input事件。
input.dispatchEvent(new Event(&#;input&#;))
setTimeout(() => {
let a = document.querySelector(&#;.btn_login&#;)
a.click()
}, )
}至此，我们就解决了纯前端模拟微信页面登录，并动态不同账号登录的问题了。
效果如下：
autologin
感谢大家的阅读，欢迎交流。
