hatom-js/README.md

npm 插件版本 hatom.js

# hatom.js

Hatom 是一套混合模式开发APP的低代码框架，采用原生端webview容器 + 前端静态资源html页面 + hatom.js的加载方式。开发形式简单快捷，灵活多变。应用场景多种多样，解决方案是适合解决各种轻量型、复杂型、定制型的各种项目开发。

该插件旨在将混合开发中的交互能力hatom.js开放出来，形成hatom-js插件，便于开发者使用。

## hatom-js 使用教程

### hatom-js 引用

安装 

```bash
npm install hatom-js --save-dev
```

```javascript
import {hatom, Hatom, install} from 'hatom-js'
```

### hatom 的用法

最简易的hatom对象， 能直接调用到hatom框架提供原生能力

```javascript
import {hatom} from 'hatom-js'

/** vue 3.x 推荐  */
// 获取设备信息的
hatom.deviceInfo.getScreenInfo((res)=>{
  console.log(res.message);
})


// vue 2.x 使用方法
Vue.prototype.$hatom = hatom;
// 获取设备信息的
this.$hatom.deviceInfo.getScreenInfo((res)=>{
  console.log(res.message);
})

```

### Hatom

导出的是Hatom Class， 可以传入参数初始化hatom对象, 便于跳转

```javascript

import {Hatom} from 'hatom-js'
import pageRouter from "@/src/corejs/pageRouter.json"
import webApp from "@/src/config/webApp.json"

/** 对接多个H5.zip包, 多页面跳转 推荐 */
const hatom = new Hatom({pageRouter, webApp})
// 获取设备信息的
hatom.deviceInfo.getScreenInfo((res)=>{
  console.log(res.message);
})

```

### install

导出的是vue 2.x插件对象，使用Vue.use方法挂载到原型链上

```javascript

import Vue from 'vue';
import {install} from 'hatom-js'

Vue.use(install);

// 获取设备信息的
this.$hatom.deviceInfo.getScreenInfo((res)=>{
  console.log(res.message);
})

```


添加配置

```javascript

  {
    test: /\.js$/,
    include: [
      path.resolve(rootPath, "node_modules/hatom-js")
    ],
    use: ["babel-loader"]
  }
  
```