基于 Electron 电脑版小程序平台 开发多个小程序 COOL-AI

基于 Electron 电脑版小程序平台 开发多个小程序

背景

目前小程序在移动端热火朝天，微信、百度、支付宝、抖音、头条等等都有自己的小程序平台。但是 pc 端的却比较少人重视，虽然有一些 pc 端的软件如 360 等有相似的平台，但仅仅局限于安全的领域。

COOL-AI

COOL-AI 是基于 Electron 开发的跨平台(Mac 、Window)的多应用平台，开发者可以在上面不断地开发自己的应用。如：企业为了提高工作效率往往需要开发各种不同的特殊的小工具，也可以做一些行业类的应用，如：仓库管理，房产信息管理，由于 Electron 的特性是可以把硬件结合到开发中来。

特性

• 丰富的底层 API： 除了 electron 、node 等 api，cool 官方还提供如：云数据库、即时通信、云推送、本地数据库等 pc 端应用常用的 api 。
• 简洁的界面：页面简洁大方，易操作，提供开发者平台，让开发者发布和开发插件更加简单便捷。
• 提供应用开发脚手架：像保姆般地呵护开发者，让开发者快速上手应用开发。
• 调皮的小酷： 你想让小酷做什么呢？

基于此你开发应用的时候几乎不需要部署自己的服务器，如你开发一个社区交流的应用可以用云数据库；开发聊天的应用可以用到云数据库+即时通信。

## 文档地址

https://docs-ai.cool-js.com

## 前提条件

为了更快地安装项目依赖，必须提前安装好cnpm

!>npm install -g cnpm --registry=https://registry.npm.taobao.org

## 创建应用

视频教程

##### 1 、使用 COOL-AI 脚手架创建

```js

1 、vue create project

2 、cd project

3 、vue add router //如果新建的时候已经选择这步可以忽略

4 、vue add vue-cli-plugin-cool-ai //添加 COOL-AI 的脚手架插件

5 、npm run serve

```

!> vue 的router是必须添加的，并且需要将 router 的mode设置为hash

#### 2 、目录结构

```js

project

├── package.json

├── app.json (COOL-AI 应用配置文件)

├── db.json (COOL-AI 数据库配置文件)

├── public

├── src

| ├── assets(资源)

│ ├── components(组件)

│ ├── router(路由)

│ ├── views(页面)

| |—— App.vue

| |—— main.js

| |—— preload.js(cool-ai 预加载的 js)

```

##### 3 、app.json 配置

```js

{

​ // 应用 ID，用脚手架创建的时候自动生成

​ "appId": "z-gK4vSCQ",

​ // 应用名称

​ "name": "这是个测试应用",

​ // 版本号

​ "version": "0.0.1",

​ // 应用描述

​ "description": "测试应用",

​ // 入口文件默认为 index.html 一般不需要修改

​ "main": "index.html",

​ // 预加载 js， 该 js 文件会在所有资源文件之前加载

​ "preload": "preload.js",

​ // 应用 logo， 一般无需修改

​ "logo": "logo.png",

​ // 应用支持的平台

​ "platform": [ "win32", "darwin" ],

​ // 关键字

​ "keyWords": [ "cool-ai", "cool" ],

​ // 打开时时候隐藏小酷，如果隐藏了应用显示区域会更大

​ "xiaoku": { "hide": false },

​ // 开发时的配置

​ "dev": {

​ // 地址

​ "main": "http://127.0.0.1:8081",

​ // 预加载 js

​ "preload": "src/preload.js",

​ // logo

​ "logo": "src/assets/logo.png"

​ },

​ // preload.js 引用第三方包时需要在此添加

​ "build": { "externals": [] }

}

```

##### 4 、db.json 配置文件

```js

{

​ // 是否是云端数据库，false 为本地数据库

​ "isCloud": false,

​ // 表结构

​ "tables": [{

​ "name": "user",

​ "model": {

​ "id:int": {

​ "pk": true,

​ "ai": true

​ },

​ "age:int": {

​ "default": 13,

​ "max": 110,

​ "min": 13

​ },

​ "name:string": {

​ "default": "none",

​ "notNull": true

​ }

​ }

​ }]

}

```

表结构详见nanosql

## 调试应用

##### 1 、打开开发者中心

打开或运行 COOL-AI->微信扫码登录->点击头像进入开发者中心

##### 2 、在开发者中心创建应用

将之前创建好的项目中的app.json文件拖入开发者中心，就会自动创建一个对应的项目

#### 3 、运行应用

点击运行按钮，就可以看到对应应用的运行窗口啦

#### 4 、上传应用

点击上传按钮，填写版本信息，点确定后应用会自动打包编译并上传