Electron 仿制WeGame（一）

最新推荐文章于 2024-05-11 09:46:09 发布
最新推荐文章于 2024-05-11 09:46:09 发布
阅读量2k 收藏 3
点赞数
分类专栏： Electron 文章标签： Electron Electron项目 Electron桌面程序 桌面程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_28254093/article/details/83049653
版权

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

步骤

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
    评论
专栏目录
仿WeGame界面-易语言
06-12
仿WeGame界面
纯组件仿WeGame界面-易语言
06-12
纯组件仿WeGame界面
Electron 仿制WeGame（三）
东明之羞的博客
10-18 671
在Visual Studio 中添加调试功能 步骤 1.在visual studio 中添加 Debugger for Electron插件，找到之后点击安装，安装完需要重启vscode; 2.重启之后配置调试环境 3.修改生成的配置文件最后的配置结果如下 { // 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。 // 欲了解更多...
利用电驴框架构建跨平台GUI应用：go-astilectron的无限潜力
最新发布
gitblog_00066的博客
05-11 412
利用电驴框架构建跨平台GUI应用：go-astilectron的无限潜力 项目地址:https://gitcode.com/asticode/go-astilectron 在软件开发的世界里，跨平台能力一直是开发者追求的目标之一。借助于go-astilectron，你现在可以利用GO语言和HTML/JS/CSS轻松构建强大的跨平台图形用户界面（GUI）应用。这个开源项目是官方的GO绑定库，其背后是...
Electron 仿制WeGame游戏盒子
东明之羞的博客
10-18 1755
目录 Electron 仿制lol TGP游戏盒子（一） Electron 仿制lol TGP游戏盒子（二） 持续更新中 代码以提交至GitHub，持续更新中 地址 源代码地址 第一次使用Electron 写桌面程序，许多东西写法还不太成熟，持续改进中，在后期的代码中可能会修改以至于推翻前期的代码。 ...
Electron 仿制WeGame（二）
东明之羞的博客
10-18 1564
第二节：使用HTML创建主页面 效果图 准备 1.在apps 下创建目录 css ,html,images,js 2.使用npm 在当前目录下安装添加 jQuery库 npm install jQuery 具体内容 1.在index.html页面中添加一下内容 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; ...
QML项目-ROSON课堂（仿腾讯游戏平台WeGame）
Allen Roson
10-16 1468
QtQuick项目；Qt QML项目开发
Electron仿制weGame第二节图片资源
10-16
资源文件本想免费，奈何资源分数最低1分。 Electron 可以使用js+html+css 做桌面程序，详情查看我的相关文章 https://blog.csdn.net/qq_28254093/article/details/83049653 Electron 仿制lol TGP游戏盒子
wallhaven-electron一款基于 Electron 壁纸客户端
07-03
wallhaven-electron一款基于 Electron 壁纸客户端 。通过 Issue 报告 bug 或进行咨询。提交 Pull Request 改进 wallhaven-electron 的代码。
electron制作仿制qq聊天界面的示例代码
10-17
主要介绍了electron制作仿制qq聊天界面的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
electron 的一个截图插件工具
08-14
Electron 是一个开源的框架，由GitHub开发，用于构建跨平台的桌面应用程序。它结合了Chromium（Google Chrome浏览器的核心）和Node.js，允许开发者使用Web技术（如HTML、CSS和JavaScript）来创建原生桌面应用。在 ...
易语言仿WeGame登录界面
11-25
WeGame登录的界面,挺好看的.易语言的.喜欢的可以下载一下嘎
wegame-api:微信小游戏TypeScript定义文件
05-08
wegame-api - 微信小游戏TypeScript定义文件 更新状态： 官方基础库2.9.3 TODO列表： iBeacon 蓝牙 低功耗蓝牙 GamePortal GameIcon GameBanner GameRecorder GameRecorderShareButton 安装： npm install @types/wegame-api 欢迎PR纠错 License MIT
ecshop仿360漂亮模板
09-17
仿站 需要帮助的请加QQ1611692359
【鲱鱼UI】高仿wegame界面源码miniblink&js交互-易语言
06-11
看到论坛上有很多人都仿过wegame的登录界面，有用exui的、炫彩的、exdui等等，但是好像还没有用html写来搞js交互的，然后我就也写了一个，html那部分代码全部纯手打，没有套框架，虽然用html写比较繁琐，miniblink交互体积比较大， 但个人觉得在视觉效果上它是非常好的，不然wegame也不会采取html来弄ui(wegame有很多地方也是用html写的)
微信 跳一跳 Electron版
01-11
标题中的“微信 跳一跳 Electron版”指的是基于Electron框架开发的微信小游戏“跳一跳”的桌面应用版本。Electron是一个开源框架，它允许开发者使用JavaScript、HTML和CSS来构建跨平台的桌面应用程序，结合了...
腾讯实操题 - Vue仿WeGame我的游戏页面的实现
寻思旧京洛
11-24 677
面试腾讯互娱时做的面试实操题, 模拟一个wegame的我的游戏页面, 做了两版本, 第一版横向滑动列表用了swiper插件, 体验和效果很好, 但是面试官说耍巧, 意思让我原生手写, 于是我自己原生手写了第二版, 然后肯定体验会比插件差很多, 所以没过. 害, 只能说鹅厂太难进了. 效果图如下 : 代码仓库地址:https://github.com/vvhr/wegame-demo-mygames ...
Electron仿制WeGame（五）
东明之羞的博客
10-23 832
这一节主要是打包,同时也是这个程序的完结点。 打包需要准备各系统的使用图片 使用命令打包，具体的教程网上很详细 这里提供传送门Electron 将网页打包成桌面应用（web页面生成exe） 【electron】electron入门 教你如何创建第一个electron应用 并进行打包【超详细】 打包后的效果 ...
用electron仿qq首页
weixin_34059951的博客
11-15 235
QQ首页的弹窗和天气效果都挺好，最近琢磨了一下用electron来仿造出这样的效果，主要是弹窗控件这块，也考虑了一下窗口的复用，下面展示一下做好后的效果，注：样式只是随便调了一下，毕竟没有那么多时间去弄样式 分析思路 制作思路首先是左边鼠标放到头像上显示出窗口并且带有动画效果，鼠标在两个窗口之间来回移动窗口会跟随移动并且切换内容，不难发现...
electron第一个应用
06-03
好的，下面是一个简单的 Electron 应用程序示例，你可以在本地尝试运行它： 首先，创建一个新的文件夹，将其命名为 my-electron-app。然后在该文件夹中创建一个 package.json 文件，并将以下内容添加到文件中： ```json { "name": "my-electron-app", "version": "1.0.0", "description": "My first Electron app", "main": "main.js", "scripts": { "start": "electron ." }, "dependencies": { "electron": "^12.0.0" } } ``` 在上面的 package.json 文件中，我们指定了应用程序的名称、版本、描述和入口文件（main.js）。同时，我们还指定了要安装的依赖项（electron）以及启动应用程序的脚本（"start": "electron ."）。 接下来，在 my-electron-app 文件夹中创建一个名为 main.js 的文件，并将以下内容添加到文件中： ```js const { app, BrowserWindow } = require('electron'); function createWindow() { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }); win.loadFile('index.html'); win.webContents.openDevTools(); } app.whenReady().then(() => { createWindow(); app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow(); } }); }); app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit(); } }); ``` 在上面的 main.js 文件中，我们使用 require 引入了 Electron 的 app 和 BrowserWindow 模块。然后，我们定义了一个 createWindow 函数，该函数创建了一个新的浏览器窗口，并加载了 index.html 文件。最后，我们使用 app 模块的 whenReady 方法来创建应用程序窗口，并在窗口关闭时退出应用程序。 接下来，在 my-electron-app 文件夹中创建一个名为 index.html 的文件，并将以下内容添加到文件中： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My Electron App</title> </head> <body> <h1>Hello, Electron!</h1> </body> </html> ``` 在上面的 index.html 文件中，我们创建了一个简单的 HTML 页面，其中包含一个标题。 最后，打开命令行窗口，导航到 my-electron-app 文件夹，并运行以下命令来启动应用程序： ```bash npm start ``` 这将启动 Electron 应用程序，并在浏览器窗口中显示 "Hello, Electron!"。 注意：在上面的示例中，我们启用了 Node.js 集成，这是一个不安全的做法。实际开发中，你应该禁用 Node.js 集成，并使用预加载脚本来访问 Node.js API。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值