🛠electron打造一个自己的小程序

348 阅读3分钟

CodeEngine 软件

此软件摸鱼的时候写的,偶尔需要使用一些重复利用的工具,然后就写了一个这样的软件。

进入正题 此框架配备小程序打包、小程序开发、小程序框架。 小程序开发直接通过 pnpm create ce 去安装依赖,小程序可以直接打包electron 或者打包小程序。

CodeEngine 引擎软件 github.com/impohcom/co… code-ce 引擎启动应用ce.exe github.com/impohcom/co…

ce-core 小程序框架 github.com/impohcom/ce…

create-ce 小程序引擎框架模板 github.com/impohcom/ce…

cepak 小程序打包框架 github.com/impohcom/ce…

code-admin 小程序商场后台 github.com/impohcom/co…

code-applet 小程序案例 github.com/impohcom/co…

code-docs 文档(鄙人整在失业中,哈哈没心情搞)后续更新

image.png

模块介绍

1. 已安装的小程序

此模块就是在商场安装后显示在此区域,双击可以启动小程序,右键可以删除。

image.png

2. 便签

此模块就是平常需要记录的工作日记。

image.png

3. 每周任务(展示只能看时间)

此模块是一个时间提醒,已经添加任务模块

image.png

4. 消息模块

此模块只能看看更新消息,日志。

image.png

5. 系统设置

此模块有,系统环境、商场、用户、关于CE

image.png

  • 系统环境 配置开发环境,配置小程序存放目录,等等一些。 image.png

  • 商场 下载小程序应用 image.png

  • 用户 登录用户,可以将打包好的小程序发布到商场里面。 image.png

image.png

image.png

  • 关于CE 就是一些系统版本

image.png

CodeEngine 打包流程

警告,如果你需要启动,首先需要先运行 pnpm re-sqlite

  1. 拉取 github.com/impohcom/co…
  2. 在拉取 github.com/impohcom/co…
  3. 进入 code-engine 文件目录 pnpm i (主程序框架)
  4. 在进入目录 code-engine\renderer 文件 ,在使用 pnpm i (视图框架)
  5. 打开 code-ce 项目进行 pnpm i
  6. code-ce 目录下,使用命令 pnpm build 打包 。
  7. 打完成会出现ce.exe image.png
  8. 此时把ce.exe 复制到code-engine文件目录下。 image.png
  9. 在code-engine 目录运行命令
pnpm build:vite  // 打包视图
pnpm build  // 打包主程序
  1. 打包文件会存放到code-engine/release目录下

codeEngine 开发环境配置

警告,如果环境不生效,则重启电脑或使用CMD命令

此环境可以手动也可以通过软件设置

  1. 手动设置,需要你找到codeEngine 软件安装位置 image.png
  2. 复制目录 image.png
  3. 【编辑系统环境】 选择用户的【Path】或者系统变量的【Path】 都可以 image.png

软件设置环境

打开CodeEngine软件 => 系统设置 => 系统环境 => 开启【系统环境配置】

image.png

image.png

小程序开发

小程序配备了脚手架所以可以直接下拉运行

使用 NPM:

$ npm create ce@latest

使用 Yarn:

$ yarn create ce

使用 PNPM:

$ pnpm create ce

你还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如,要构建一个 Vite + Vue 项目,运行:

# npm 6.x
npm create ce@latest my-vue-app --template vue

# npm 7+, extra double-dash is needed:
npm create ce@latest my-vue-app -- --template vue

# yarn
yarn create ce my-vue-app --template vue

# pnpm
pnpm create ce my-vue-app --template vue

查看 create-vite 以获取每个模板的更多细节:vanillavanilla-tsvuevue-tsreactreact-tsreact-swcreact-swc-tspreactpreact-tssveltesvelte-ts

安装 模板后

xxxx 目录下
pnpm i 

进入目录
xxxx\renderer  // 视图
pnpm i 

如果需要打包小程序 需要安装插件

pnpm add cepkg

打包后的后缀 .codeengine , 双击小程序就会启动。可以直接拖进小程序上传界面

  "scripts": {
    "build": "cepkg build"  // Pack command 
  }

待业中。。。。。