上传文件网站,广告公司网络推广计划,WordPress怎么设置分类,平台设计是什么随着第一章中构建的应用程序#xff0c;我们将开始将其与Electron框架中的模块集成#xff0c;并以此为基础#xff0c;以更实用的方式了解它们。
过程之间的通信
根据第二章中的解释#xff0c;我们将发送每个进程之间的消息#xff1b;具体来说联系人和聊天#xff1…随着第一章中构建的应用程序我们将开始将其与Electron框架中的模块集成并以此为基础以更实用的方式了解它们。
过程之间的通信
根据第二章中的解释我们将发送每个进程之间的消息具体来说联系人和聊天这些数据将在主过程中定义因为这是负责处理这些数据的过程我们之前已经将其与中使用的客户端-服务器体系结构进行了比较web编程主要过程已经是服务器和网页一直是客户端它是从我们可以管理所有这些数据正如我们将在整本书中看到的那样第一次联系我们将了解如何从主进程处理到网页。
上传联系人和聊天
为了传递主流程中定义的数据我们将使用以下结构数据将从主进程中获得为了模拟数据库等外部结构我们将创建一个单独的文件到index.js该文件将负责提供数据我们将使用数据创建几个模块使其易于使用data.js
const contacts [{name: Alex Alexis,image: https://randomuser.me/api/portraits/women/56.jpg,last_chat: [{date: 9:15 AM,message: Lorem ipsum dolor sit amet,},],},{name: Eli Barrett,image: https://randomuser.me/api/portraits/women/96.jpg,last_chat: [{date: 8:30 PM,message: Lorem ipsum dolor sit amet,},],},{name: Kylie Young,image: https://randomuser.me/api/portraits/women/45.jpg,last_chat: [{date: 8:30 PM,message: Lorem ipsum dolor sit amet,},],},{name: Kylie Young,image: https://randomuser.me/api/portraits/women/45.jpg,last_chat: [{date: 8:30 PM,message: Lorem ipsum dolor sit amet,},],},
];
const chats [{user: {name: Alex Alexis,image: https://randomuser.me/api/portraits/women/56.jpg,},chat: {date: 9:15 AM,message:Lorem ipsum dolor sit amet consectetur adipisicing elit.Doloribus reprehenderit voluptatibus cumque, deserunt deleniti consequatur adipisci nisi consequuntur sunt itaque? Sunt aspernatur, ratione labore ipsam enim unde itaque dolorum magni?,},},{user: {name: Eli Barrett,image: https://randomuser.me/api/portraits/women/58.jpg,},chat: {date: 9:50 AM,message:Lorem ipsum dolor sit amet consectetur adipisicing elit.Doloribus reprehenderit voluptatibus cumque, deserunt deleniti consequatur adipisci nisi consequuntur sunt itaque? Sunt aspernatur, ratione labore ipsam enim unde itaque dolorum magni?,},},
];module.exports.contacts contacts;
module.exports.chats chats;
从“index.js”我们激活与Node的集成并消费它们我们定义了一个事件在该事件中当通过“did-finish-load”事件加载窗口网页时我们通过消息传输数据
const { app, BrowserWindow, Menu, shell } require(electron);
const { chats, contacts } require(./data);function createWindow() {let win new BrowserWindow({width: 800,height: 600,webPreferences: {nodeIntegration: true,contextIsolation: false,},});win.loadFile(index.html);win.webContents.openDevTools();win.webContents.on(did-finish-load, () {win.webContents.send(pr-chats, chats);win.webContents.send(pr-contacts, contacts);});
}
app.whenReady().then(createWindow);从网页上由于我们激活了与Node的集成我们可以导入ipcRenderer模块以便能够与主进程通信特别是我们有兴趣创建一个侦听器来接收主进程发送的数据 index.html
scriptfunction createChats(chats) {var lis chats.forEach((c) {lis div classd-flex chatdiv classw-75 div classcard bg-darkdiv classcard-body text-light${c.chat.message}/div/divp classsmall text-muted float-end${c.chat.date}/p/divdiv classw-25 d-flex align-items-endimg classrounded-pill ms-3 avatar src${c.user.image}//div/div})document.querySelector(.chats).innerHTML lis;}function createContacts(contacts) {var lis contacts.forEach((c) {lis li classp-2 card mt-2div classcard-bodydiv classd-flexdivimg classrounded-pill me-3 width60src${c.image}/divdivp classfw-bold mb-0 text-light${c.name}/pp classsmall text-muted${c.last_chat[0][message]}
/p/divdivp classsmall text-muted${c.last_chat[0][date]}/pspan classbadge bg-danger rounded-pill float-end1/span/div/div/div/li})document.querySelector(.contact).innerHTML lis;}const { ipcRenderer } require(electron)ipcRenderer.on(pr-chats, (event, chats) {createChats(chats)})ipcRenderer.on(pr-contacts, (event, contacts) {createContacts(contacts)})
/script根据具体情况我们稍微更改函数的签名在该签名中我们接收图表或联系人作为参数。我们调用这些函数来从先前定义的侦听器构建列表最后我们将得到相同的结果但现在数据从主进程进入渲染进程。
按选择加载联系人
在本节中我们将实现以下功能通过单击其中一个联系人加载与所述联系人对应的聊天或消息为了模拟这种行为我们将使用联系人数组索引就好像它是我们有兴趣获得聊天记录的联系人的ID一样为此我们实现了一个点击事件 以及函数我们调用主进程来提供基于ID的聊天 function changeContact(index) {ipcRenderer.send(pp-get-chat, index)}在数据拉取中我们将稍微改变结构我们将有一个数组其中数组的每个位置都将由上一条消息中提供的联系人索引访问
const contacts [{name: Alex Alexis,image: https://randomuser.me/api/portraits/women/56.jpg,last_chat: [{date: 9:15 AM,message: Lorem ipsum dolor sit amet consectetur adipisicing elit,},],},{name: Ramon Reed,image: https://randomuser.me/api/portraits/women/59.jpg,last_chat: [{date: 9:15 AM,message: Lorem Hello!,},],},{name: Eli Barrett,image: https://randomuser.me/api/portraits/women/58.jpg,last_chat: [{date: 8:55 PM,message: Lorem ipsum dolor sit ...,},],},
];
const chats [[{user: {name: Alex Alexis,image: https://randomuser.me/api/portraits/women/56.jpg,},chat: {date: 9:15 AM,message:Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus reprehenderit voluptatibus cumque, deserunt deleniti consequatur adipisci nisi consequuntur sunt itaque? Sunt aspernatur, ratione labore ipsam enim unde itaque dolorum magni?,},},{user: {name: Luis Perez,image: https://randomuser.me/api/portraits/women/58.jpg,},chat: {date: 9:50 AM,message:Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus reprehenderit voluptatibus cumque, deserunt deleniti consequatur adipisci nisi consequuntur sunt itaque? Sunt aspernatur, ratione labore ipsam enim unde itaque dolorum magni?,},},],[],[{user: {name: Anselmo Perez,image: https://randomuser.me/api/portraits/women/1.jpg,},chat: {date: 10:45 PM,message:Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus reprehenderit voluptatibus cumque, deserunt deleniti consequatur adipisci nisi consequuntur sunt itaque? Sunt aspernatur, ratione labore ipsam enim unde itaque dolorum magni?,},},],
];module.exports.contacts contacts;
module.exports.chats chats;
我们实现了从ipcRenderer发送的事件其中将接收到的索引作为参数返回相应的聊天 index.js
const { ipcMain } require(electron);
win.webContents.on(did-finish-load, () {//win.webContents.send(pr-chats, chats);win.webContents.send(pr-contacts, contacts);
});
ipcMain.on(pp-get-chat, (event, index) {win.webContents.send(pr-chats, chats[index])
})当所选联系人没有聊天时我们还会显示一个默认窗口
function createChats(chats) {var lis if (chats.length 0) {lis div classd-flex chatdiv classw-75 div classcard bg-darkdiv classcard-body text-lighth3 classtext-centerNo message/h3/div/div/div/div}else {chats.forEach((c) {lis div classd-flex chatdiv classw-75 div classcard bg-darkdiv classcard-body text-light${c.chat.message}/div/divp classsmall text-muted float-end${c.chat.date}/p/divdiv classw-25 d-flex align-items-endimg classrounded-pill ms-3 avatar src${c.user.image}//div/div})}document.querySelector(.chats).innerHTML lis;}这样在选择联系人时我们会改变显示的消息或聊天并完成骨架应用程序您可以在以下位置找到源代码 https://github.com/libredesarrollo/electron-chat-app/releases/tag/v0.1
