11- V15 OrDroid Html网页插件使用说明 - OrDroid APP 相关

# 一、背景与目的
OrDroid网页插件主要适用于跨平台轻量级开发，目前通过此插件可实现Android端扫码、拍照、选择本地图片、拍摄视频、选择本地视频、录音、定位、基于FTP协议上传/下载文件、蓝牙打印、获取登录账号基本信息(WCFURL、Token、用户名、设备名、语言等基础信息)等。

# 二、插件配置
2.1 在系统参数管理中搜索[OrDroid Plugin Type]，并以此参数名新增参数值6。
![](/media//202103/2021-03-17_112636.png)
2.2 在服务器插件目录中新增目录"HtmlPlugin"，并将html文件放于此目录下。
![](/media//202310/2023-10-24_151227.png)
2.3 在OrDroid插件配置新插件
![](/media//202310/2023-10-24_151120.png)

注意:
(1).网页插件的插件类型为6。

# 三、插件与html文件交互接口与数据格式
3.1 JS定义Android端回写函数

3.1.1 clientCallback函数，Android调用扫码、定位、获取登录账号基本信息、视频拍摄、本地视频选择、录音、ftp上传下载、打印结果回调等，如下。
```javascript
function clientCallback(data) {
 // 这里处理Android端回写JSON字符串
}
```
data: 此字段为Android回写JSON字符串，具体格式以Android定义方法回写数据为准。

3.1.2 clientCallbackImg函数，Android调用拍照、选择本地图片、ftp图片下载回调等，如下。
```javascript
function clientCallbackImg(data) {
				var value = data.img
				imageurl = data.path
				document.getElementById("imgid").setAttribute("src", value)
}
```

3.2 JS定义Android调用对象"injectedObject"，后续JS需通过"window.injectedObject"调用Android方法，例如JS调用Android的打印方法"print"，则调用方法如下"window.injectedObject.print()"。
3.3 Android定义方法
3.3.1 callClient(String param)，调用此方法可调用Android扫码、拍照、选择本地图片、拍摄视频、选择本地视频、录音、定位、获取登录账号基本信息等功能，param具体参数定义如下。
scan: 扫码，JS调用window.injectedObject.callClient('scan')，此时OrDroid会自动跳转到扫码界面。当扫码完成，OrDroid会调用JS函数"clientCallback"，并传入扫码结果(JSON字符串)，只需解析此JSON字符串，并获取其中"code"字段，即可获得扫码结果，JSON字符串格式如下:
{"data":{"code":"876002358258"},"type":"scan"}。
location: 定位，JS调用window.injectedObject.callClient('location')，此时OrDroid会调用系统定位功能。当定位完成，OrDroid会调用JS函数"clientCallback"，并传入定位结果(JSON字符串)，只需解析此JSON字符串，即可获得纬度字段"latitude"、经度字段"longitude"、详细地址字段"address"，JSON字符串格式如下:
{"data":{"address":"广东省深圳市龙华区民康路278号靠近华夏银行(龙华支行)","latitude":"22.6142","longitude":"114.0213"},"type":"location"}。
userInfo: 获取登录账号基本信息，JS调用window.injectedObject.callClient('userInfo')，OrDroid会调用JS函数"clientCallback"，并传入结果(JSON字符串)，只需解析此JSON字符串，即可获得语言字段"languageId"、用户名字段"userName"、设备名称字段"deviceName"、WCF登录地址字段"url"、Token字段"token"，JSON字符串格式如下:
{"data":{"languageId":"2","userName":"HF0028","deviceName":"Redmi K20 Pro Premium Edition","url":"http://192.168.1.121:8090/","token":"plP765%2BVjyk1i%2BQdLPZEew%3D%3D7b4897tyg5nEGlBhcIv4zH770%2FV1T"},"type":"userInfo"}。
takePic: 拍照，JS调用window.injectedObject.callClient('takePic')，此时OrDroid会自动跳转到系统拍照界面。当拍照完成，OrDroid会调用JS函数"clientCallbackImg"，并传入拍照结果(OrDroid需要将图片压缩，然后使用Base64编码，接着将编码、图片路径拼接成JSON字符串)，只需解析此JSON字符串，并获取其中"img"字段，即可获得图片编码，其中"path"字段为图片路径，JSON字符串格式如下:
{"img":"data:image\/jpg;base64,iVBORw0KGIL2QVpAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA7B7/AJizDJLksLRAAAAAAElFTkSuQmCC","path":"\/storage\/emulated\/0\/Android\/data\/com.ordroid.host\/cache\/Files\/3bcaa841d992bf900a68f5fecd9cd38f.jpg"}。
image: 选择本地图片，JS调用window.injectedObject.callClient('image')，此时OrDroid会自动跳转到系统图库。当用户在图库选择完成，OrDroid会调用JS函数"clientCallbackImg"，并传入图片选择结果(OrDroid需要将图片压缩，然后使用Base64编码，接着将编码、图片路径拼接成JSON字符串)，只需解析此JSON字符串，并获取其中"img"字段，即可获得图片编码，其中"path"字段为图片路径，JSON字符串格式如下:
{"img":"data:image\/jpg;base64,iVBORw0KGIL2QVpAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA7B7/AJizDJLksLRAAAAAAElFTkSuQmCC","path":"\/storage\/emulated\/0\/Android\/data\/com.ordroid.host\/cache\/Files\/3bcaa841d992bf900a68f5fecd9cd38f.jpg"}。
video: 视频拍摄，JS调用window.injectedObject.callClient('video')，此时OrDroid会自动跳转到系统拍摄界面。当拍摄完成，OrDroid会调用JS函数"clientCallback"，并传入拍摄结果(OrDroid需要将视频截图压缩，然后使用Base64编码，接着将编码、图片路径拼接成JSON字符串)，只需解析此JSON字符串，获取其中"videoThumbnails"字段，即可获得视频截图编码，其中"path"字段为视频路径，JSON字符串格式如下:
{"data":{"path":"/storage/emulated/0/Android/data/com.ordroid.webplugin/cache/Files/11256ff79ec8cb0d3c99e1c94a71fd8c.mp4","videoThumbnails":"data:image/jpg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDACgcHiMe7tG0NHVfcKmUHx/wAOq7XNW/D37XjJfUcplB8/uUYv\n9kO6NH1FdrlMoP/Z\n"},"type":"video"}。
selectVideo: 选择本地视频，JS调用window.injectedObject.callClient('selectVideo')，此时OrDroid会自动跳转到系统图库界面。当视频选择完成，OrDroid会调用JS函数"clientCallback"，并传入选择结果(OrDroid需要将视频截图压缩，然后使用Base64编码，接着将编码、图片路径拼接成JSON字符串)，只需解析此JSON字符串，获取其中"videoThumbnails"字段，即可获得视频截图编码，其中"path"字段为视频路径，JSON字符串格式如下:
{"data":{"path":"/storage/emulated/0/Android/data/com.ordroid.webplugin/cache/Files/11256ff79ec8cb0d3c99e1c94a71fd8c.mp4","videoThumbnails":"data:image/jpg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDACgcHiMe7tG0NHVfcKmUHx/wAOq7XNW/D37XjJfUcplB8/uUYv\n9kO6NH1FdrlMoP/Z\n"},"type":"video"}。
audio: 录音，JS调用window.injectedObject.callClient('audio')，此时APP会开启录音功能，当用户录音完成，则可继续调用window.injectedObject.callClient('audio')，OrDroid会调用JS函数"clientCallback"，传入录音结果，结果包含"path"，此路径为录音保存路径，JSON字符串格式如下:
{"data":{"path":"/storage/emulated/0/Android/data/com.ordroid.webplugin/cache/Files/bfa19e31a929e3e914d59ba820b78a6a.3gpp"},"type":"audio"}。

3.4 print(String param): 标签打印，打印前准备请参考[打印插件安装与使用](http://121.37.203.18:8006/project-11/doc-202/ "打印插件安装与使用")，JS调用window.injectedObject.print(JSON.stringify(data))，其中"data"参数为传给Android端的JSON字符串，JSON格式如下:
{"Type":"print","data":[{"PrintFile":"789.jpg","ZPL":"","Concentration":"25","PrintX":"0","PrintY":"0","LableSizeX":"50","LableSizeY":"38","PaperWidth":"70","PaperHeight":"50","Gap":"2","Copies":"1","ImageResolution":"384","leftMargin":"0","Direction":"0","Speed":"10","GapType":"0","Orientation":"0","cutHeight":"35"},{"PrintFile":"456.jpg","ZPL":"","Concentration":"25","PrintX":"0","PrintY":"0","LableSizeX":"50","LableSizeY":"38","PaperWidth":"70","PaperHeight":"50","Gap":"2","Copies":"1","ImageResolution":"384","leftMargin":"0","Direction":"0","Speed":"10","GapType":"0","Orientation":"0","cutHeight":"35"}]}。

3.5 ftp(String param): FTP上传下载。JS需调用window.injectedObject.ftp(JSON.stringify(data))实现FTP上传下载，其中param参数为JSON字符串。

3.5.1 FTP下载JSON字符串:
{"Type":"download","data":[{"FtpId":"FTP1000001XH","FtpServer":"192.168.1.64:17089","FtpUser":"BossWang","FtpPassword":"asdf-123","FtpFolder":"FtpFiles","FtpSubFolder":"20228","FtpUploadFile":"FTP1000001XH456.jpg"},{"FtpId":"FTP1000001Q9","FtpServer":"192.168.1.64:17089","FtpUser":"BossWang","FtpPassword":"asdf-123","FtpFolder":"FtpFiles","FtpSubFolder":"20217","FtpUploadFile":"FTP1000001Q9VID_20210707_155139.mp4"},{"FtpId":"FTP1000001XG","FtpServer":"192.168.1.64:17089","FtpUser":"BossWang","FtpPassword":"asdf-123","FtpFolder":"FtpFiles","FtpSubFolder":"20227","FtpUploadFile":"FTP1000001XGPDAT_2056_94.3gpp"}]}。
备注:
(1) FtpFiles: FTP根目录
(2) FtpSubFolder: FTP子目录
(3) FtpUploadFile: FTP下载文件名称。
(4) 图片文件下载成功后，Android端回调JS函数"clientCallbackImg"，其中"path"字段为图片本地存储路径，"img"字段为图片Base64编码，JSON字段如下:
{"FtpId":"FTP1000001XH","path":"\/storage\/emulated\/0\/Android\/data\/com.ordroid.webplugin\/cache\/Files\/FTP1000001XH456.jpg","img":"data:image\/jpg;base64,\/9j\/4AAQSkZJRgABAQAAAQABAAD\/2wBDACgcHiMeGSgjISMtKygwPGRBPDc3PHtYXUlkkYCZlo+A\njIqgtObDoKrarYqMyP\/L2u71\/\/\/\/m8H\/\/\/\/6\/+b9\/\/j\/2wBDASstLTw1PHZBQXb4pYRhllHf\nX3oNB}。
(5) 视频文件下载成功后，Android端回调JS函数"clientCallbackImg"，其中"path"字段为视频本地存储路径，"img"字段为视频截图Base64编码，JSON字段如下:
{"FtpId":"FTP1000001Q9","path":"\/storage\/emulated\/0\/Android\/data\/com.ordroid.webplugin\/cache\/Files\/FTP1000001Q9VID_20210707_155139.mp4","img":"data:image\/jpg;base64,\/9j\/4AAQSkZJRgABAQAAAQABAAD\/2wBDACgcHiMeGSgjISMtKygwPGRBPDc3PHtYXUlkkYCZlo+A\njIqgtObDoKrarYqMyP\/L2u71\/\/\/\/m8H\/\/\/\/6\/+b9\/\/j\/2wBDASstLTw1PHZBQXb4pYyl+Pj4+Pj4\n+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4}。
(6) 音频文件下载成功后，Android端回调JS函数"clientCallbackImg"，其中"path"字段为音频本地存储路径，JSON字段如下:
{"FtpId":"FTP1000001XG","path":"\/storage\/emulated\/0\/Android\/data\/com.ordroid.webplugin\/cache\/Files\/FTP1000001XGPDAT_2056_94.3gpp","img":""}。

3.5.2 FTP上传JSON字符串:
{"Type":"upload","data":[{"FtpId":"FTP1000001XH","FtpServer":"192.168.1.64:17089","FtpUser":"BossWang","FtpPassword":"asdf-123","FtpFolder":"FtpFiles","FtpSubFolder":"20228","FtpUploadFile":"FTP1000001XH456.jpg","FilePath":""},{"FtpId":"FTP1000001Q9","FtpServer":"192.168.1.64:17089","FtpUser":"BossWang","FtpPassword":"asdf-123","FtpFolder":"FtpFiles","FtpSubFolder":"20217","FtpUploadFile":"FTP1000001Q9VID_20210707_155139.mp4","FilePath":"/storage/emulated/0/Android/data/com.ordroid.webplugin/cache/Files/FTP1000001Q9VID_20210707_155139.mp4"},{"FtpId":"FTP1000001XG","FtpServer":"192.168.1.64:17089","FtpUser":"BossWang","FtpPassword":"asdf-123","FtpFolder":"FtpFiles","FtpSubFolder":"20227","FtpUploadFile":"FTP1000001XGPDAT_2056_94.3gpp","FilePath":"/storage/emulated/0/Android/data/com.ordroid.webplugin/cache/Files/FTP1000001XGPDAT_2056_94.3gpp"}]}。
备注:
(1) FtpFiles: FTP根目录
(2) FtpSubFolder: FTP子目录
(3) FtpUploadFile: FTP上传文件名称
(4) FilePath: 文件本地路径
(5) 文件上传成功后，Android端回调JS函数"clientCallback"，并传入JSON字符串:
{"data":{"result":"0","FtpId":"FTP1000001Q9"},"type":"ftpUpload"}
(6) 文件上传失败后，Android端回调JS函数"clientCallback"，并传入JSON字符串:
{"data":{"result":"-1","FtpId":"FTP1000001Q9"},"type":"ftpUpload"}
(7) 文件上传成功后，需要用户自行将"FtpId"字段写入数据库"FtpFile"表。

3.6 openFile(String param): 打开媒体文件(视频/音频)，JS调用window.injectedObject.openFile(JSON.stringify(data))，其中param参数为JSON字符串。

3.6.1 音频文件JSON字符串:
{"path":"/storage/emulated/0/Android/data/com.ordroid.webplugin/cache/Files/edf707abc634ab982d0068216edf7b1d.3gpp","fileType":"audio"}。
备注:
(1) path: 音频本地存储路径
(2) fileType: 媒体文件类型

3.6.1 视频文件JSON字符串:
{"path":"/storage/emulated/0/Android/data/com.ordroid.webplugin/cache/Files/FTP1000001Q9VID_20210707_155139.mp4","fileType":"video"}。
备注:
(1) path: 视频本地存储路径
(2) fileType: 媒体文件类型

3.7 sop(String json): 查看SOP文件(目前仅支持PDF文件、图片文件、MP4视频文件)，JS调用window.injectedObject.sop(JSON.stringify(data))，其中json参数为JSON字符串:
SOPDataSet:[{OpenFile:"FTP1000001DD", FileDescription:"Test3.pdf"},
							{OpenFile:"FTP1000001XH", FileDescription:"456.jpg"},
							{OpenFile:"FTP1000001Q9", FileDescription:"VID_20210707_155139.mp4"},
							{OpenFile:"http://192.168.1.64:10081/download/1234.jpg", FileDescription:"1234.jpg"},]。
备注;
(1) OpenFile: 支持FTP文件主键、支持Http文件下载链接。
(2) FileDescription: SOP文件描述

3.7.1 Android端解析完JSON字符串后，会自动跳转到SOP文件列表界面，如图。
![](/media//202310/2023-10-19_172808.png)

3.7.2 如何打开SOP文件，如图。
![](/media//202310/2023-10-19_173128.png)

3.7.3 PDF文件截图
![](/media//202310/2023-10-19_173229.png)

3.7.4 图片文件截图
![](/media//202310/2023-10-19_173336.png)

3.7.5 视频文件截图
![](/media//202310/2023-10-19_173456.png)