最近、電子を勉強したので、練習プロジェクトlocal-music-playerを行うには、主な機能は、曲のリストに音楽をインポートし、音楽を再生し、音楽を削除したりすることです。アドレスを添付、ダウンロードして実行すると、アプリからパッケージ化されます。

電子、ネイティブjsと技術。

まず最終的な製品の効果を見て、最初は空白のリストです。

次に、最初のクリックで曲を追加します。

プロジェクトの開始

私は直接公式サイト www.electronjs.org/,この公式サイトもかなりゴミです、しばしば開くことができない、開くのが遅い、私はまだXの壁を超えています。

# サンプルプロジェクトのリポジトリをクローンする
$ git clone https://.//--rt
# このリポジトリに行き、local-music-playerにリネームする。
$ cd local-music-player
# 依存関係をインストールして実行する
$ npm install && npm start

あなたがWindowsユーザーであれば、一般的に失敗するので、ここでVisual C + +のパッケージ、Pythonなどの環境依存の束をダウンロードするため、まず、上記の手順を通過しないように、まず次のリンクにポイントし、ここでその指示に従って、良い仕事をするための事前環境www.electronjs.org/プロジェクトnpmインストール＆＆npmの起動を入力します。次に、プロジェクトnpm install && npm startに移動します。

で準備完了です。

開発

const win = new BrowserWindow({...})
win.webContents.xxx

レンダリング処理のメソッドを操作するために通信にはipcMainとipcRendererの方法しか使いません。electron-storeライブラリを使用した音楽のローカルインポートは、ここでは、情報の追加、削除、変更後の曲のリストを記録するファイルの主な生成です。これを使用すると、ローカルディレクトリにjsonファイルが生成され、ファイル名はコードで制御されます。

パッケージング

{
 "name": "local-music-player",
 "version": "1.0.0",
 "description": "音楽プレイヤー ",
 "main": "main.js",
 "scripts": {
 "start": "nodemon --watch main.js --exec electron .",
 "build": "electron-builder"
 },
 "build": {
 "appId": "local.music.app",
 "productName": "音楽プレーヤー",
 "mac": {
 "category": "public.app-category.productivity",
 "artifactName": "${productName}-${version}.${ext}"
 },
 "win": {
 "target": [
 {
 "target": "nsis",
 "arch": [
 "x64",
 "ia32"
 ]
 }
 ],
 "icon": "./build/icon/icon.ico",
 "artifactName": "${productName}-${version}.${ext}",
 "publisherName": "xxx"
 },
 "nsis": {
 "allowToChangeInstallationDirectory": true,
 "oneClick": false,
 "perMachine": false,
 "installerIcon": "./build/icon/icon.ico",
 "uninstallerIcon": "./build/icon/icon.ico",
 "installerHeaderIcon": "./build/icon/icon.ico",
 "createDesktopShortcut": true
 },
 "copyright": "2020 xx ."
 },
 "repository": "https://.//--rt",
 "keywords": [
 "Electron",
 "quick",
 "start",
 "tutorial",
 "demo"
 ],
 "author": "GitHub",
 "license": "CC0-1.0",
 "devDependencies": {
 "electron": "^9.1.0",
 "electron-builder": "^",
 "nodemon": "^2.0.4"
 },
 "dependencies": {
 "bootstrap": "^4.5.0",
 "electron-store": "^6.0.0",
 "uuid": "^8.2.0"
 }
}

大きな落とし穴: ダウンロードエラー。

パッケージ概要

1、最初にビルドオプションを設定し、次にnpm run buildを実行します。ちなみに、ルートディレクトリにもビルドフォルダを作成して256x256のicoアイコンを取得する必要があります。"icon "内のwinオプションの下にあるビルドオプションのように: "./build/icon/icon.ico"；

最後に、パッケージは正常にdistディレクトリにパッケージ化されます

最終的には、dist/music-player-1.0.0.exeを取得してインストールすることになります。