冠方原生 App 壳交互文档

H5 应用在嵌入 App（公司开发的 App）中，存在一些原生交互行为。该文档为原生 App 接口文档，基本能够满足原生需求，如有新需求，请联系前端组黄富强。

原理：原生 App 在打开 webview 时，可以全局注入 js 脚本代码，然后嵌入的 wen 网页调用注入的 js 脚本实现与原生 App 的交互。

目录

1. 事件

   1.1 激活程序

2. 获取设备信息

   2.1 获取网络状态

   2.2 获取加速度信息

   2.3 获取地理位置信息

3. App 原生操作

   3.1 关闭 webview

   3.2 拍照

   3.3 录音

   3.4 录像[暂不支持]

   3.5 播放音频、视频[待完善]

   3.6 调用震动

   3.7 文件系统（上传、保存文件

install

npm i @gf-ui/GFSdk

Or

down the js

use

import GFSdk from "@gf-ui/GFSdk";

const gfSdk = new GFSdk();

Or

<script src="../GFSdk.min.js"></script>

<script>
  var gfSdk = new GFSdk();
</script>

事件

激活程序

原生 App 锁屏、切换至后台后重新激活时可以触发激活事件.

gfSdk.on("actived", function () {
  console.log("app is actived");
});

获取设备信息

获取网络状态

出参： "data" | "WIFI" | "offLine" | "unknow", data 为手机流量

gfSdk
  .getNetwork()
  .then((res) => console.log(res))
  .catch((err) => console.log(err));
// "data"

获取地理位置信息

**出参：**经纬度坐标

gfSdk
  .getGeoInfo()
  .then((res) => console.log(res))
  .catch((err) => console.log(err));
// { latitude: 100, longitude: 160 }

获取加速度信息(常用场景：摇一摇)[暂不支持]

出参：

gfSdk
  .getAcceleration()
  .then((res) => console.log(res))
  .catch((err) => console.log(err));
// { x: 120; y: 140; z: 10; }

App 原生操作

关闭 webview

gfSdk.closeWebview();

拍照

可以选择图片来源和指定返回数据类型。默认返回类型为临时路径列表，临时路径可使用 sdk 上传方法进行上传。在某些情况也可以返回图片 base64 编码，但是 base64 存在许多问题（主要是原生程序与 H5 交互问题,存在不稳定性），所以base64 场景下尽量少选择图片，并且会将图片进行压缩。

参数：

{
  type: "temp" | "base64"; // 返回类型，默认返回临时路径，当使用base64时，
  sourceType: Array<"album" | "camera">; // 指定来源是相册还是相机，默认二者都有
}

出参： 图片路径（base64）数组

gfSdk
  .chooseImage({
    type: "temp",
    sourceType: ["album", "camera"],
  })
  .then((res) => console.log(res))
  .catch((err) => console.log(err));
// [temp://gfApp/cache/xxxx.jpg]

扫一扫(调用系统相机完成扫码)

入参： 扫码类型：二维码："QR", 条形码："Bar"

出参： 二维码、条形码字符串

gfSdk
  .scanCode(type)
  .then((res) => console.log(res))
  .catch((err) => console.log(err));
// 999888werrw

录音

录音仅支持不间断录音，如果之前录音未结束又开启了新录音则不会执行任何操作。开始录音后返回当前录音的 id，录音停止成功后返回当前录音的临时文件路径(使用 sdk 上传方法进行上传)。

// start
gfSdk
  .startRecord()
  .then((res) => console.log(res))
  .catch((err) => console.log(err));
// 001

// end
gfSdk
  .stopRecord(id)
  .then((res) => console.log(res))
  .catch((err) => console.log(err));
// temp://gfApp/cache/xxxx.mp3

录像

与录音相同

// start
gfSdk
  .startVideoRecord()
  .then((res) => console.log(res))
  .catch((err) => console.log(err));
// 002

// end
gfSdk
  .stopVideoRecord()
  .then((res) => console.log(res))
  .catch((err) => console.log(err));
// temp://gfApp/cache/xxxx.mp4

播放音频、视频[暂不支持]

一般来说，H5 网页能够自行播放音视频。但一些缓存的文件，或者一些不支持的文件格式可以使用该 api 进行播放。调用该 api 后将播放控制权则交由原生程序。

gfSdk.playAudio(url:string).catch(err => console.log(err))

gfSdk.playVideo(url:string).catch(err => console.log(err))

调用震动

开始震动接受 3 个参数：

duration number 一次震动的时长（毫秒 interval number 两次震动的间隔（毫秒 totalTime number 震动的总时长（毫秒），如不设置则会一直进行

// startShock
gfSdk
  .startShock(duration, interval, totalTime)
  .then((res) => console.log(res))
  .catch((err) => console.log(err));
// 003

// stopShock
gfSdk.stopShock(id);

文件系统（上传、保存、打开文件

保存文件传入文件路径，自动打开文件浏览器选择保存路径进行保存

入参：

// 上传时
{
  url: string, // 上传文件地址
  path?: string, // 临时文件路径，没有该参数时则打开文件浏览器选择文件
  params?: object, // 上传时附带参数
  headers?: object, // 上传时的请求头
}
// 下载时为下载文件远程路径

// uploadFile
gfSdk
  .uploadFile(config)
  .then((res) => res)
  .catch((err) => err);
// http://xxx.xxx.com/xxx/xxx

// saveFile
gfSdk
  .saveFile(path)
  .then(() => console.log("ok"))
  .catch((err) => console.log(err));
// openFile
gfSdk
  .openFile(path)
  .then(() => console.log("ok"))
  .catch((err) => console.log(err));