热门关键字:
jquery > jquery教程 > jquery教程 > 使用HTML-CSS-JS-electron框架创建桌面应用程序(note)

使用HTML-CSS-JS-electron框架创建桌面应用程序(note)

264
作者:管理员
发布时间:2021/7/12 17:43:18
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=5039
  开始之前,安装node.js和git


  为项目创建空的文件夹


  进入到文件夹打开git bash


  1.使用npm install命令安装electron


  2.安装electron Forge


  3.安装完成后键入createelectron创建一个项目,项目名称叫cool-app


  4.创建完成后,项目文件夹会有框架代码,使用 npm run start 运行应用程序


  5.使用编辑器打开


  进入到 src文件夹下,使用VScode打开


  index.js 这是应用程序的主要逻辑


  6.使用任何node.js模块或者JS库,先进行安装


  7.在index.js中编辑以下代码


  启用webPreferences中启用节点集成


  8.在html文件中导入electron,


  ipcRender,


  通过接收消息名称来接收消息,通过时间处理程序中获取数据


  成功在流程间进行沟通


  在body中写布局,在css中写样式


  9.将从主流程接收到的数据放入span元素中。只需使用getElementById并更改innerHTML。我将使用toFixed将小数位限制为2。


  重新运行这个app


  10.创建安装程序


  方法一:electron Forge 使用npm run make


  方法二:使用electron-builder


  使用npm 安装(因为他是打包程序,所以我将使用开发者选项安装它)


  修改package.json文件


  接着更改html页面的


  最后进行打包


  输出将在dist文件夹下,进入dist文件夹下可以看到安装包


  双击安装包即可进行安装




如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:jquery
友荐云推荐