濡備綍鍦ㄤ娇鐢╒ue鐨勬儏鍐典笅瀹炵幇Electron鎵撳紑鏂囦欢淇濆瓨瀵硅瘽妗嗭紵

Posted 2020-11-23

鏍囩锛?a href='http://www.mamicode.com/so/1/hand' title='hand'>hand   created   method   info   path   and   ges   鐐瑰嚮浜嬩欢   鏂规硶   

涓€銆侀棶棰樺満鏅?/h1>

鏈€杩戞槸鍦ㄤ娇鐢‥lectron+Vue鏋勫缓涓€涓熀浜巑odbus rtu鍗忚鐨勪笂浣嶆満搴旂敤锛屼娇鐢╥pcMain鍜宨pcRenderer瀹炵幇鐐瑰嚮Vue缁勪欢鍚庢墦寮€瀵硅瘽妗嗭紝鑾峰彇鍒版枃浠惰矾寰勫苟鍐欏叆鏁版嵁锛屽畬鎴愬悗閫氱煡銆備絾鏄嚭鐜癷pcRenderer.on() 璋冪敤澶氭鐨勯敊璇儏鍐点€?br/>閭ｄ箞锛屼娇鐢‥lectron+Vue瀹炵幇鏂囦欢淇濆瓨鐨勬纭Э鍔挎槸浠€涔堝憿锛?/p>

浜屻€佸叿浣撳疄鐜?/h1>

鍦╡lectron鐨剆rc/main/index.js涓畾涔塈PC閫氶亾

// 1. 寮曞叆瀵硅瘽妗嗕笌IPC閫氫俊妯″潡
const ipc = require(鈥榚lectron鈥?.ipcMain
const dialog = require(鈥榚lectron鈥?.dialog

// 2.瀹氫箟IPC涓昏繘绋嬪搷搴斿嚱鏁?ipc.on(鈥榦pen-save-chart-dialog鈥? function (event) {
    dialog.showSaveDialog({
        title: 鈥樹繚瀛樺浘鍍忔枃浠垛€?
        defaultPath: 鈥?鈥?
        filters: [
            {
                name: 鈥業mages鈥?
                extensions: [鈥榩ng鈥? 鈥榡pg鈥榏
            }
        ]
    }, function (filename) {
      // 閫氱煡娓叉煋杩涚▼锛屽皢鑾峰彇鍒扮殑鏂囦欢璺緞浼犵粰Vue缁勪欢涓搷搴斿嚱鏁?      event.sender.send(鈥榮ave-finished鈥? filename);
    })
})

鍦╒ue鐨勭粍浠朵腑瀹氫箟瑙﹀彂鍑芥暟鍜屽搷搴斿嚱鏁帮紝杩欓噷鏄疢ainPage.vue

锛?锛夐鍏堜负Button缁戝畾Click鐐瑰嚮浜嬩欢锛?/p>

<Button type="info" style="width: 100%" @click="handleSaveChart">淇濆瓨</Button>

锛?锛夋帴涓嬫潵鍦╯cript浠ｇ爜鍧楃殑methods涓畾涔塰andleSaveChart鏂规硶

export default {
    methods: {
        handleSaveChart: function () {
                // 鍚慖PC閫氶亾鍙戦€佷俊鍙凤紝姝ゆ椂涓荤嚎绋嬫敹鍒颁俊鍙风珛鍗虫墽琛岀浉瀵瑰簲鐨勫搷搴斿嚱鏁?                const ipc = require(鈥榚lectron鈥?.ipcRenderer;
                ipc.send(鈥榦pen-save-chart-dialog鈥?;
          }
        }
}

锛?锛夊湪Vue缁勪欢鐨刢reated鏂规硶涓畾涔変富绾跨▼鍚戞覆鏌撶嚎绋嬪彂閫佷俊鍙风殑鍝嶅簲鍑芥暟

created() {
     const ipc = require(鈥榚lectron鈥?.ipcRenderer;
     ipc.on(鈥榮ave-finished鈥? function (event, filename) {
         // 褰揻ilename绛変簬null鐨勬椂鍊欒〃绀虹敤鎴风偣鍑讳簡鍙栨秷鎸夐挳
         // 褰撶敤鎴风偣鍑讳繚瀛樻寜閽殑鏃跺€檉ilename鐨勫€兼槸瀵瑰簲鏂囦欢鐨勭粷瀵硅矾寰?         console.log(filename)
      })
}