整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          用Spring Boot + Vue 開發網易云&QQ音樂(附源碼)!

          qq音樂創建文件失敗_qq音樂怎么打開文件_qq音樂開發者文檔

          作者|

          /a/76934

          前言

          雖然 B/S 是目前開發的主流,但是 C/S 仍然有很大的市場需求。受限于瀏覽器的沙盒限制,網頁應用無法滿足某些場景下的使用需求,而桌面應用可以讀寫本地文件、調用更多系統資源,再加上 Web 開發的低成本、高效率的優勢,這種跨平臺方式越來越受到開發者的喜愛。

          是一個基于 和 Node.js,使用 HTML、CSS 和 來構建跨平臺應用的跨平臺開發框架,兼容 Mac、Windows 和 Linux。目前, 已經創建了包括 VScode 和 Atom 在內的大量應用。

          環境搭建

          創建 跨平臺應用之前,需要先安裝一些常用的工具,如 Node、vue 和 等。

          安裝Node

          進入 Node 官網下載頁 ,然后下載對應的版本即可,下載時建議下載穩定版本。如果安裝 Node 使用 方式,建議安裝時將 npm 倉庫鏡像改為淘寶鏡像,如下所示。

          npm config set registry http://registry.npm.taobao.org/
          或者
          npm install -g cnpm --registry=https://registry.npm.taobao.org

          安裝/升級 vue-cli

          先執行以下命令,確認下本地安裝的 vue-cli 版本。

          vue -V

          如果沒有安裝或者不是最新版,可以執行以下命令安裝/升級。

          npm install @vue/cli -g

          安裝

          使用如下命令安裝 插件。

          npm install -g electron
          或者
          cnpm install -g electron

          為了驗證是否安裝成功,可以使用如下的命令。

          electron --version

          創建運行項目

          官方提供了一個簡單的項目,可以執行以下命令將項目克隆到本地。

          git clone https://github.com/electron/electron-quick-start

          然后在項目中執行如下命令即可啟動項目。

          qq音樂怎么打開文件_qq音樂創建文件失敗_qq音樂開發者文檔

          cd electron-quick-start
          npm install
          npm start

          啟動后項目的效果如下圖。

          qq音樂開發者文檔_qq音樂怎么打開文件_qq音樂創建文件失敗

          除此之外,我們可以使用 vue-cli 腳手架工具來創建項目。

          vue init simulatedgreg/electron-vue

          然后根據下面的提示一步步選中選項即可創建項目,如下所示。

          qq音樂創建文件失敗_qq音樂開發者文檔_qq音樂怎么打開文件

          然后,使用 npm install 命令安裝項目所需要的依賴包,安裝完成之后,可以使用 npm run dev 或 npm run build 命令運行 -vue 模版應用程序,運行效果如下圖所示。

          qq音樂開發者文檔_qq音樂創建文件失敗_qq音樂怎么打開文件

          源碼目錄

          的源代碼主要依據 的拆分約定被拆成了許多部分。為了更好地理解源代碼,您可能需要了解一下 的多進程架構。

          源碼目錄結構和含義具體如下:

          Electron
          ├──atom - Electron 的源代碼
          | ├── app - 系統入口代碼
          | ├── browser - 包含了主窗口、UI 和其他所有與主進程有關的東西,它會告訴渲染進程如何管理頁面
          | | ├── lib - 主進程初始化代碼中 JavaScript 部分的代碼
          | | ├── ui - 不同平臺上 UI 部分的實現
          | | | ├── cocoa - Cocoa 部分的源代碼
          | | | ├── gtk - GTK+ 部分的源代碼
          | | | └── win - Windows GUI 部分的源代碼
          | | ├── default_app - 在沒有指定 app 的情況下 Electron 啟動時默認顯示的頁面
          | | ├── api - 主進程 API 的實現
          | | | └── lib - API 實現中 Javascript 部分的代碼
          | | ├── net - 網絡相關的代碼
          | | ├── mac - 與 Mac 有關的 Objective-C 代碼
          | | └── resources - 圖標,平臺相關的文件等
          | ├── renderer - 運行在渲染進程中的代碼
          | | ├── lib - 渲染進程初始化代碼中 JavaScript 部分的代碼
          | | └── api - 渲染進程 API 的實現
          | | └── lib - API 實現中 Javascript 部分的代碼
          | └── common - 同時被主進程和渲染進程用到的代碼,包括了一些用來將 node 的事件循環
          | | 整合到 Chromium 的事件循環中時用到的工具函數和代碼
          | ├── lib - 同時被主進程和渲染進程使用到的 Javascript 初始化代碼
          | └── api - 同時被主進程和渲染進程使用到的 API 的實現以及 Electron 內置模塊的基礎設施
          | └── lib - API 實現中 Javascript 部分的代碼
          ├── chromium_src - 從 Chromium 項目中拷貝來的代碼
          ├── docs - 英語版本的文檔
          ├── docs-translations - 各種語言版本的文檔翻譯
          ├── spec - 自動化測試
          ├── atom.gyp - Electron 的構建規則
          └── common.gypi - 為諸如 `node` 和 `breakpad` 等其他組件準備的編譯設置和構建規則

          平時開發時,需要重點關注的就是 src、package.json 和 .yml 目錄。除此之外,其他需要注意的目錄如下:

          應用工程目錄

          使用 -vue 模版創建的 工程結構如下圖。

          qq音樂開發者文檔_qq音樂創建文件失敗_qq音樂怎么打開文件

          和前端工程的項目結構類似, 項目的目錄結構如下所示:

          對于開發者來說, 90% 的工作都是在 src 中完成,src 中的文件目錄如下。

          應用程序分成三個基礎模塊:主進程、進程間通信和渲染進程。

          1、主進程

          運行 package.json 的 main 腳本(.js)的進程被稱為主進程。在主進程中運行的腳本通過創建web頁面來展示用戶界面。一個 應用總是有且只有一個主進程。

          2、渲染進程

          由于 使用了 來展示 Web 頁面,所以 的多進程架構也被使用到。每個 中的 Web 頁面運行在它自己的渲染進程中。在普通的瀏覽器中,Web 頁面通常在一個沙盒環境中運行,不被允許去接觸原生的資源。然而 允許用戶在 Node.js 的 API 支持下可以在頁面中和操作系統進行一些底層交互。

          3、主進程與渲染進程通信

          qq音樂怎么打開文件_qq音樂創建文件失敗_qq音樂開發者文檔

          主進程使用 實例創建頁面。每個 實例都在自己的渲染進程里運行頁面。當一個 實例被銷毀后,相應的渲染進程也會被終止。主進程管理所有的 Web 頁面和它們對應的渲染進程。每個渲染進程都是獨立的,它只關心它所運行的 Web 頁面。

          src 目錄結構

          在 目錄中,src 會包包含 main 和 兩個目錄。

          main 目錄

          main 目錄會包含 index.js 和 index.dev.js 兩個文件。

          渲染進程

          是渲染進程目錄,平時項目開發源碼的存放目錄,包含 assets、、router、store、App.vue 和 main.js。

          assets:assets 下的文件如(js、css)都會在 dist 文件夾下面的項目目錄分別合并到一個文件里面去。:此文件用于存放應用開發的組件,可以是自定義的組件。router:如果你了解 vue-router,那么 項目的路由的使用方式和 vue-router 的使用方式類似。modules:-vue 利用 vuex 的模塊結構創建多個數據存儲,并保存在 src//store/modules 中。

          綜合示例

          創建 跨平臺應用之前,需要先安裝一些常用的工具,如 Node、vue 和 等。

          1、網易云音樂

          -vue-cloud-music是一款使用+Vue+Ant Design Vue技術開發跨平臺桌面應用。下載鏈接:。具有如下特點:

          以下是部分運行效果:

          qq音樂怎么打開文件_qq音樂創建文件失敗_qq音樂開發者文檔

          qq音樂開發者文檔_qq音樂怎么打開文件_qq音樂創建文件失敗

          2、qq音樂播放器

          qq音樂播放器基于 -vue 開發的音樂播放器,界面模仿QQ音樂,使用的技術棧-vue+vue+vuex+vue-router+element- UI。可以使用如下的方式來運行項目。

          git clone https://github.com/SmallRuralDog/electron-vue-music.git

          cd electron-vue-music

          npm install

          # 運行開發模式
          npm run dev

          # 打包安裝文件
          npm run build

          部分運行效果如下圖。

          qq音樂創建文件失敗_qq音樂開發者文檔_qq音樂怎么打開文件

          qq音樂怎么打開文件_qq音樂開發者文檔_qq音樂創建文件失敗

          源碼:

          - END?-

          qq音樂開發者文檔_qq音樂創建文件失敗_qq音樂怎么打開文件


          主站蜘蛛池模板: 亚洲色欲一区二区三区在线观看 | 国产一区二区三区在线看| 国产激情一区二区三区 | 国产一区二区高清在线播放| 精品福利一区二区三区免费视频| 久久成人国产精品一区二区| 日本一区二区三区精品视频| 无码日韩人妻av一区免费| 中文字幕一区二区三区在线观看 | 一区二区三区免费电影| 国产伦精品一区二区三区无广告| 精品无码日韩一区二区三区不卡 | 三上悠亚一区二区观看| 无码国产亚洲日韩国精品视频一区二区三区| 蜜臀AV在线播放一区二区三区| 一区二区三区四区精品视频| 精品视频一区二区三区在线观看| 99久久国产精品免费一区二区| 久久久久人妻一区精品果冻| www一区二区www免费| 在线视频一区二区三区三区不卡| 中文字幕无线码一区| 岛国无码av不卡一区二区| 又硬又粗又大一区二区三区视频 | 区三区激情福利综合中文字幕在线一区| 冲田杏梨AV一区二区三区| 四虎成人精品一区二区免费网站 | 国产一区二区三区在线影院| 日韩精品无码一区二区三区四区| а天堂中文最新一区二区三区| 国产精品一区12p| 国产一区二区三区高清在线观看 | 无码人妻一区二区三区免费| 日韩免费无码一区二区视频| 精品少妇人妻AV一区二区| 美女免费视频一区二区三区| 相泽亚洲一区中文字幕| 亚洲av午夜福利精品一区| 成人区精品一区二区不卡亚洲| 免费看AV毛片一区二区三区| 一区二区三区无码高清|