V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
lpap123456
V2EX  ›  Electron

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

  •  
  •   lpap123456 · 2020-08-11 16:21:27 +08:00 · 3044 次点击
    这是一个创建于 1571 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    背景

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

    COOL-AI

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

    展示 1

    展示 1

    特性

    • 丰富的底层 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是必须添加的,并且需要将 routermode设置为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 、上传应用

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

    3 条回复    2020-08-11 17:34:42 +08:00
    xiadd
        1
    xiadd  
       2020-08-11 16:26:07 +08:00
    话说我记得微信 pc 端有小程序吧,不过没有入口
    chucongqing
        2
    chucongqing  
       2020-08-11 16:37:28 +08:00
    @xiadd 在电脑板微信左下角第一个图标是小程序的入口
    smallfish1990
        3
    smallfish1990  
       2020-08-11 17:34:42 +08:00
    有没有技术方案科普的文章或者类似开源的产品,公司想用
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2936 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 11:21 · PVG 19:21 · LAX 03:21 · JFK 06:21
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.