Electron 仿制WeGame（一）

最新推荐文章于 2024-04-22 09:36:30 发布

东明之羞

最新推荐文章于 2024-04-22 09:36:30 发布

阅读量2k

点赞数

分类专栏： Electron 文章标签： Electron Electron项目 Electron桌面程序桌面程序

本文链接：https://blog.csdn.net/qq_28254093/article/details/83049653

版权

Electron 专栏收录该内容

8 篇文章 2 订阅

订阅专栏

第一节：让项目跑起来，让窗口出现

步骤

1.创建工资目录

在本地磁盘上创建工作目录，我的目录是：E:\项目文件\ElectronToWindow\electron_tgp ，根据个人实际情况决定。

2.创建项目

使用cmd或者visual studio code(以下称vscode)调试控制台执行命令以下命令（以后会使用vscode执行命令）

npm init

npm install --save-dev electron

npm install jQuery

以上没有报错会生成package.json,并修改main的值为：main.js 以下内容

{
  "name": "electron_tgp",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^3.0.4"
  },
  "dependencies": {
    "jQuery": "^1.7.4"
  }
}

在根目录下创建 main.js

const {app,BrowserWindow} = require('electron')
app.on("ready",()=>{
  let win = new BrowserWindow({width:1280,height:830, frame: false})
  win.show()
  win.loadURL(__dirname+"/apps/index.html")
})

创建目录apps ,并在apps下创建index.html,内容如下

<!DOCTYPE html>
<html>
    <head>
        <title>TGP游戏盒子</title>
        <meta charset="utf-8" />
        <script>window.$= window.jQuery = require("jquery");</script>
    </head>
    <body>
        <h1>TGP游戏盒子</h1>
    </body>
    <script>
    </script>
</html>

3.vscode 调试控制台终端执行 electron 项目目录，我的目录是

electron E:\项目文件\ElectronToWindow\electron_tgp\

4.最终效果是

6.补充

A.vscode 调试终端使用方式：

B.文档目录结构

后面会一步步接近LoL TGP游戏盒子，尽情期待。第一次使用Electron，请大神指点。

====================回主目录======================

东明之羞

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录