运行效果

代码中的js \html\css以及 图片都在本地，刚不是在服务器上运行。执行速度当然更快。相关通过electron 我们装uniapp发布的h5代码发布成了桌面应用。可同时打包为 win、mac 、linux的桌面应用。

1、快速安装electron

mkdir car

cd car

npm install electron --save-dev

2 安装electron-builder 即打包工具

nom install electron-builder --save-dev

3 直接用域名的方式。electron只是相当于壳了。

直接上main.js 这是electron的运行js 代码可以自己改造 先用直接打开网站域名方式

const {app, BrowserWindow}=require('electron')
const path=require('path')
//app.commandLine.appendSwitch('disable-web-security');
function createWindow () {
  // Create the browser window.
  const mainWindow=new BrowserWindow({
    width: 800,//宽度
    height: 600,//高度
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      webSecurity: false,//可以跨域 在loadURL下没有作用
    }
  })

  //mainWindow.loadFile(__dirname+'/h5/index.html') //执行本地代码
  mainWindow.loadURL('https://www.baidu.com')
  // Open the DevTools 打开调试.
  // mainWindow.webContents.openDevTools()
    // 当窗口关闭时调用的方法
  mainWindow.on('closed', ()=> {
    // 解除窗口对象的引用，通常而言如果应用支持多个窗口的话，你会在一个数组里
    // 存放窗口对象，在窗口关闭的时候应当删除相应的元素。
    wimainWindown=null;
  });
  // 加载完成后弹出登录框
  mainWindow.once('ready-to-show', ()=> {
    mainWindow.setTitle("小E修车");
    mainWindow.show();
  });
}

app.whenReady().then(()=> {
  createWindow()

  app.on('activate', function () {

    if (BrowserWindow.getAllWindows().length===0) createWindow()
  })
})

这里我用百度进行演示。直接运行：npm start

4 打包

sudo electron-builder 直接执行 当然你可以用参数生成win Mac liux 我本地环境是Mac 刚以Mac 为例

最后在dist目录下生成以下mac的执行文件

可以双击安装

5 uniapp 代码发布成html

主意在hbuilder中将 开发的路由模式改为hash 以及路径配置改为 ./

只有这样才能生成的html在本地执行 不再需要node环境。当然只是理想状态

最好生成代码：

将h5整个目录copy到你的electron项目

6 改造main.js 本地运行html 直接上main.js

const {app, BrowserWindow}=require('electron')
const path=require('path')
//app.commandLine.appendSwitch('disable-web-security');//这里也可以用来跨域
function createWindow () {
  // Create the browser window.
  const mainWindow=new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      webSecurity: false,//解决跨域请求
    }
  })

  mainWindow.loadFile(__dirname+'/h5/index.html') //这里执行的是html
 // mainWindow.loadURL('https://www.baidu.com')
  // Open the DevTools 打开调试.
  mainWindow.webContents.openDevTools() //打开调试 
  // 当窗口关闭时调用的方法
  mainWindow.on('closed', ()=> {
    // 解除窗口对象的引用，通常而言如果应用支持多个窗口的话，你会在一个数组里
    // 存放窗口对象，在窗口关闭的时候应当删除相应的元素。
    wimainWindown=null;
  });
  // 加载完成后弹出登录框
  mainWindow.once('ready-to-show', ()=> {
    mainWindow.setTitle("小E修车");
    mainWindow.show();
  });
}

app.whenReady().then(()=> {
  createWindow()

  app.on('activate', function () {

    if (BrowserWindow.getAllWindows().length===0) createWindow()
  })
})


app.on('window-all-closed', function () {
  if (process.platform !=='darwin') app.quit()
})

以上代码主要是mainWindow.loadURL 改为 mainWindow.loadFile

npm start 看到了熟悉画面 。

打包 sudo electron-builder

其中sudo是为了保证你的写入权限

只不过发现生成的代码是很大近二百M

着人工智能的迅猛发展以及 ChatGPT 的爆火，国内外都掀起了开发语言大模型的热潮。

今天介绍一下我们公司的产品：

【KuaFuAI1.0】

它可以用自然语言描述生成软件应用，是一个全流程、端对端、自动化的软件开发平台，并且在开发过程中支持全自定义修改。

Multi Agent AI 驱动的智能软件开发系统，结合 LLM 与 DevOps 工具将自然语言需求转化为可工作的软件，支持任何开发语言并扩展现有代码。

下面是一个开发网站的案例需求以及 KuaFuAI1.0 的详细使用说明

一、需求引入

一家创意设计工作室，专注于为年轻艺术家和设计师提供培训和工作空间。工作室希望建立一个系统，以更好地管理成员、课程和作品。

二、需求拆解

（一）成员个人档案管理

1. 档案包含：姓名、参加的课程 / 工作坊、参与项目记录。

2. 展示个人创作作品及同行评价。

（二）工作室管理平台

1. 管理网站：介绍工作室的理念、课程安排、导师团队。

2. 教师管理：教师资料、教学计划、学员反馈。

3. 成员统计：新加入成员统计、活跃度分析、课程参与度。

4. 项目数据分析：进行中项目、完成项目统计、项目效果评估。

（三）导师功能

1. 点名签到：记录成员出席情况。

2. 上传作品：分享成员作品，供评价和展示。

3. 作品点评：为作品提供专业点评，包括技术和创意方面的建议。

三、应用 KuaFuAI 进行制作
1. 登录 KuaFuAI 官网→点击应用列表→新建

2. 选择 web 应用→前后端 Python+HTML→新建 APP

3. 此时会弹出详细的参数设置，只需简单填写应用名称与应用介绍。这里我们根据需求填写一下，（与 AI 的交互在后面体现）拉到最下方点击提交即可

4. 这里能看到我们刚刚新建的模板，点击开始任务→选择已有的应用→选择工作室管理系统→点击开始任务

5. 这里可以看到我们的任务编号，在下方信息栏与 AI 机器人进行交互→编辑需求→提交

6. 稍等片刻，AI 机器人会确认他所理解的需求与我们的需求是否一致，如无疑问则点击提交即可，若有疑问可以进一步商榷修改到满足自身的需求为止

7. 它会基于需求生成一个 PRD 文档，如不满意也可以进行意见反馈，直到满意为止

8. 到这里会再次梳理我们的需求与它的理解是否一致，展现前端与后端的整体逻辑与布局

9. 随后生成接口文档、开发技术文档（所有环节都可以自定义修改调整）

10. 最后根据开发任务以及资料库的内容，对整体的编码信息进行调整，根据操作流程，运行代码自我检查→同步最新代码→将代码提交到仓库→触发持续集成→触发持续部署

11. 触发持续部署完成后，它会发送给我们一个网址（此时代表整个流程已经完成），复制浏览即可

12. 这里可以看到我们的系统已经初步构建完成，然后就可以进行实际操作了！

本次产品的使用模型为 KuaFuAI 1.0，除了可以自动开发前端与后端之外，还可以开发小游戏，网页等内容。后续我们还会不断的完善产品，拓宽应用的场景与范围。

PS：目前 KuaFuAI 2.0 即将完成，与 1.0 完全不同的交互界面（采用主流 AIGC 工具的交互方式）能够更进一步地提高生产效率，真正解放双手！

一个好的编辑器我们可以方便的开发项目，编写代码，配置和管理我们的项目。所以我们开始编写html代码之前需要搭建开发环境。

基于html项目的开发和代码编写现在网上有很多编辑器，也有免费的，也有收费的编辑器。基于在Windows系统环境下开发和编写html代码最简单的编辑器就是Windows自带的记事本，我们可以使用记事本编辑html代码。

使用记事本编写html的步骤是首先新建一个文本文档，按照html的语法规则编写相关的代码和保存文件，然后把文件的后缀名改为.html，使用电脑上的浏览器打开就可以查看我们代码的运行结果。

虽然记事本也能编写html代码，但是效率不高也不方便，所以我们使用专业的编辑器来开发项目，编写代码和管理项目。

常用html代码编写的免费软件有HBuilderX，vs code，Sublime Text 等等。

HBuilderX官网下载地址：

https://www.dcloud.io/hbuilderx.html

vs code的官网下载地址：

https://code.visualstudio.com/

Sublime Text官网下载地址：

http://www.sublimetext.com/

我们以后的教程都使用HBuilderX，所以下面为了同学们的学习方便，对HBuilderX的下载和安装做详细的教程。

一，下载

首先访问HBuilderX的官网网址：

https://www.dcloud.io/hbuilderx.html

打开上面的HBuilderX下载网址后点击页面上download，在弹出的对话框里选择适合自己电脑的HBuilderX版本下载。

在Windows10环境下下载后的文件是一个压缩的.zip文件。

二，安装

鼠标右击下载下来的压缩文件进行解压。

解压完成后是一个名为HBuilderX的文件夹。

解压完成后鼠标双击HBuilderX文件夹：

双击运行名为HBuilderX.exe的应用程序文件即可启动HBuilderX编辑器：

因为HBuilderX是一个绿色软件所以没有桌面快捷方式和开始菜单快速启动程序，我们可以右击HBuilderX.exe文件创建桌面快捷方式。

小百科：

绿色软件指一类小型软件，多数为免费软件，最大特点是软件无需安装便可使用，可存放于闪存中，移除后也不会将任何记录留在本机计算机上。通俗点讲绿色软件就是指不用安装，下载直接可以使用的软件。绿色软件不会在注册表中留下注册表键值，所以相对一般的软件来说，绿色软件对系统的影响几乎没有，所以是很好的一种软件类型。

三，新建项目

HBuilderX编辑器初次启动时的默认界面是下图所示：

按照下图所示可以创建一个新的名为demo1空白项目：

名为demo1的空白项目创建成功后的界面如下图所示：

接下来在刚我们新建的demo1项目下创建名为helloworld的html文件

鼠标右击创建的demo1项目选择新建在选择.html文件：

在弹出的对话框里填入html文件的名称：

编写一段代码：

运行：

在浏览器上观察效果：

好了，到这里html的开发环境搭建和HBuilderX的安装教程结束了。

下面再给大家教一下怎样修改HBuilderX的主题风格，HBuilderX自身提供了修改软件主题的功能，使用者可以自身需求和喜好修改HBuilderX的风格。在喜欢自己喜欢的环境下做开发也是令人羡慕的一件事。

按照一下步骤可以修改HBuilderX的主题，默认主题是绿柔，我们可以改成雅黑，雅蓝或者自定义主题：

雅黑主题：

雅蓝主题：

好了本节全部内容全部结束了，希望我准备的内容对你有所帮助

你的支持是我的最大动力，若觉得我的教程还可以对你有帮助为我点赞加关注！谢谢！