功能描述

其实对于大多数公司而言，是没有很多精力单独去维护一个PC桌面项目的，很多的展示手段是利用webview的方式去展示

index

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta
  6.       http-equiv="Content-Security-Policy"
  7.       content="default-src 'self'; script-src 'self'"
  8.     />
  9.     <title>webkubor</title>
  10.   </head>
  11.   <body>
  12.     <h1>欢迎使用webkubor-electron</h1>
  13.     <button id="new-store">换家店</button>
  14.          <button id="openShopBtn">查看webkubor开发的商城</button>
  15.       <!-- 加载渲染进程 -->
  16.     <script src="./render/index.js"></script>
  17.   </body>
  18. </html>

渲染进程文件-render

  1. const BrowerWindow = remote.BrowserWindow
  3. // 读取本地文件并且写入内容
  4. window.onload = () => {
  6.   // 打开新的子界面并加载本地页面
  7.   var newStoreBtn = document.querySelector('#new-store')
  8.   newStoreBtn.onclick = () => {
  9.     let newStoreWindow = new BrowerWindow({
  10.       width: 500,
  11.       height: 500
  12.     })
  13.     newStoreWindow.loadFile('newStore.html')
  14.     newStoreWindow.on('close', () => {
  15.       newStoreWindow = null
  16.     })
  17.   }
  18. }

新建的子界面内容

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <title>新世界按摩店</title>
  7. </head>
  8. <body>
  9.   <ul>
  10.     <li>麦当劳</li>
  11.     <li>肯德基</li>
  12.   </ul>
  13.   <style>
  14.     html, body {
  15.       border: 0;
  16.       margin: 0;
  17.       background: lightpink;
  18.     }
  19.   </style>
  20. </body>
  21. </html>

直接在子界面打开网站

  1. //在子界面打开网站
  2. var openShopBtn = document.querySelector('#openShopBtn')
  3. openShopBtn.onclick = function (e) {
  4.   window.open('https://h5.myconplus.com/')
  5. }

预览

image.png
image.png