l1uqi / blog Goto Github PK

'use strict'

import { app, protocol, BrowserWindow, ipcMain } from 'electron'
import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
import * as path from 'path';
const fs = require('fs');
const { autoUpdater } = require('electron-updater');

const isDevelopment = process.env.NODE_ENV !== 'production';
const DOWNLOAD_URL = 'http://localhost:3006/';

var package_json = require('../package.json');
var mainWindow = null;


// Scheme must be registered before the app is ready
protocol.registerSchemesAsPrivileged([
  { scheme: 'app', privileges: { secure: true, standard: true } }
])

async function createWindow() {
  // Create the browser window.
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      
      // Use pluginOptions.nodeIntegration, leave this alone
      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION
    }
  })

  if (process.env.WEBPACK_DEV_SERVER_URL) {
    // Load the url of the dev server if in development mode
    await mainWindow.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
    if (!process.env.IS_TEST) mainWindow.webContents.openDevTools()
  } else {
    createProtocol('app')
    // Load the index.html when not in development
    mainWindow.loadURL('app://./index.html')
  }
}

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (BrowserWindow.getAllWindows().length === 0) createWindow()
})

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', async () => {
  if (isDevelopment && !process.env.IS_TEST) {
    // Install Vue Devtools
    try {
      await installExtension(VUEJS_DEVTOOLS)
    } catch (e) {
      console.error('Vue Devtools failed to install:', e.toString())
    }
  }
  console.log('ready')
  createWindow()
  updateHandle();
})

// Exit cleanly on request from parent process in development mode.
if (isDevelopment) {
  if (process.platform === 'win32') {
    process.on('message', (data) => {
      if (data === 'graceful-exit') {
        app.quit()
      }
    })
  } else {
    process.on('SIGTERM', () => {
      app.quit()
    })
  }
}


function updateHandle() {
  autoUpdater.currentVersion = package_json.version;

  autoUpdater.setFeedURL(DOWNLOAD_URL);

  // 取消自动更新
  autoUpdater.autoDownload = false;
  
  autoUpdater.on('checking-for-update', (info) => {
    // 开始检查是否有新版本
    // 可以在这里提醒用户正在查找新版本
    console.log('checking-for-update')
  })

  autoUpdater.on('update-available', (info) => {
    // 检查到有新版本
    // 提醒用户已经找到了新版本
    console.log('检查到有新版本')
  })
  
  autoUpdater.on('error', (err) => {
    // 自动升级遇到错误
  })
  
}

const Koa = require('koa');
const app = new Koa();
const path = require('path');
const serve = require('koa-static');
 
const main = serve(path.join(__dirname+'/public'));
app.use(main);
 
app.listen(3006,function(){
  console.log("监听3006端口")
});

import { ipcMain } from 'electron'

// ipcMain 监听渲染进程checkForUpdate 事件
ipcMain.on("checkForUpdate",() => {
  autoUpdater.currentVersion = package_json.version;
  //执行更新检查
  autoUpdater.checkForUpdates();
})

function updateHandle() {
	...
  autoUpdater.on('update-available', (info) => {
    // 检查到有新版本
    // 提醒用户已经找到了新版本
    console.log('检查到有新版本', info)
  })
  ...
}

'use strict'

import { app, protocol, BrowserWindow, ipcMain } from 'electron'
import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
const fs = require('fs');
const { autoUpdater } = require('electron-updater');

const isDevelopment = process.env.NODE_ENV !== 'production';
const DOWNLOAD_URL = 'http://localhost:3006/';

var package_json = require('../package.json');
var mainWindow = null;


// Scheme must be registered before the app is ready
protocol.registerSchemesAsPrivileged([
  { scheme: 'app', privileges: { secure: true, standard: true } }
])

async function createWindow() {
  // Create the browser window.
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      
      // Use pluginOptions.nodeIntegration, leave this alone
      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION
    }
  })

  if (process.env.WEBPACK_DEV_SERVER_URL) {
    // Load the url of the dev server if in development mode
    await mainWindow.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
    if (!process.env.IS_TEST) mainWindow.webContents.openDevTools()
  } else {
    createProtocol('app')
    // Load the index.html when not in development
    mainWindow.loadURL('app://./index.html')
  }
}

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (BrowserWindow.getAllWindows().length === 0) createWindow()
})

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', async () => {
  if (isDevelopment && !process.env.IS_TEST) {
    // Install Vue Devtools
    try {
      await installExtension(VUEJS_DEVTOOLS)
    } catch (e) {
      console.error('Vue Devtools failed to install:', e.toString())
    }
  }
  console.log('ready')
  createWindow()
  updateHandle();
})

// Exit cleanly on request from parent process in development mode.
if (isDevelopment) {
  if (process.platform === 'win32') {
    process.on('message', (data) => {
      if (data === 'graceful-exit') {
        app.quit()
      }
    })
  } else {
    process.on('SIGTERM', () => {
      app.quit()
    })
  }
}


const deleteFile = (path) => {
  var files = [];
  if( fs.existsSync(path) ) {
      files = fs.readdirSync(path);
      files.forEach(function(file){
          var curPath = path + "/" + file;
          if(fs.statSync(curPath).isDirectory()) {
              deleteFile(curPath);
          } else {
              fs.unlinkSync(curPath);
          }
      });
      fs.rmdirSync(path);
  }
};

function updateHandle() {
  autoUpdater.currentVersion = package_json.version;

  autoUpdater.setFeedURL(DOWNLOAD_URL);

  // 取消自动更新
  autoUpdater.autoDownload = false;
  
  autoUpdater.on('checking-for-update', (info) => {
    // 开始检查是否有新版本
    // 可以在这里提醒用户正在查找新版本
  })

  autoUpdater.on('update-available', (info) => {
    // 检查到有新版本
    // 提醒用户已经找到了新版本
    console.log(info)
    mainWindow.webContents.send('updateAvailable', info)
  })
  
  autoUpdater.on('update-not-available', (info) => {
    // 检查到无新版本
    // 提醒用户当前版本已经是最新版，无需更新
  })

  autoUpdater.on('download-progress', function (progressObj) {
    // 更新进度条
    mainWindow.webContents.send('downloadProgress', progressObj)
  })
  
  autoUpdater.on('error', (err) => {
    // 自动升级遇到错误
  })
  
  autoUpdater.on('update-downloaded', (ev, releaseNotes, releaseName) => {
    // 自动升级下载完成
    // 可以询问用户是否重启应用更新，用户如果同意就可以执行 autoUpdater.quitAndInstall()
    mainWindow.webContents.send('isUpdateNow')
  })
}

ipcMain.on("checkForUpdate",() => {
  console.log(autoUpdater.currentVersion)
  autoUpdater.currentVersion = package_json.version;
  //执行自动更新检查
  autoUpdater.checkForUpdates();
})

ipcMain.on("downloadUpdate",() => {
  try {
    // 更新前删除本地更新包
    deleteFile(autoUpdater.app.baseCachePath)
  }catch {
    
  }
  //执行自动更新检查
  autoUpdater.downloadUpdate();
})

ipcMain.on("quitAndInstall",() => {
  //执行自动更新检查
  autoUpdater.quitAndInstall();
})

npm install --save-dev eslint eslint-plugin-vue

var d = new Date()
var time = d.getHours()
if (time<10)
{
document.write("<b>Good morning</b>" )
}
else if (time>=10 && time<16) 
{
document.write("<b>Good day</b>")
}
else
{
document.write("<b>Hello World!</b>")
}

const createWindow = async () => {
  mainWindow = new BrowserWindow({
    minHeight: 600,
    minWidth: 1024, width: 1280, height: 720, titleBarStyle: 'hidden', frame: false, show: false
  });
    ……
};

// loading
const createLoadingWindow = async () => {   
  loadingWindow = new BrowserWindow({
    height: 260,
    width: 650,
    show: true,
    transparent: true,  // 透明窗口
    maximizable: false,  //禁止双击放大
    frame: false   // 去掉顶部操作栏
  })

  loadingWindow.loadURL(url.format({
    // loading.html 加载动画
    pathname: path.join(__dirname, './lib/loading/loading.html'),
    protocol: 'file:',
    slashes: true
  }))
    ……
}

import { ipcRenderer } from "electron";
const ipcMain = require('electron').ipcMain;

// 页面加载完毕时调用 通知关闭loading
ipcRenderer.send("close-loading-window");

app.on('ready', () => {
  // 创建加载动画 
  createLoadingWindow();
  // 创建主窗口
  createWindow();
  // 监听页面加载完毕事件
  ipcMain.on('close-loading-window', () => {
    
    if(loadingWindow) {
      loadingWindow.close();
    }
    mainWindow.show();
  })

});

app.disableHardwareAcceleration();

app.on('ready', () => {
  setTimeout(() => {
    createWindow();
    autoUpdater.checkForUpdatesAndNotify();
    createMenu();
  }, 50);
});

<html>

<head>
    <title>getBoundingClientRect</title>
</head>

<body>
    <style>
        body {
            margin: 0;
        }

        .rect {
            margin-top: 50px;
            width: 100%;
            height: 200px;
            background: red;
            text-align: center;
            line-height: 200px;
        }
    </style>
    <div id="contents" style="width: 100%"></div>
    <script>
        // 最大渲染条数
        const renderNumber = 100;

        let i = 0;
        // 渲染列表
        const renderList = [];

        const contents = document.getElementById("contents");

        // 已曝光
        let inVpList = [];

        const unionArray = (arr1, arr2) => {
            const newSet = new Set(arr1)
            arr2.map(item => {
                newSet.add(item)
            })
            return [...newSet].sort((a, b) => {
                return a - b;
            })
        }
        // 节流
        const throttled = (fn, delay = 500) => {
            let timer = null
            let starttime = Date.now()
            return function () {
                let curTime = Date.now() // 当前时间
                let remaining = delay - (curTime - starttime)  // 从上一次到现在，还剩下多少多余时间
                let context = this
                let args = arguments
                clearTimeout(timer)
                if (remaining <= 0) {
                    fn.apply(context, args)
                    starttime = Date.now()
                } else {
                    timer = setTimeout(fn, remaining);
                }
            }
        }

        const createElement = (number) => {
            let div = document.createElement('div');
            let textNode = document.createTextNode(number);
            div.appendChild(textNode);
            div.style.color = "white";
            div.style.fontSize = "100px";
            div.style.fontWeight = 600;
            div.className = 'rect'
            div.setAttribute("id", `div_${number}`);
            contents.appendChild(div);
            return div;
        }

        // 判断可视区域内
        const isElementInViewport = (el) => {
            let rect = el.getBoundingClientRect();
            return (
                rect.top >= 0 &&
                rect.left >= 0 &&
                rect.bottom <=
                (window.innerHeight || document.documentElement.clientHeight) &&
                rect.right <= (window.innerWidth || document.documentElement.clientWidth)
            );
        };

        while (i < renderNumber) {
            renderList.push(createElement(i));
            i++;
        }

        const addInVpList = (arr) => {
            return unionArray(inVpList, arr);
        }


        const handleScrollChange = (e) => {
            const list = renderList.filter(item => isElementInViewport(item)).map(item => item.textContent);
            inVpList = addInVpList(list)

            console.log(`已曝光: ${inVpList}`)
        }

        document.addEventListener('scroll', throttled(handleScrollChange))

    </script>
</body>

</html>

// 自动上报
// js

// vue
<button v-track:click="{
  'page_id': 1,
  'event_type': 12, // 事件类型
  'objs' // 业务数据
  }"
/>

<button v-track:keyup="{
  'page_id': 2,
  'event_type': 12, // 事件类型
  'objs' // 业务数据
  }"
/>

// 手动上报
trakerSDK.sendTracker({
  'page_id': 3,
  'event_type': 12,
  'object_ids': [1, 2, 3]
});

// 单页应用
router.beforeEach((to, from, next) => {
  // 获取当前时间
  const timestamp = new Date().getTime();
  // 上次时间
  const pretimestamp = getCache(LocalStoreEnum.PRE_TIMESTAMP);
  // 存入当前时间
  setCache(LocalStoreEnum.PRE_TIMESTAMP, timestamp);

  // 停留时间(s)
  let secound = (timestamp - pretimestamp) / 1000;
  next();
});

document.addEventListener("visibilitychange", () => {
  const state = document.visibilityState;
  let callbackData: any = null;
  if (state === "hidden") {
    // 页面不可见
  }
  if (state === "visible") {
    // 页面可见
  }

  // 如果业务需要 时间超过1小时 则算是新开页面 自行判断
});

// 判断上传长度 2000 个字符
const urlIsLong = (url: string) => {
  let totalLength = 0,
    charCode = 0;
  for (var i = 0; i < url.length; i++) {
    charCode = url.charCodeAt(i);
    if (charCode < 0x007f) {
      totalLength++;
    } else if (0x0080 <= charCode && charCode <= 0x07ff) {
      totalLength += 2;
    } else if (0x0800 <= charCode && charCode <= 0xffff) {
      totalLength += 3;
    }
  }
  return totalLength < 2000 ? false : true;
};

if (navigator.sendBeacon) {
  sendBeacon(url, params);
} else if (method === "POST" || urlIsLong(str)) {
  xmlRequest(url, params);
} else {
  const img = new Image();
  img.src = `${url}?${str}`;
}

import SimpleJsTracker from "simple-js-tracker";

const simpleJsTracker = new SimpleJsTracker({
  debug: true,
  url: "", // 服务地址
  enableHeatMap: true, // 开启热力图
  enableHashTracker: true,
  config: {
    ...
  }
});

// 更新传参
simpleJsTracker.setConfig(options);

// 自定义上传
simpleJsTracker.sendTracker(params);

// 初始化自定义vue2/3指令
simpleJsTracker.initDirectives(Vue);

// 初始化 VueRouter 监听
// 页面跳转监听， 上报的参数让用户自行提供 report
simpleJsTracker.registerVueRouterEvent(router, (res, report) => {
   const { to, from, secound } = res;
   // 页面进入
  if(to.meta.tracking) {
    const fromParams = {
      'event_type': 5,
      ...to.meta.tracking,
    }

    report(fromParams);
  }
  // 页面离开
  if(from.meta.tracking) {
    const fromParams = {
      'event_type': 6,
      ...from.meta.tracking,
    }
    report(fromParams);
  }
});