Skip to content

Commit

Permalink
添加electron支持
Browse files Browse the repository at this point in the history
  • Loading branch information
aiplat committed May 19, 2021
1 parent 9cbb316 commit cb0f501
Show file tree
Hide file tree
Showing 31 changed files with 401 additions and 182 deletions.
21 changes: 21 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

- vue-cli4+vuex+cmui+html5+css3+typescript
- 一次开发,同时打包成Android版app、iOS版app、H5版、微信小程序版、支付宝小程序版、百度小程序版、头条小程序7个平台,界面统一,功能一致。
- 新引入electron用于支持打包PC安装包
- cmui仓库为https://github.com/aiplat/cmui.git
- 代码示例为 https://aiplat.com 的版本 http://uniapp.aiplat.com

Expand All @@ -17,6 +18,7 @@
- src
- assets ------静态css文件目录
- components ------公共组件目录
- electron ------electron目录, 用于支持打包PC安装包
- pages ------视图目录
- aiplat ------aiplat项目视图目录
- common ------公共页面目录
Expand Down Expand Up @@ -89,3 +91,22 @@
- 构建命令为npm run build --env=uat --type=jifenqi

---

# 关于electron运行、构建、打包

#### h5运行默认http://localhost:2016/#/
## 运行:首页运行h5版本,再运行electron
#### 单独git bash窗口1
- $ npm run dev:h5 --env=uat --type=aiplat
#### 单独git bash窗口2
- $ npm run dev:electron --env=uat --type=aiplat
- 此时h5运行时项目运行到electron环境

## 构建:首页构建h5版本,再构建electron,再打包(待添加完善)
#### 单独git bash窗口1
- $ npm run build:h5 --env=uat --type=aiplat
#### 单独git bash窗口2
- $ npm run build:electron --env=uat --type=aiplat
- 此时h5构建时项目运行到electron环境

#### 打包PC安装包(待添加完善)
59 changes: 30 additions & 29 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,34 +3,36 @@
"version": "2.0.0",
"private": true,
"scripts": {
"build": "ts-node build.config.ts && cross-env NODE_ENV=production UNI_PLATFORM=mp-weixin vue-cli-service uni-build",
"build:app-plus": "ts-node build.config.ts && cross-env NODE_ENV=production UNI_PLATFORM=app-plus vue-cli-service uni-build",
"build:custom": "ts-node build.config.ts && cross-env NODE_ENV=production uniapp-cli custom",
"build:h5": "ts-node build.config.ts && cross-env NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build",
"build:mp-360": "ts-node build.config.ts && cross-env NODE_ENV=production UNI_PLATFORM=mp-360 vue-cli-service uni-build",
"build:mp-alipay": "ts-node build.config.ts && cross-env NODE_ENV=production UNI_PLATFORM=mp-alipay vue-cli-service uni-build",
"build:mp-baidu": "ts-node build.config.ts && cross-env NODE_ENV=production UNI_PLATFORM=mp-baidu vue-cli-service uni-build",
"build:mp-qq": "ts-node build.config.ts && cross-env NODE_ENV=production UNI_PLATFORM=mp-qq vue-cli-service uni-build",
"build:mp-toutiao": "ts-node build.config.ts && cross-env NODE_ENV=production UNI_PLATFORM=mp-toutiao vue-cli-service uni-build",
"build:mp-weixin": "ts-node build.config.ts && cross-env NODE_ENV=production UNI_PLATFORM=mp-weixin vue-cli-service uni-build",
"build:quickapp-native": "ts-node build.config.ts && cross-env NODE_ENV=production UNI_PLATFORM=quickapp-native vue-cli-service uni-build",
"build:quickapp-webview": "ts-node build.config.ts && cross-env NODE_ENV=production UNI_PLATFORM=quickapp-webview vue-cli-service uni-build",
"build:quickapp-webview-huawei": "ts-node build.config.ts && cross-env NODE_ENV=production UNI_PLATFORM=quickapp-webview-huawei vue-cli-service uni-build",
"build:quickapp-webview-union": "ts-node build.config.ts && cross-env NODE_ENV=production UNI_PLATFORM=quickapp-webview-union vue-cli-service uni-build",
"dev": "ts-node build.config.ts && cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch",
"dev:app-plus": "ts-node build.config.ts && cross-env NODE_ENV=development UNI_PLATFORM=app-plus vue-cli-service uni-build --watch",
"dev:custom": "ts-node build.config.ts && cross-env NODE_ENV=development uniapp-cli custom",
"dev:h5": "ts-node build.config.ts && cross-env NODE_ENV=development UNI_PLATFORM=h5 vue-cli-service uni-serve",
"dev:mp-360": "ts-node build.config.ts && cross-env NODE_ENV=development UNI_PLATFORM=mp-360 vue-cli-service uni-build --watch",
"dev:mp-alipay": "ts-node build.config.ts && cross-env NODE_ENV=development UNI_PLATFORM=mp-alipay vue-cli-service uni-build --watch",
"dev:mp-baidu": "ts-node build.config.ts && cross-env NODE_ENV=development UNI_PLATFORM=mp-baidu vue-cli-service uni-build --watch",
"dev:mp-qq": "ts-node build.config.ts && cross-env NODE_ENV=development UNI_PLATFORM=mp-qq vue-cli-service uni-build --watch",
"dev:mp-toutiao": "ts-node build.config.ts && cross-env NODE_ENV=development UNI_PLATFORM=mp-toutiao vue-cli-service uni-build --watch",
"dev:mp-weixin": "ts-node build.config.ts && cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch",
"dev:quickapp-native": "ts-node build.config.ts && cross-env NODE_ENV=development UNI_PLATFORM=quickapp-native vue-cli-service uni-build --watch",
"dev:quickapp-webview": "ts-node build.config.ts && cross-env NODE_ENV=development UNI_PLATFORM=quickapp-webview vue-cli-service uni-build --watch",
"dev:quickapp-webview-huawei": "ts-node build.config.ts && cross-env NODE_ENV=development UNI_PLATFORM=quickapp-webview-huawei vue-cli-service uni-build --watch",
"dev:quickapp-webview-union": "ts-node build.config.ts && cross-env NODE_ENV=development UNI_PLATFORM=quickapp-webview-union vue-cli-service uni-build --watch",
"build": "ts-node src-builds/config.ts && cross-env NODE_ENV=production UNI_PLATFORM=mp-weixin vue-cli-service uni-build",
"build:app-plus": "ts-node src-builds/config.ts && cross-env NODE_ENV=production UNI_PLATFORM=app-plus vue-cli-service uni-build",
"build:custom": "ts-node src-builds/config.ts && cross-env NODE_ENV=production uniapp-cli custom",
"build:h5": "ts-node src-builds/config.ts && cross-env NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build",
"build:mp-360": "ts-node src-builds/config.ts && cross-env NODE_ENV=production UNI_PLATFORM=mp-360 vue-cli-service uni-build",
"build:mp-alipay": "ts-node src-builds/config.ts && cross-env NODE_ENV=production UNI_PLATFORM=mp-alipay vue-cli-service uni-build",
"build:mp-baidu": "ts-node src-builds/config.ts && cross-env NODE_ENV=production UNI_PLATFORM=mp-baidu vue-cli-service uni-build",
"build:mp-qq": "ts-node src-builds/config.ts && cross-env NODE_ENV=production UNI_PLATFORM=mp-qq vue-cli-service uni-build",
"build:mp-toutiao": "ts-node src-builds/config.ts && cross-env NODE_ENV=production UNI_PLATFORM=mp-toutiao vue-cli-service uni-build",
"build:mp-weixin": "ts-node src-builds/config.ts && cross-env NODE_ENV=production UNI_PLATFORM=mp-weixin vue-cli-service uni-build",
"build:quickapp-native": "ts-node src-builds/config.ts && cross-env NODE_ENV=production UNI_PLATFORM=quickapp-native vue-cli-service uni-build",
"build:quickapp-webview": "ts-node src-builds/config.ts && cross-env NODE_ENV=production UNI_PLATFORM=quickapp-webview vue-cli-service uni-build",
"build:quickapp-webview-huawei": "ts-node src-builds/config.ts && cross-env NODE_ENV=production UNI_PLATFORM=quickapp-webview-huawei vue-cli-service uni-build",
"build:quickapp-webview-union": "ts-node src-builds/config.ts && cross-env NODE_ENV=production UNI_PLATFORM=quickapp-webview-union vue-cli-service uni-build",
"build:electron": "ts-node src-builds/electron.ts && electron dist/build/h5/main.js",
"dev": "ts-node src-builds/config.ts && cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch",
"dev:app-plus": "ts-node src-builds/config.ts && cross-env NODE_ENV=development UNI_PLATFORM=app-plus vue-cli-service uni-build --watch",
"dev:custom": "ts-node src-builds/config.ts && cross-env NODE_ENV=development uniapp-cli custom",
"dev:h5": "ts-node src-builds/config.ts && cross-env NODE_ENV=development UNI_PLATFORM=h5 vue-cli-service uni-serve",
"dev:mp-360": "ts-node src-builds/config.ts && cross-env NODE_ENV=development UNI_PLATFORM=mp-360 vue-cli-service uni-build --watch",
"dev:mp-alipay": "ts-node src-builds/config.ts && cross-env NODE_ENV=development UNI_PLATFORM=mp-alipay vue-cli-service uni-build --watch",
"dev:mp-baidu": "ts-node src-builds/config.ts && cross-env NODE_ENV=development UNI_PLATFORM=mp-baidu vue-cli-service uni-build --watch",
"dev:mp-qq": "ts-node src-builds/config.ts && cross-env NODE_ENV=development UNI_PLATFORM=mp-qq vue-cli-service uni-build --watch",
"dev:mp-toutiao": "ts-node src-builds/config.ts && cross-env NODE_ENV=development UNI_PLATFORM=mp-toutiao vue-cli-service uni-build --watch",
"dev:mp-weixin": "ts-node src-builds/config.ts && cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch",
"dev:quickapp-native": "ts-node src-builds/config.ts && cross-env NODE_ENV=development UNI_PLATFORM=quickapp-native vue-cli-service uni-build --watch",
"dev:quickapp-webview": "ts-node src-builds/config.ts && cross-env NODE_ENV=development UNI_PLATFORM=quickapp-webview vue-cli-service uni-build --watch",
"dev:quickapp-webview-huawei": "ts-node src-builds/config.ts && cross-env NODE_ENV=development UNI_PLATFORM=quickapp-webview-huawei vue-cli-service uni-build --watch",
"dev:quickapp-webview-union": "ts-node src-builds/config.ts && cross-env NODE_ENV=development UNI_PLATFORM=quickapp-webview-union vue-cli-service uni-build --watch",
"dev:electron": "electron src/electron/main.js",
"info": "node node_modules/@dcloudio/vue-cli-plugin-uni/commands/info.js",
"serve:quickapp-native": "node node_modules/@dcloudio/uni-quickapp-native/bin/serve.js",
"test:android": "cross-env UNI_PLATFORM=app-plus UNI_OS_NAME=android jest -i",
Expand Down Expand Up @@ -94,7 +96,6 @@
"postcss-comment": "^2.0.0",
"qrcode": "^1.4.4",
"shelljs": "^0.8.3",
"terser-webpack-plugin": "^5.1.1",
"ts-node": "^8.10.2",
"typescript": "^3.0.0",
"vue-template-compiler": "^2.6.11"
Expand Down
49 changes: 49 additions & 0 deletions src-builds/config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
class configClass{
public utils = require('./utils');
constructor() {
}
async initStart() {
const utilsClass = new this.utils();
const utilsParams = utilsClass.getParams();

const runDir = utilsParams.buildType.includes('build') ? 'build' :'dev';
utilsParams.shell.rm('-rf', `${utilsParams.currentDir}/dist/${runDir}`);

const buildsDir = `${utilsParams.currentDir}/src/builds`;
utilsParams.shell.rm('-rf', buildsDir);
utilsParams.shell.mkdir('-p', buildsDir);

let appTypeName:any = utilsParams.buildType.split(':');
appTypeName = appTypeName && appTypeName.length > 1 ? appTypeName[1] : 'h5';
appTypeName = utilsClass.getAppTypeName(appTypeName);

console.log('');
const isDevTxt = utilsParams.buildType.includes('build') ? '构建' :'开发';
console.log(`------${appTypeName}平台-${utilsParams.envTxt[utilsParams.envType]}环境-${isDevTxt}-${utilsParams.type}------`);
console.log('');

await utilsClass.writeFile({
file:`${utilsParams.currentDir}/src/builds/envType.ts`,
content:`const envType:string = '${utilsParams.envType}';export default envType;`,
});

utilsClass.buildFile({
oldFile:`${utilsParams.currentDir}/src/projects/${utilsParams.type}/selftPages.json`,
newFile:`${utilsParams.currentDir}/src/pages.json`,
});
utilsClass.buildFile({
oldFile:`${utilsParams.currentDir}/src/projects/${utilsParams.type}/manifest/${utilsParams.envType}/manifest.json`,
newFile:`${utilsParams.currentDir}/src/manifest.json`,
});
utilsClass.buildFile({
oldFile:`${utilsParams.currentDir}/src/projects/${utilsParams.type}/selfConfig.ts`,
newFile:`${utilsParams.currentDir}/src/builds/selfConfig.ts`,
});
console.log('');
console.log('------Building now------');
console.log('');
}
}

const configClassTarget = new configClass();
configClassTarget.initStart();
32 changes: 32 additions & 0 deletions src-builds/electron.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
class electronClass{
public utils = require('./utils');
constructor() {
}
async initStart() {
const utilsClass = new this.utils();
const utilsParams = utilsClass.getParams();

utilsClass.buildFile({
oldFile:`${utilsParams.currentDir}/src/electron/main.js`,
newFile:`${utilsParams.currentDir}/dist/build/h5/main.js`,
});
utilsClass.buildFile({
oldFile:`${utilsParams.currentDir}/src/electron/package.json`,
newFile:`${utilsParams.currentDir}/dist/build/h5/package.json`,
});
utilsClass.buildFile({
oldFile:`${utilsParams.currentDir}/src/electron/preload.js`,
newFile:`${utilsParams.currentDir}/dist/build/h5/preload.js`,
});
utilsClass.buildFile({
oldFile:`${utilsParams.currentDir}/src/electron/utils.js`,
newFile:`${utilsParams.currentDir}/dist/build/h5/utils.js`,
});
console.log('');
console.log('------electron build ok------');
console.log('');
}
}

const electronClassTarget = new electronClass();
electronClassTarget.initStart();
68 changes: 16 additions & 52 deletions build.config.ts → src-builds/utils.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,3 @@
const fs = require('fs');
const shell = require('shelljs');
const currentDir = '.';

interface fileData{
file:string,
content:string,
Expand All @@ -19,7 +15,10 @@ interface envData{
buildType:string,
}

class buildClass{
class utilsClass{
public fs = require('fs');
public shell = require('shelljs');
public currentDir = '.';
public buildInfo:envData;
public envTxt:any = {
sit:'SIT',
Expand All @@ -34,10 +33,11 @@ class buildClass{
envType:'uat',
type:'aiplat',
};
this.getEnv();
}
writeFile(fileData:fileData) {
return new Promise((resolve) => {
fs.writeFile(fileData.file, fileData.content, (err:any) => {
this.fs.writeFile(fileData.file, fileData.content, (err:any) => {
if (err) {
console.error(err);
} else {
Expand All @@ -49,7 +49,7 @@ class buildClass{
}
readFile(fileData:fileData) {
return new Promise((resolve) => {
fs.readFile(fileData.file, 'utf8', (err:any, data:string) => {
this.fs.readFile(fileData.file, 'utf8', (err:any, data:string) => {
if (err) {
console.error(err);
}
Expand All @@ -62,7 +62,7 @@ class buildClass{
return value;
}
buildFile(data:buildFileData) {
shell.cp('-R', data.oldFile, data.newFile);
this.shell.cp('-R', data.oldFile, data.newFile);
console.log(`------Build ${data.newFile}------`);
}
getEnv() {
Expand Down Expand Up @@ -103,51 +103,15 @@ class buildClass{
};
return appType[type];
}
async initStart() {
await this.getEnv();

const runDir = this.buildInfo.buildType === 'build' ? 'build' :'dev';
shell.rm('-rf', `${currentDir}/dist/${runDir}`);

const buildsDir = `${currentDir}/src/builds`;
shell.rm('-rf', buildsDir);
shell.mkdir('-p', buildsDir);

let appTypeName:any = this.buildInfo.buildType.split(':');
if (appTypeName && appTypeName.length > 1) {
appTypeName = appTypeName[1];
} else {
appTypeName = 'mp-weixin';
getParams() {
return {
fs: this.fs,
shell: this.shell,
currentDir: this.currentDir,
envTxt: this.envTxt,
...this.buildInfo
}
appTypeName = this.getAppTypeName(appTypeName);

console.log('');
const isDevTxt = this.buildInfo.buildType.includes('build') ? '构建' :'开发';
console.log(`------${appTypeName}平台-${this.envTxt[this.buildInfo.envType]}环境-${isDevTxt}-${this.buildInfo.type}------`);
console.log('');

await this.writeFile({
file:`${currentDir}/src/builds/envType.ts`,
content:`const envType:string = '${this.buildInfo.envType}';export default envType;`,
});

this.buildFile({
oldFile:`${currentDir}/src/projects/${this.buildInfo.type}/selftPages.json`,
newFile:`${currentDir}/src/builds/pages.json`,
});
this.buildFile({
oldFile:`${currentDir}/src/projects/${this.buildInfo.type}/manifest/${this.buildInfo.envType}/manifest.json`,
newFile:`${currentDir}/src/manifest.json`,
});
this.buildFile({
oldFile:`${currentDir}/src/projects/${this.buildInfo.type}/selfConfig.ts`,
newFile:`${currentDir}/src/builds/selfConfig.ts`,
});
console.log('');
console.log('------Building now------');
console.log('');
}
}

const buildClassData = new buildClass();
buildClassData.initStart();
module.exports = utilsClass
19 changes: 0 additions & 19 deletions src/components/Header1.vue

This file was deleted.

File renamed without changes.
33 changes: 33 additions & 0 deletions src/components/ani-header1.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
<template>
<div class="cm_pf cm_tl0 cm_w100 cm_z99">
<div class="cm_pc_12">
<view v-if="isBack" @click="goToBack">
<ani-image imgClass="cm_pa cm_tl0 cm_wh3 cm_z99" imgUrl="./static/aiplat/cm_back.png"></ani-image>
</view>
<div class="cm_pc_12 cm_hl3 cm_m0 cm_b0 cm_cf cm_tc" :class="{'cm_pl3': isBack}">{{ title }}</div>
</div>
</div>
</template>
<script lang="ts">
import Vue from "vue";
export default Vue.extend({
props: {
title: {
type: String,
default: "",
},
isBack: {
type: Boolean,
default: false,
},
},
data() {
return {};
},
methods: {
goToBack() {
this.$cmapp.jumpTo('', 'navigateBack');
}
}
});
</script>
32 changes: 32 additions & 0 deletions src/components/ani-image.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<template>
<image :class="imgClass" :src="imgUrl" v-if="isApp||isElectron"/>
<img :class="imgClass" :src="imgUrl" v-else/>
</template>
<script lang="ts">
import Vue from "vue";
export default Vue.extend({
props: {
imgUrl: {
type: String,
default: "",
},
imgClass: {
type: String,
default: "",
},
},
data() {
return {};
},
computed: {
isApp() {
const userAgent = window.navigator.userAgent.toLowerCase();
return userAgent.includes('html5plus') ? 1 : 0;
},
isElectron() {
const userAgent = window.navigator.userAgent.toLowerCase();
return userAgent.includes('electron') ? 1 : 0;
}
}
});
</script>
File renamed without changes.
Loading

0 comments on commit cb0f501

Please sign in to comment.