一塊兒擼【微信小程序雲開發✈️ 】數據庫批量導入 🔥🔥🔥 @ electron-vue

爲實現"微信小程序雲開發"數據庫文件批量導入(官方工具僅支持單文件導入)，學習electron，過年趁機開心一波，使用electron-vue實現微信小程序雲開發數據庫文件(夾)批量導入工具。

項目展現

需求分析

爲了畢設項目，經過python爬下了n多的單詞JSON數據(預計: 16w詞源，分佈於約81個文件內)，可是須要導入到微信小程序雲開發的類MongoDB數據庫。官方開發工具僅支持單文件上傳導入，一個文件一個文件的導入，那豈不「DIE」。

需導入的文件目錄以下：

項目截圖

先使用sketch大概畫了一下設計圖，設計圖源文件

• 登陸頁面

• 導入頁面

• 最終導入結果

項目開源

項目主要依賴於微信小程序雲開發http接口，微信文檔

☁ 基於electron-vue實現的微信小程序雲開發數據庫文件批量導入。 ✨✨✨✨

一塊兒擼

項目初始化/運行

初始化過程就是一路選擇，而後install就能夠，推薦先食用electron-vue文檔。

1. 項目使用electron-vue開發，官方初始化方案以下(會遇到問題, 看下解析):

# Install vue-cli and scaffold boilerplate
npm install -g vue-cli
vue init simulatedgreg/electron-vue my-project

# Install dependencies and run your app
cd my-project
yarn # or npm install
yarn run dev # or npm run dev
複製代碼

• 問題一: vue init simulatedgreg/electron-vue my-project卡在模板下載的解決方案

因爲官方模板使用github源做爲模板，致使初始化very的慢，因此先使用國內源克隆，而後經過本地目錄執行vue init

cd ~/Code
git clone https://gitee.com/mirrors/electron-vue.git #國內鏡像
vue init ~/Code/electron-vue project-name
複製代碼

• 問題二: 項目初始化完成後，npm install安裝依賴過程當中electron下載失敗

使用官方的electron源下載安裝會一直失敗，梯zi以後也不行。因此仍是經過國內源來下載，分electron7以上版本和如下版本的方案，設置好源以後再次install便可。

# 1. v7以上
npm config set ELECTRON_MIRROR=https://cdn.npm.taobao.org/dist/electron/

npm config set electron_custom_dir=7.1.9 # 修改成須要安裝的版本

# 2. v7如下
npm config set ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/
複製代碼

• 問題三: npm run dev以後報錯error: Webpack ReferenceError: process is not defined

// 修改下方兩個webpack配置文件中的HtmlWebpackPlugin配置

// .electron-vue/webpack.web.config.js
// .electron-vue/webpack.renderer.config.js
new HtmlWebpackPlugin({
  filename: 'index.html',
  template: path.resolve(__dirname, '../src/index.ejs'),
  templateParameters(compilation, assets, options) {
    return {
      compilation: compilation,
      webpack: compilation.getStats().toJson(),
      webpackConfig: compilation.options,
      htmlWebpackPlugin: {
        files: assets,
        options: options
      },
      process,
    };
  },
  minify: {
    collapseWhitespace: true,
    removeAttributeQuotes: true,
    removeComments: true
  },
  nodeModules: process.env.NODE_ENV !== 'production' ? path.resolve(__dirname, '../node_modules') : false
}),
複製代碼

開發階段

1. 經過"千心和萬苦"項目終於跑起來了。先簡述一下這個項目以後對electron的理解：

• electron = 主進程(瀏覽器容器) + 渲染進程("普通"前端開發)
• 可經過api自定義的瀏覽器，不只限於樣式/規則/菜單等
• 能夠調用nodejs或更多api的瀏覽器，渲染進程中也能夠調用nodejs函數

把本身的心態調整爲：正在開發瀏覽器端應用，只是這個瀏覽器容器「變小了」了，沒有標籤欄了。

2. 瀏覽器證實：跨域

electron應用也存在跨域問題，一般前端中能夠找服務端經過cors解決。但跨域問題本質是瀏覽器對不一樣源請求的一些限制。因此electron中最方便的方案，則是關閉瀏覽器的這一種限制。

// 主進程中，實例化窗口時設置BrowserWindow以下，就能夠關閉限制
  mainWindow = new BrowserWindow({
    // ...
    webPreferences: {
      webSecurity: false
    }
  })
複製代碼

3. renderer中渲染進程的ui開發

這一個只要你們心態對了，那就是瀏覽器應用開發，前端部分不深刻討論。

├── App.vue
├── assets
|  ├── Github.png
|  ├── choise.png
|  ├── choise2.png
|  ├── close.png
|  ├── delete.png
|  ├── login-active.png
|  ├── login-disable.png
|  ├── logo.png
|  ├── no-choise.png
|  └── no-choise2.png
├── components
|  ├── DatabaseImport.vue
|  └── Login.vue
├── main.js
├── router
|  └── index.js
├── store
|  ├── index.js
|  └── modules
└── utils
   ├── api.js
   ├── disableDrag.js
   └── tool.js
複製代碼

4. 隱藏默認窗口後，窗口如何拖動

在主進程中設置BrowserWindow爲frame, 隱藏默認窗口。

mainWindow = new BrowserWindow({
    height: 316,
    useContentSize: true,
    width: 248,
    maximizable: false,
    resizable: false,
    webPreferences: {
      webSecurity: false
    },
    frame: false, // 設置此屬性爲false
    icon: `${__static}/logo.png`,
    center: true
  })
複製代碼

如此一下，窗口就不能拖動了。解決方案爲在渲染進程，全局app設置css屬性

/* app.vue style */
  body,
  html {
    -webkit-app-region: drag;
  }
複製代碼

5. 窗口「複製剪切粘貼全選」等快捷鍵失效

在開發環境不會禁用默認菜單，因此快捷鍵不會失效，可是打包爲production以後，打開的窗口就出現了問題，解決方案以下

import { globalShortcut } from 'electron'

app.on('browser-window-focus', () => {
  if (!mainWindow) return

  if (process.platform === 'darwin') {
    let contents = mainWindow.webContents

    globalShortcut.register('CommandOrControl+C', () => {
      contents.copy()
    })

    globalShortcut.register('CommandOrControl+V', () => {
      contents.paste()
    })

    globalShortcut.register('CommandOrControl+X', () => {
      contents.cut()
    })

    globalShortcut.register('CommandOrControl+A', () => {
      contents.selectAll()
    })
  }
})
// 注意globalShortcut註冊以後會覆蓋其餘的快捷鍵，因此blur的時候取消快捷鍵
app.on('browser-window-blur', () => {
  globalShortcut.unregisterAll()
})

複製代碼

打包階段

1. 我的以爲electron應用的優缺點

優勢

• 開發簡單(任何前端攻城獅不看官方文檔均可以簡單上手)
• 跨平臺 [哈哈哈，若是易語言能夠這麼🐂🍺的跨平臺，那我同樣的"小學生"就無敵了 ]
• 社區活躍，坑比較好跳

缺點

• 文件大
• 文件大
• 文件大
• ...

2. electron-packager 和 electron-builder

姑且理解爲electron-packager打包的的可執行文件(打開即用， 文件大), electron-builder打包爲安裝包(壓縮包， 文件小)

3. electron-vue經過electron-builder打包報錯(忘記錯誤了...)

升級electron-builder爲最新版本便可。

鼠年大吉

祝各位攻城獅們，今年有"鼠"不盡的快樂!"鼠"不盡的收穫!"鼠"不盡的鈔票!"鼠"不盡的笑容!"鼠"不盡的幸福!" 😈辟邪「肺炎」! 🐀🐭