M3JS

简介

M³小应用是基于M³平台运行的各类应用程序的统称。典型的M³小应用是通过HTML5实现的。

M3JS是专门针对M³小应用进行快速开发、部署的集成工具包。M3JS中封装了M³平台的所有应用开发接口，通过这些接口开发人员可以方便的使用M³平台提供的各类资源。M3JS中还包含一个M³小应用开发模版，方便用户快速搭建自己的M³小应用开发项目。另外，M3JS中还提供了一些M³小应用开发过程中常用的函数、工具类和方法。

必须的基础知识

M3JS是面向前端开发人员提供的开发工具包（Toolkit），我们默认用户已经具备下列前端开发相关的基础知识。

HTML5

HTML5 是 HyperText Markup Language 5 的缩写，是构建Web内容的一种描述语言。关于HTML5的详细内容可以点击参考这里。

与HTML5紧密相关的内容，还包括CSS和JavaScript。用户可以通过一些网站自行学习这些内容。

Vue

M³小应用以 Vue 组件形式进行开发。Vue是一套用于构建用户界面的渐进式框架。我们使用Vue CLI 作为前端快速开发的辅助组件。M3JS是在Vue CLI基础上提供的开发工具包。

Node.js

Node.js是一个 JavaScript 运行时环境。Vue CLI需要在Node.js上运行，以提供对前端开发过程的支持。

你需要在开发电脑上安装Node.js软件。通过这里可以下载安装对应不同操作系统版本的Node.js。

在前端开发过程中，会经常使用Node.js中的npm命令。

开发流程

下面以Mac操作系统为例，说明M³小应用开发流程。

创建工程

假设你要创建的M³小应用的英文简称为 MyM3App，中文名称为M³小应用。

1. 创建工程目录

工程目录可以创建在你电脑上任何位置，这里以创建在 /opt/code 目录下为例。

mkdir -p /opt/code/MyM3App
cd /opt/code/MyM3App

2. 安装M3JS

cd /opt/code/MyM3App
npm install -g @wecise/m3js

3. 初始化工程文件

cd /opt/code/MyM3App
m3js init

4. 修改环境信息

cd /opt/code/MyM3App
vi .env

编辑.env文件

NODE_ENV="development"                # 指定Node运行在开发模式
VUE_APP_M3_APP="m3app"                # M³小应用的简称，由英文字母、数字、下划线组成
VUE_APP_M3_TITLE="M3小应用"            # M³小应用的中文名称
VUE_APP_M3_APP_VERSION="1.0.0"        # M³小应用的版本
VUE_APP_M3_HOST="47.92.151.165:8080"  # M³平台的数据服务地址
VUE_APP_M3_COMPANY="wecise"           # 可通过M³平台申请注册公司信息
VUE_APP_M3_USERNAME="username"        # 可通过M³平台申请注册用户
VUE_APP_M3_PASSWORD="123456"          # 可通过M³平台修改用户密码

5. 本地试运行

cd /opt/code/MyM3App
m3js run

终端显示类似如下内容：

  App running at:
  - Local:   http://localhost:8080
  - Network: http://192.168.1.4:8080

  Note that the development build is not optimized.
  To create a production build, run npm run build.

6. 查看运行结果

在浏览器中打开 http://localhost:8080 查看页面是否正常。

M³小应用开发

M³小应用以 Vue 组件形式进行开发。所有 Vue 组件均存放在工程目录的 src 目录下，入口主文件为 App.vue。其它使用到的 Vue 组件放在 components 目录下。用户可根据实际需求进行分析设计，组织 Vue 组件的目录结构。

M3JS在初始化M³小应用时，已经创建好入口主文件 App.vue 和一些常用的 Vue组件。后面会逐一说明这些组件的功能。

M³小应用测试

......

M³小应用发布

执行M3JS发布命令，M3JS 编译后发布到M³平台

cd /opt/code/MyM3App
m3js publish

通过浏览器访问M³平台，可将你发布的 M³小应用分享到M³小应用市场。 通过M³平台还可以对 M³小应用进行相关配置，具体操作方法请参考M³平台用户手册。

M³小应用开发框架

Vue组件

入口主文件

......

布局组件

......

消息组件

......

标签组件

......

......

......

M³平台接口

......

M³小应用框架

......

其它常用功能

......

Features

app

setAppAsHome
setAppAsHomeForAllUser
setTitle

Connect

Init

Dfs

dfs.newFile

dfs.deleteFile

dfsRename

dfsUpdateAttr

dfsRefresh

Consolelog

consolelogTrace

consolelogDelete

consolelogTruncate

Job

Rule

ruleGet
ruleAdd

User

Install

npm install @wecise/m3js

Usage

import

const m3 = require("@wecise/m3js");
Vue.prototype.m3 = m3;

connect

if(process.env.NODE_ENV === "development"){

    this.m3.connect(http/https, address, port, company, username, password).then(()=>{
        // app
    }).catch((err)=>{
        console.log(err);
    });
  
} else {
  this.m3.init();
  // app
}

call api

    # no input param
    this.m3.callFS("/matrix/eventConsole/getEventList.js").then( (res)=>{
        console.log(res)
    }).catch( (err)=>{
        console.error(err)
    } );

    # input param
    let param = encodeURIComponent(JSON.stringify({term:'m3'}));
    this.m3.callFS("/matrix/eventConsole/getEventList.js", param).then( (res)=>{
        console.log(res)
    }).catch( (err)=>{
        console.error(err)
    } );

License

MIT

Copyright (c) 2016-present, WECISE.COM