删除文章

确定要删除这篇文章吗?

取消
确定

electron demo

     阅读(662)  2017-04-14 21:50:22

electron demo实例 用electron框架做的一个demo程序,调用的数据来自showapi中的接口。

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

    const electron = require('electron')
    const menuTemplate = require('./js/menu').template
    const trayTempl = require('./js/menu').trayTempl
    const path = require('path')
    const {app} = electron
    const {Menu} = electron
    const {BrowserWindow} = electron
    const {Tray} = electron
    const ipc = electron.ipcMain
    
    let win = null
    let tray = null
    
    function 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)
    }
    })
    
    
  2. 使用showapi协议获取数据,然后通过ejs render在html上展示

    'use strict';
    const ipc = require('electron').ipcRenderer
    const 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}`)
    })
    
    
  3. 通过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

文章评论

Keep it simple,stupid
文章数
292
总访问量
355964
今日访问
171
最近评论

xuehaoyun : 很不错,来围观一下
tujiaw : 抱歉csdn code服务关闭了,这个代码我也找不到了
于淞 : 你好,这个文章的源码能分享一下吗,songsong9181@163.com,谢谢了 上面的写错了
于淞 : 你好,这个文章的源码能分享一下吗,838106303@163.com,谢谢了 上面的链接不能用了
tujiaw : 多谢多谢
essaypinglun college-paper.org : 很好的博客,赞赞
Folly : 这个实现有点奇怪,Qt为什么没有统一的比对方法。
过多s : alert("hello, world!")
tujiaw : 还不错哦
回到顶部