シリーズ記事ディレクトリ
シリーズ第 1 回: vue3+electron によるデスクトップ ソフトウェア開発の紹介と実践 (0) - Electron アプリケーションの作成
記事ディレクトリ
序文
この連載の第 6 回から 3 回に分けて、ファイルのアップロードを実現するためのシステムレベルの右クリック、カスケード メニューを実現するためのレジストリの手動変更、およびカスケード メニューを実現するためのレジストリの電子操作について説明しました。
インターネット上のほとんどの記事もここで終わりますが、多くのビジネス シナリオでは、ワンクリック アップロード機能を実現するには、右クリックして複数のファイルを選択する必要があります。図に示すように:
インターネット上の記事の中には、ファイル（写真）を複数選択してアップロードするという記述もありましたが、基本的にコード操作は行わず、マウスを使って複数のファイルをelectronアプリケーションのアイコンにドラッグし、electronのデフォルト機能を使用します。私たちの特定のニーズによれば、この方法は、問題が解決できない場合の妥協的な解決策としてのみ見なされます。
1. 私たちの考え方
問題についてどのように考えるべきでしょうか？
インターネット上の情報を参考にすると、次の 2 つの選択肢があるのではないかと大胆に想像できます。
- ファイル パスを取得するためにレジストリ パラメーター「1%」に依存していますが、このパラメーターは 1 つのファイル パスのみを渡すことができることがわかりました。では、同様のパラメーターがあるのでしょうか、または何らかのパラメーター操作を通じて、複数のファイル パスを取得できるのでしょうか?
- 情報を調べてみると、一部の偉い人が cmd コマンドラインでパラメータを渡すと、黒いウィンドウの表示を制御することができ、2 番目のウィンドウが表示されるときは表示されず、取得したパラメータが次のウィンドウに渡されます。最初のウィンドウから学ぶことができますか? このようにして、複数のファイル パスが最初のアプリケーション ウィンドウに収集されます。
2、問題を解決する
1. プランを選択する
古いルールとして、効果を達成するためにコードから学びたい場合は、私の bb が問題を解決する方法を見る必要はありません。最後まで直接スキップしてください。
当初、私は問題を解決するためにレジストリ パラメータを使用する傾向があったため、レジストリ関連の知識をたくさん勉強しましたが、現在のレベルではこの方法は機能しないことがわかりました。
したがって、最終的に 2 番目のオプションが選択されていることが決定され、後続のファイルによって開かれたアプリケーション ウィンドウはパラメーターを最初のウィンドウに渡します。
2. Electron には監視する複数のウィンドウがあることが判明
cmd マルチウィンドウでパラメーターを渡すというアイデアを借りて、electron マルチウィンドウ パラメーターの受け渡しを実現したい場合は、electron が新しいウィンドウを開いたときにパラメーターを取得し、最初に開いたアクティブ ウィンドウに渡す必要があります。
この解決策は非常に面倒で、グローバルパラメータ、プロセス通信（電子のプロセス概念ではなくWindowsプロセス）、パラメータ管理…考えるのが頭でっかちなので、始めたものの途中で諦めてしまいました。なぜならこのとき、この光景に見覚えがあることに気づいたからです。
そうです、最初にこのプロジェクトを書いたとき、複数のウィンドウが開かれないようにするために、electron の main.js にモニターを書きました。
app.on('second-instance', (event, commandLine, workingDirectory, additionalData) => {
// 有人试图运行第二个实例，我们应该关注我们的窗口
if (win) {
if (win.isMinimized()) win.restore()
win.focus()
}
})
この監視は、Windows レベルでプロセス管理を実行します (理解できない場合は、この文をスキップして、後で専門用語を読んでください)。
端的に言えば、この監視とは、2 番目のウィンドウを開いたときに Electron がそれを監視し、その中で判断し、Win ウィンドウが存在する場合はウィンドウを開かずに、既存のウィンドウを表示することを意味します。
これは、公式の Electron が提供するマルチウィンドウ監視ではありませんか? 公式のものを使用して、手間を省き、少なくともバグが多すぎることはありません。
この監視コードを削除すると、複数のファイルを選択した後にアプリケーションを開くと、複数のファイルを選択した後に複数のアプリケーションが開き、各アプリケーションが対応するファイルのアドレスを出力できることがわかります。つまり、アプリケーションはそれぞれのファイルのアドレスを取得します。
したがって、ここでしなければならないのは、次に開いたアプリケーションのファイル アドレスを最初のアプリケーション ウィンドウに渡す方法です。
3. 使用できる公式パラメータを見つける
なぜ大企業が支持するフレームワークを使用する必要があるのでしょうか? それは彼らが単なるプロジェクトではなく、製品を作っていると信じているからです。製品の場合、より多くのシナリオを考慮する必要があるため、公式がマルチウィンドウの管理を考えている以上、マルチウィンドウのパラメーター間の通信を無視することはないと思います。
案の定、確認したところ、渡された追加データはその後ウィンドウを開くためのパラメータであることがわかりました。コードは以下のように表示されます。
app.on('second-instance', (event, commandLine, workingDirectory, additionalData) => {
// 输出从第二个实例中接收到的数据,传入到fileController中
const url=argvController.getConfigByArgv('getUrl',additionalData.argv)
fileController.addFileUrl(url)
// 有人试图运行第二个实例，我们应该关注我们的窗口
if (win) {
if (win.isMinimized()) win.restore()
win.focus()
}
})
getConfigByArgv メソッドと fileController.addFileUrl については気にしないでください。これは、取得したファイル アドレスを操作する方法をカプセル化したメソッドです。
この部分の実際のコア コードはパラメータ:AdditionalData.argv です。後ろのウィンドウには argv パラメータがあります。そして、この一連の単一ファイルのアップロードの前の記事を通じて、ファイルのアドレスが argv に保存されていることがわかります。
すべてのファイル アドレスを取得したら、複数選択したファイルを自由に操作できます。
4. サンプルコード
- main.js で複数のファイルを開いているときのウィンドウ パラメーターを監視する
app.on('second-instance', (event, commandLine, workingDirectory, additionalData) => {
// 输出从第二个实例中接收到的数据,传入到fileController中
const url=argvController.getConfigByArgv('getUrl',additionalData.argv)
fileController.addFileUrl(url)
// 有人试图运行第二个实例，我们应该关注我们的窗口
if (win) {
if (win.isMinimized()) win.restore()
win.focus()
}
})
- getConfigByArgv は argv パラメータを解析するために使用するメソッドです。ここではスケーラビリティを考慮した戦略モードを作成しました。受け入れにくい場合でも、精神的な負担を負う必要はありません。argv からファイル アドレスを取得するだけで済みます。好きなように。
const argvTypes={
//为获取参数设计策略模式
getUrl(argv){
//获取地址
for (let i = 0; i < argv.length; i++) {
if (argv[i].includes('upload-tome') ) {
return argv[i + 1]
break
}else if(argv[i].includes('upload-toother')){
return argv[i + 1]
break
}else if(argv[i].includes('upload-backgorundget')){
return argv[i + 1]
break
}
}
},
getTomeType(argv){
//获取tome后面附带的参数值
for (let i = 0; i < argv.length; i++) {
if (argv[i].includes('upload-tome') ) {
return argv[i]
break
}
}
},
getCmdType(argv){
//获取tome、toother两个参数
let flag='get'
// console.log(config)
for (let i = 0; i < argv.length; i++) {
// debugger
if (argv[i].includes('upload-tome') ) {
flag=config.toTypeList.tome
break
}else if(argv[i].includes('upload-toother')){
flag=config.toTypeList.toother
// flag='tome'
}else if(argv[i].includes('upload-get')){
flag=config.toTypeList.get
}else if(argv[i].includes('upload-backgorundget')){
flag=config.toTypeList.get
}
}
return flag
}
}
const getConfigByArgv=(type,argv)=>{
return argvTypes[type](argv)
}
- addFileUrl メソッドは比較的単純で、ファイルの配列を取得するだけです。
let fileUrlArr = []
//省略无关代码...
const addFileUrl = (v) => {
fileUrlArr.push(v)
}
- 最終的なファイルを結合します。
const progressArgv = progress.argv
const cwd = progress.cwd()
let url = argvController.getConfigByArgv('getUrl',progressArgv) //获取第一实例的文件地址
let files = []
files.push(url, ...fileUrlArr)
上記のコードに精通しているはずです。これは、このシリーズの前の記事でファイル アドレスを取得するためのコードです。これで、2 番目のウィンドウの後にファイル配列 fileUrlArr を取得したので、それをファイルとマージするだけで済みます。新しい配列ファイルを形成する最初のウィンドウのアドレスを使用すると、最終結果を取得できます。
記事の冒頭の画像と組み合わせると、アップロードをクリックすると、アップロードされたファイルの詳細がファイルリストに表示されます。
要約する
これまでのところ、ファイルアップロードの基本的な機能は完成していますが、通常に開くとアプリケーションが画面の中央に表示され、右から開くとアプリケーションが表示されるなど、今後いくつかのスタイルの最適化が行われる可能性があります。ファイルをクリックすると、アプリケーションの右下隅にいくつかの特別なスタイルが表示されます。
製品の要求を最もシンプルな方法で満たすことは、技術者が持つべき追求です。企業内でコードの修正を繰り返したり、問題を繰り返し解決したりすることに一日中費やすような人にはならないでください。短期的には、プロジェクトはあなたと切り離せないものですが、長期的には 35 歳までしか実行できません。
これが見える人は電子に興味のある学生だと思います 現在、csdn new star projectのメンター活動に参加しています 活動内容は詳しくは知りませんし、あまり興味はありませんが、興味はあります学生は無料でサインアップでき、集中的なディスカッションや説明が行われます。リンクはプライベート メッセージよりも効率的である必要があります。
アクティビティのアドレスをクリックしてください: https://bbs.csdn.net/topics/615149275