嗯，一年一度的520又来了，看看自己是不是单身汪，快点找妹纸表白呀！！就用我们程序员的专有表达方式。 网页告白方式似乎已经没落，如果能有桌面端应用就极好了。可是咱也不会呀，只会html，可妹纸还是要，怎么办？？ 为了打造一个Electron桌面程序的开发环境，你只需要安装好Node.js、npm即可。 创建一个空文件夹，执行命令 现在我们可以安装electron了。官网推荐的安装方法是把它作为您 app 中的开发依赖项，这使您可以在不同的 app 中使用不同的 Electron 版本。执行以下命令即可。 新建 添加 代码链接：https://pan.baidu.com/s/13eNCC2IwxlCTvuI4YgBt0Q 提取码：n9xj 也许你的小姐姐电脑没有安装基本的Electron运行环境呢！这不是尴尬了。所以我们需要将应用进行打包。
从0-Electron开始告白
Electron 可以让你使用纯 JavaScript 调用丰富的原生 APIs 来创造桌面应用。你可以把它看作是专注于桌面应用而不是 web 服务器的，io.js 的一个变体。这不意味着 Electron 是绑定了 GUI 库的 JavaScript。相反，Electron 使用 web 页面作为它的 GUI，所以你能把它看作成一个被 JavaScript 控制的，精简版的 Chromium 浏览器。
配置开发环境
首先，安装最新版本的Node.js 。 我们推荐您安装最新的 长期支持版本 或者 当前发行版本 。 访问Node.js下载页面，选择Windows Installer。 下载完成后， 执行安装程序，根据引导完成安装即可。
在安装过程中的配置界面, 请勾选Node.js runtime、npm package manager和Add to PATH这三个选项。
安装完成后，我们需要来确认Node.js是不是可以正常工作。 点击 开始 按钮，输入PowerShell，找到Windows PowerShell。 打开PowerShell或其他你喜欢的命令行客户端后，通过以下命令来确认 node 和 npm已经安装成功：
由于大家都知道的原因使用npm install XX安装包的时候十分慢，不过我们可以更换为淘宝源：npm config set registry https://registry.npm.taobao.org // 检测更换是否成功 PS C:UsersCatWing> npm config get registry http://registry.npm.taobao.org/ 开发第一个Electron
npm init初始化项目（一路回车）。您会发现多了一个package.json的文件。将文件内容修改为：{ "name": "your-app", "version": "0.1.0", "main": "main.js", "scripts": { "start": "electron ." } } npm install --save-dev electron //添加依赖库至项目 npm install main.js的js文件，添加如下内容：const { app, BrowserWindow } = require('electron') function createWindow () { // 创建浏览器窗口 let win = new BrowserWindow({ width: 800, height: 700, resizable:false }) //去除菜单栏 win.setMenu(null) // 加载index.html文件 win.loadFile('index.html') } app.whenReady().then(createWindow) index.html，内容随意。现在我们就可以启动electron项目了，执行命令npm start。
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="index.css"/> </head> <body> <div class="question"> <h2>小姐姐，做我女朋友吧？</h2> <div class="operate"> <button class="btn" id="agree">好呀</button> <button class="btn" id="disagree">不好</button> </div> </div> <div class="main"> <img src="images/loveyou.gif" /> <img src="images/boygirl.gif" /> </div> <script src="index.js"></script> </body> </html> index.css
body { overflow: hidden; } .main { width: 640px; position: absolute; right: -20px; text-align: center; } .main .g1 { display: block; } .main .g2 { display: block; margin-top: -20px; } .question { position: absolute; left: 50px; top: 200px; z-index: 10; border: double 6px #999; border-radius: 15px; background-color: #FFDEE6; padding: 20px; height: 100px; } .question h2 { color: #666; margin-top: 10px; } .question .operate .btn { width: 80px; height: 35px; background-color: #9AE5FF; border: solid 1px #999; cursor: pointer; outline: none; margin-right: 10px; } .question .operate .btn:active { background-color: #66D7FF; } .question .operate #disagree { position: absolute; } index.js
let agree=document.querySelector("#agree") agree.onclick=function(){ alert("小姐姐，晚上下班一起走呗？") } let disagree=document.querySelector("#disagree") disagree.onmouseenter=function(){ let x=Math.random()*600 let y=Math.random()*400 disagree.style.left=x+"px" disagree.style.top=y+"px" } 
告白气球版
Electron打包
//查看electron版本 electron --version v9.0.0 //安装electron-packager npm install electron-packager -g //打包成exe程序 electron-packager . app --vin --out application --arch=x64 --electron-version 9.0.0 --overwrite --ignore=node_modules 
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)
