2.4 电脑/手机客户端开发简介

周星星9527

发布于 2018-08-07 08:10:48

2.3K0

发布于 2018-08-07 08:10:48

文章被收录于专栏：javascript趣味编程

想开发手机app？不会开发PC客户端？不存在！会写网页几步就能实现将网页转化为PC或手机客户端。

我们可以借助node.js的开源库electron开发桌面客户端。node.js是什么？就是类似于浏览器的一个javascript运行环境，可以脱离浏览器运行js程序。

打开网页就可以直接运行H5程序，为什么要开发桌面程序呢？因为桌面程序能够访问硬件，例如我们需要读取电脑串口数据并绘图，这时H5网页程序就无能为力了。

第一步就是安装node.js运行时了，到官方网站https://nodejs.org找到对应操作系统的版本并安装，打开界面如下：

大部分操作基本都是命令行，接下来的步骤（需要在命令行输入命令并执行）如下：

全局安装electron（这个工具用于开发桌面程序，支持Win/macOS/*inx主流操作系统）：

npm install --g electron-prebuilt

在某空文件夹内新建package.json文件（配置程序）：

{
  "name": "appDemo",
  "version": "0.1.0",
  "main": "./main.js",
  "scripts": {
    "start": "electron ."
  },}

当前目录安装electron并添加依赖项（需要cd到当前目录）：

 npm install --save-dev electron-prebuilt

执行后，package.json文件变成（里面的main.js文件就是程序主文件）：

{
  "name": "appDemo",
  "version": "0.1.0",
  "main": "./main.js",
  "scripts": {
    "start": "electron ."
  },
  "devDependencies": {
    "electron-prebuilt": "^1.4.13"
  }
}

编写逻辑代码main.js：

const electron = require('electron');const app = electron.app;const url = require('url');const path = require('path');mainWindow=null;function createWindow() {
  mainWindow = new electron.BrowserWindow({
    width: 800,
    height: 600
  });
 
  mainWindow.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  }));

  mainWindow.on('closed', () => {
    mainWindow = null;
  });}app.on('ready', createWindow);