electron demo

来源：互联网发布：小米算法工程师笔试编辑：程序博客网时间：2024/06/05 09:04

这里写图片描述
用electron框架做的一个demo程序，调用的数据来自showapi中的接口。

入口main.js
在app on ready回调中初始化菜单，主窗口，托盘，主页面index.html

const electron = require('electron')const menuTemplate = require('./js/menu').templateconst trayTempl = require('./js/menu').trayTemplconst path = require('path')const {app} = electronconst {Menu} = electronconst {BrowserWindow} = electronconst {Tray} = electronconst ipc = electron.ipcMainlet win = nulllet tray = nullfunction initMenu() {    const menu = Menu.buildFromTemplate(menuTemplate)    Menu.setApplicationMenu(menu)}function initWindow() {  win = new BrowserWindow({width: 700, height: 600})  win.loadURL(`file://${__dirname}/view/index.html`)  // win.webContents.openDevTools();  win.on('close', (event) => {    console.log('close');    if (process.platform != 'darwin') {      event.preventDefault()      win.hide()    }  })  win.on('closed', () => {    console.log('closed')    win = null  })}function initTray() {  if (process.platform == 'darwin') {    return;  }  const iconPath = path.join(__dirname, 'image', 'tray.ico')  tray = new Tray(iconPath)  tray.setToolTip('show api')  tray.setContextMenu(Menu.buildFromTemplate(trayTempl))  tray.on('click', () => {    win.show()  })}app.on('ready', () => {  initMenu()  initWindow()  initTray()})app.on('window-all-closed', () => {  console.log('window-all-closed')  app.quit()})app.on('activate', () => {  console.log('activate')  if (win === null) {    createWindow()  } else {    win.show()  }})ipc.on('load_url', (event, url) => {  if (win) {    console.log(url)    win.loadURL(url)  }})

使用showapi协议获取数据，然后通过ejs render在html上展示

'use strict';const ipc = require('electron').ipcRendererconst ejs = require('ejs')const funcList = [  {    webName: 'record_query.html',    img: 'https://www.showapi.com/images/apiLogo/20150928/5423acc973f41c03173a186a_5be02ffc910a49afbc82a3d16a7ef31a.png',    title: '备案查询',    brief: '根据域名，查询其备案信息，包括公司名称、备案号、系统名称、备案类型、备案资料更新时间。'  },  {    webName: 'phone_belong.html',    img:'https://www.showapi.com/images/apiLogo/20150609/5423acc973f41c03173a186a_87849c4e364a4d5cbdc0c6286b5b2736.png',    title: '手机归属地查询',    brief: '最新手机号段数据库，手机号码归属地数据库，2015年4月3183800条'  },  {    webName: 'movie_rank.html',    img:'https://www.showapi.com/images/apiLogo/20150806/54a253186e36f6005a077bbd_88d931a475d443bea4e1bcd7e31fcc71.jpg',    title: '电影排行',    brief: '影院日排行榜，单月票房，周末票房，单日票房，单周票房'  },  {    webName: 'joke.html',    img:'https://www.showapi.com/images/apiLogo/20150710/5423acc973f41c03173a186a_28e1f95c262749319fd093af97eaebf4.jpg',    title: '笑话大全',    brief: '笑话大全，信息搜集整理于互联网，每小时更新，包括文字笑话、搞笑图片等。'  },  {    webName: 'robot.html',    img:'https://www.showapi.com/images/apiLogo/20150604/5423acc973f41c03173a186a_6211d57da25345b2ac6f4fe9121c07c9.jpg',    title: '图灵机器人',    brief: '图灵机器人是国内第一家个性化智能机器人开放平台，为广大开发者提供免费的智能机器人API端口'  },  {    webName: 'today_in_history.html',    img:'https://www.showapi.com/images/apiLogo/20150609/5423acc973f41c03173a186a_f289bd79a76941bc82f47a214089d7c1.jpg',    title: '历史上的今天',    brief: '回顾历史的长河,历史是生活的一面镜子;历史上的每一天,都是喜忧参半,历史是不能忘记的。历史上的今天，看看都发生了什么重大事件。'  }]const html = ejs.render($('#func_list').html(), {funcList: funcList})$('.container').html(html)$('.func').click((e) => {  const webName = $(e.target).closest('.func').attr('webName')  ipc.send('load_url', `file://${__dirname}/../view/${webName}`)})

通过ipcRenderer与ipcMain与各页面之间通信

ipcRenderer

$('.func').click((e) => {  const webName = $(e.target).closest('.func').attr('webName')  ipc.send('load_url', `file://${__dirname}/../view/${webName}`)})

ipcMain

ipc.on('load_url', (event, url) => {  if (win) {    console.log(url)    win.loadURL(url)  }})

源码：https://code.csdn.net/tujiaw/showapi/tree/master

1 0