把你的 web 网页改造为PC App就这么容易
把你的 web 网页改造为 Electron App
基于 Electron, React, React-router, Typescript 一款桌面豆瓣电影应用源代码： github.com/Yangfan2016…
web 专案源代码：github.com/Yangfan2016…
作者：github.com/Yangfan2016
前言
618 在慕课网上淘了一个 1 元的 electron 课程，一个基础的入门课，还不错，就想着把前些日子写的 React+Typescript 实现一个简单的豆瓣电影应用 改造下，这次也是参（cao）考（xi）腾讯视讯（mac 端 app）的 UI（腾讯视讯请给我打钱，）
先来看下最终效果
准备工作
首先你要有以下的基础知识
web 的基础知识（html，css，JavaScript）nodejs 的 http 部分的知识（搭建简单的 web 服务器），electron 的基础知识（搭建简单的electron demo、主程序和渲染程序的通讯）专案目录
先来看下最终的目录结构
可以使用 treer 来生成目录结构
$ npx treer -i "/^(node_modules|dist|build|notes|.git|.DS_Store)$/" >tree.txt
复制程式码
douban-movie-electron
├─.yarnrc # yarn 的配置档案
├─app.config.js # app 的全域性配置
├─main.js # app 的主程序
├─package.json
├─src # 原有 web 专案的源代码（这里忽略展开）
| |......
├─server # api 代理服务器
| ├─app.js
| ├─package.json
| └yarn.lock
├─scripts
| ├─build.js
| ├─start.js
| └test.js
├─public
| ├─favicon.ico
| ├─index.html # 主视窗
| ├─manifest.json
| ├─play.html # 播放视窗
| └renderer.js # 播放视窗的渲染程序
├─config
| ├─env.js
| ├─paths.js
| ├─webpack.config.js
| ├─webpackDevServer.config.js
| ├─jest
| | ├─cssTransform.js
| | └fileTransform.js
├─assets # app 的logo
| ├─icon.png
| └logo.png
复制程式码
开发注意
安装需要安装如下包依赖
"devDependencies": {
"electron": "4.1.3", # electron 本体
"electron-builder": "^20.40.2", # electron 打包工具
"nodemon": "^1.18.10" # 监听档案，重启 node 应用
}
electron 包下载较慢，我们需要配置下，在专案里新增 .npmrc 或 .yarnrc 档案（如果你的专案没有使用 sass 的话，不用设定 node-sass 的映象地址）
.npmrc
registry=https://registry.npm.taobao.org/
sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
electron_mirror=https://npm.taobao.org/mirrors/electron/
.yarnrc
registry "https://registry.npm.taobao.org/"
sass_binary_site "https://npm.taobao.org/mirrors/node-sass/"
electron_mirror "https://npm.taobao.org/mirrors/electron/"
专案改造
首先写一个简单的 electron-demo
const { app, BrowserWindow } = require('electron')
const path = require("path");
app.on('ready', () => {
// 新建一个视窗
let mainWindow = new BrowserWindow({
width: 1160,
height: 720,
});
// 原有的专案开发环境下的 devServer 的埠是 3000 ，我们这里以 url 形式把原有专案载入进来
mainWindow.loadURL('http://localhost:3000');
});
然后我们配置 package.json 指令码（nodemon 会监听你的档案变化，重新启动 electron，不用你每次启动）
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js",
"server": "node server/controllers/index.js",
"electron-dev": "nodemon --watch ./main.js --exec 'NODE_ENV=development electron .'"
}
执行如下命令# 并行执行
$ yarn start & yarn electron-dev
由于是app，和web不同，所以我们要优化下样式，画个原型图先推荐这个线上原型图工具 whimsical.com/
然后我们实现下细节，就可以看到如下效果了 
把之前的播放器弹出框改造同样参照腾讯视讯，播放视讯时，会单独弹出一个新视窗进行播放，在 electorn 里，就是再新建一个视窗
new BrowserWindow({
width: 1100,
height: 500,
titleBarStyle: "hiddenInset",
});
现在就有一个问题，就是点选主视窗的某个电影开启这个播放视窗，那么资讯（例如 视讯的 src 地址）该如何传递内，我们从 electron 的文件里可以找到，ipcMain 和 ipcRenderer 这两个api，用它们进行主程序和渲染程序之间的通讯
专案生产环境配置
生产环境由于 electron 使用的是 file 协议，所以我们最后执行的就不能以 url 的形式载入了，改造如下
const { app, BrowserWindow } = require('electron')
const path = require("path");
const isProd = process.env.NODE_ENV !== "development";
app.on('ready', () => {
// 新建一个视窗
let mainWindow = new BrowserWindow({
width: 1160,
height: 720,
});
// 生产环境
if (isProd) {
// cra 预设的打包目录是 build，我们生产环境需要这么引入
mainWindow.loadFile(path.join(__dirname, "./build/index.html"));
} else { // 开发环境
mainWindow.loadURL('http://localhost:3000');
}
});
nodejs api 服务改造 我们需要把 nodejs 的启动档案引入进来，这样在生产环境下就不需要单独启动了首先我们把 nodejs 的启动 app 暴露出来
const Koa = require("koa");
const proxy = require("koa-server-http-proxy");
const app = new Koa();
// proxy
app.use(proxy('/api', {
target: 'http://api.douban.com/',
changeOrigin: true,
pathRewrite: {
'^/api': '/v2', // 重写路径
},
}));
app.use(proxy('/bing', {
target: 'https://www.bing.com/',
changeOrigin: true,
pathRewrite: {
'^/bing': '/', // 重写路径
},
}));
- app.listen(server.port, () => {
- console.log(server.url);
- });
+ module.exports=app;
然后我们在 main.js 中引入const apiServer = require("./server/app");
// 生产环境我们直接启动 我们的 nodejs 服务
if (isProd) {
// start api server
apiServer.listen(server.port, () => {
console.log(server.url);
});
} else { // 开发环境 我们直接启动 webpackDevServer
// start webpack-devserver
require("./scripts/start");
}
打包
使用 electron-builder 打包
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js",
"server": "node server/controllers/index.js",
"electron-dev": "nodemon --watch ./main.js --exec 'NODE_ENV=development electron .'",
"dist": "rm -rf ./dist && electron-builder"
},
// electron-builder 的配置
"build": {
"appId": "douban-movie-electron",
// 打包的档案目录，这样可以减少安装包大小
"files": [
"package.json",
"node_modules/**/*",
"build/**/*",
"assets",
"server",
"main.js",
"app.config.js"
],
// mac 端的打包配置下，详细配置 https://www.electron.build/configuration/mac
"mac": {
"category": "public.app-category.video", mac 应用程序分类 https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/LaunchServicesKeys.html#//apple_ref/doc/uid/TP40009250-SW8
"target": [
"dmg"
],
"icon": "./assets/icon.png"
}
},
执行命令
$ yarn dist
安装
打包的档案会在 dist 资料夹下，我们找到 dmg 档案，进行安装
安装完成，进行预览，发现 ，哎，首页的轮播图载入失败了 （404），我仔检视路径，没有任何问题，但是发现 它们的路径有一个特点就是都是 file:///static 开头的（本地图片以相对路径引用的，其他 js css 档案也是以相对路径引入的，只有图片404，奇怪 ）
几经周折，终于找到了问题，React-router 我用的是 browserRouter ，就是基于浏览器 history api的，改成 hashRouter ，就好了（目前原因未知 ，知道原因的小伙伴请教下）
时间有限，其他平台的打包方式及配置，请移步到 electron-builder 官网
