運行效果

代碼中的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的主題，默認主題是綠柔，我們可以改成雅黑，雅藍或者自定義主題：

雅黑主題：

雅藍主題：

好了本節全部內容全部結束了，希望我準備的內容對你有所幫助

你的支持是我的最大動力，若覺得我的教程還可以對你有幫助為我點贊加關注！謝謝！