了解如何开发“ WhatsApp Web”前端页面

Question

我试图了解WhatsApp Web前端页面是如何创建的，尤其是左侧的联系人列表（ <div id="pane-side"> ）。 联系人的名称使用"emojitext ellipsify"类，我正在尝试通过代码获取所有联系人的名称：

var contatosTemp = document.getElementsByClassName('emojitext ellipsify');
var contatos = [];
for (var i = 0; i < contatosTemp.length; i = i + 2) { contatos.push(contatosTemp[i].innerText); }
contatos

如果联系人列表的滚动位于顶部，则contatos的数量为19 。 但是，如果我滚动列表，则会增加contatos的数量，直到29为止。 如果我最小化窗口，则contatos的数量将减少到15 。

在恢复时，当用户滚动联系人列表时，上述JavaScript捕获的联系人列表数会更改。

如果您想了解我在做什么，请打开WhatsApp Web ，转到浏览器DevTools> Console并运行上面的JavaScript。

您将看到数组contatos的大小：

然后滚动屏幕左侧的窗格，然后再次执行JavaScript。 它将显示数组大小已更改。

我想获取所有联系人的姓名，但是JavaScript仅包含其中一部分。 我怎样才能做到这一点？

Answer 1

使用此脚本将带给您所有联系人

function contactList(){
   var user = Store.Chat.models; 
   var destiny = [];

   user.forEach(function(obj){destiny.push(obj.__x_formattedTitle)});
   return destiny }