In order to realize the batch import of “wechat small program cloud development” database file (the official tool only supports single file import), learn electron, take the opportunity to have a happy New Year, use electron Vue to realize the batch import tool of wechat small program cloud development database file (folder).

Projects show

Demand analysis

In order to complete my graduation project, I crawled down n more word JSON data (estimated: 16W etymology, distributed in about 81 files) through Python, but it needs to be imported into the MongoDB database developed by wechat small program cloud. Official development tools only support single file upload and import, a file a file import, that would not “DIE”.

You need to import files to the following directories:

Project screenshots

Firstly, I drew the design drawing with Sketch and the source file of the design drawing

  • The login page

  • The import page

  • Final import result

The open source project

The project mainly relies on wechat small program cloud to develop HTTP interface and wechat documents

The weixin applet cloud development database file is imported in batches based on the electronic-Vue implementation. ✨ ✨ ✨ ✨

With the lu

Project initialization/run

The initialization process is a selection, then install can be, recommended to eat the electron-vue document first.

  1. Projects usingelectron-vueDevelopment, the official initialization scheme is as follows (encounter problems, see parse):
# 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
Copy the code
  • Problem a:vue init simulatedgreg/electron-vue my-projectStuck in the template download solution

Because the official template uses the Github source as the template, the initialization of very is slow. Therefore, use the domestic source clone first, and then execute vue init through the local directory

cd ~/Code
git clone https://gitee.com/mirrors/electron-vue.git # Domestic mirror
vue init ~/Code/electron-vue project-name
Copy the code
  • Problem 2: After the project is initialized,npm installInstall dependencieselectronDownload failed

Downloading and installing using the official electron source will always fail, even after zi. So still through the domestic source to download, divides electron7 above version and the following version scheme, after setting up the source again install can.

# 1. Above V7
npm config set ELECTRON_MIRROR=https://cdn.npm.taobao.org/dist/electron/

npm config setElectron_custom_dir = 7.1.9# Change to the version that needs to be installed

# 2. Below V7
npm config set ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/
Copy the code
  • Question 3:npm run devAfter an errorerror: Webpack ReferenceError: process is not defined
// Modify the HtmlWebpackPlugin configuration in the two WebPack configuration files below

// .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
}),
Copy the code

The development phase

  1. Through the “Thousands of hearts and Thousands of hardships” project, we are finally running. After a brief introduction to the project yeselectronThe understanding of:
  • Electron = Main process (browser container) + Rendering process (” normal “front-end development)
  • Customizable browser via API, not limited to styles/rules/menus, etc
  • Nodejs or more apis can be called from the browser, and nodeJS functions can be called from within the rendering process

Change your mindset to: I’m working on a browser-side app, but the browser container is “smaller” and there’s no TAB bar.

  1. Browser proof: cross-domain

The electron application also has cross-domain problems, which can be solved by cORS in the front-end server. But the cross-domain problem is essentially the browser’s restrictions on requests from different sources. So the most convenient solution in electron is to turn off this limitation of the browser.

// In the main process, set BrowserWindow as follows when instantiating the window to turn off restrictions
  mainWindow = new BrowserWindow({
    // ...
    webPreferences: {
      webSecurity: false}})Copy the code
  1. UI development of the render process in the renderer

This one, as long as you’re in the right frame of mind, is browser application development. I won’t go into the front end.

├ ─ ─ App. Vue ├ ─ ─ assets | ├ ─ ─ making. PNG | ├ ─ ─ choise. PNG | ├ ─ ─ choise2. PNG | ├ ─ ─ close. The PNG | ├ ─ ─ the delete. PNG | ├ ─ ─ Login - active. PNG | ├ ─ ─ the login - disable. PNG | ├ ─ ─ logo. The PNG | ├ ─ ─ no - choise. PNG | └ ─ ─ no - choise2. PNG ├ ─ ─ components | ├ ─ ─ DatabaseImport. Vue | └ ─ ─ the Login. Vue ├ ─ ─ the main, js ├ ─ ─ the router | └ ─ ─ index. The js ├ ─ ─ store | ├ ─ ─ index. The js | └ ─ ─ modules └ ─ ─ Exercises ├── disableDrag.js ├─ tool.jsCopy the code
  1. How to drag a window after the default window is hidden

Set BrowserWindow to Frame in the main process and hide the default window.

mainWindow = new BrowserWindow({
    height: 316.useContentSize: true.width: 248.maximizable: false.resizable: false.webPreferences: {
      webSecurity: false
    },
    frame: false.// Set this property to false
    icon: `${__static}/logo.png`.center: true
  })
Copy the code

Now, the window can’t be dragged. The solution is to set CSS properties for the global app during the rendering process

/* app.vue style */
  body.html {
    -webkit-app-region: drag;
  }
Copy the code
  1. Shortcut keys such as Copy, cut, paste, and Select All are invalid

The default menu is not disabled in the development environment, so the shortcut keys do not fail, but when packaged as Production, the window that opens has a problem. The solution is as follows

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()
    })
  }
})
// Note that globalShortcut registration overwrites all other shortcuts, so blur cancels the shortcut
app.on('browser-window-blur', () => {
  globalShortcut.unregisterAll()
})

Copy the code

Packaging phase

  1. Personal thinkelectronAdvantages and disadvantages of application

advantages

  • Easy to develop (any front-end siege lion without reading the official document can be simple to use)
  • Cross-platform [ha ha ha, ifEasy languageCan so 🐂🍺 cross-platform, that I the same “pupil” is invincible]
  • The community is active, the pit is easy to jump

disadvantages

  • File size
  • File size
  • File size
  • .
  1. electron-packager 和 electron-builder

The electron- Builder package is an installation package (compressed package, small file).

  1. By electron – vueelectron-builderPackage error (forgot error…)

Upgrade the electron- Builder to the latest version.

Good luck in the year of the rat

I wish you, the siege lions, have a “rat” endless happiness this year!” Rat “endless harvest!” Rat “endless money!” The rat “endless smile!” Rat “endless happiness!” 😈 exorcise evil “pneumonia”! 🐀 🐭