10- V13 OrDroid Html 网页插件使用说明 - OrDroid APP 相关

# 一、背景与目的
OrDroid网页插件主要适用于跨平台轻量级开发，目前通过此插件可实现Android端扫码、拍照、定位、基于FTP协议上传/下载文件、蓝牙打印、获取登录账号基本信息(WCFURL、Token、用户名、设备名、语言等基础信息)。
# 二、插件配置
1.在系统参数管理中搜索[OrDroid Plugin Type]，并以此参数名新增参数值6。
![](/media//202103/2021-03-17_112636.png)

2.在服务器插件目录中新增目录"HtmlPlugin"，并将html文件放于此目录下。
![](/media//202309/2023-09-07_153300.png)

3.在OrDroid插件配置新插件
![](/media//202103/2021-03-17_112155.png)

注意:
(1).网页插件的插件类型为6。
(2).插件文件名为html文件的相对路径，该路径前不需要增加"/"。

# 三、插件与html文件交互接口与数据格式
**1.扫码：**
JS需要调用OrDroid函数"callClient"，并传入字符串"scan"，此时OrDroid会自动跳转到扫码界面。当扫码完成，OrDroid会调用JS函数"clientCallback"，并传入扫码结果(JSON字符串)，只需解析此JSON字符串，并获取其中"code"字段，即可获得扫码结果，JSON字符串格式如下:
`{"data":{"code":"876002358258"},"type":"scan"}`

**2.拍照：**
JS需要调用OrDroid函数"callClient"，并传入字符串"takePic"，此时OrDroid会自动跳转到拍照界面。当拍照完成，OrDroid会调用JS函数"clientCallbackImg"，并传入拍照结果(OrDroid需要将图片压缩，然后使用Base64编码，接着将编码、图片路径拼接成JSON字符串)，只需解析此JSON字符串，并获取其中"img"字段，即可获得图片编码，其中"path"字段为图片路径，此路径需要在JS保存下来，为后续使用FTP上传功能服务，JSON字符串格式如下:
`{"img":"data:image\/jpg;base64,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","path":"\/storage\/emulated\/0\/Android\/data\/com.ordroid.host\/cache\/Files\/3bcaa841d992bf900a68f5fecd9cd38f.jpg"}`

**3.定位：**
JS需要调用OrDroid函数"callClient"，并传入字符串"location"，此时OrDroid会调用系统定位功能。当定位完成，OrDroid会调用JS函数"clientCallback"，并传入定位结果(JSON字符串)，只需解析此JSON字符串，即可获得纬度字段"latitude"、经度字段"longitude"、详细地址字段"address"，JSON字符串格式如下:
`{"data":{"address":"广东省深圳市龙华区民康路278号靠近华夏银行(龙华支行)","latitude":"22.614442","longitude":"114.041213"},"type":"location"}`

4.获取登录账号信息：
JS需要调用OrDroid函数"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%3D7b4897tyg5nEGlBhWv7lF74iC%2BGNVkXgpmm13E09CHm5vpqhD9GrsPomJv1BPRqSGGOuIr0N2RLgXJMv4uMiqcIv4zH770%2FV1TO297LyKj313jcdDosE7e8T%2F%2FX%2FmbPyjgmJvmH3QiOoc74eRCpXKEioUZYS0mfPfzoopUgAG612SLBHbWQ4CStCimyKN%2BYNoMBKomelD9HGEBtKiQQTDrjDHXMIr88Q1w7g6vOlswJlC8cagscWgyID7rYB%2BT1of63ejO"},"type":"userInfo"}`

**5.ftp上传：**
ftp上传需要分为三个步骤:
(1).JS需要通过WebAPI接口获取FtpFile表主键(主键不需要写入OrDroid端)、FtpServer地址、FtpUser账号、FtpPassword密码、FtpFolder(FTP根目录)、FtpSubFolder(FTP子目录，如果没有，此字段可为空)、FtpUploadFile上传文件名称、FilePath上传文件本地路径(调用拍照功能后保存的"path"字段)，并将这些字段拼接成JSON字符串，JSON格式如下:
`{"Type":"upload","FtpServer":"192.168.1.121:17089","FtpUser":"Administrator","FtpPassword":"Windows2012","FtpFolder":"FtpFiles","FtpSubFolder":"202011","FtpUploadFile":"FTP1000001HLf93459f4e6ce7daa8d83f4f364932984.png","FilePath":"/storage/emulated/0/Android/data/com.ordroid.host/cache/Files/3bcaa841d992bf900a68f5fecd9cd38f.jpg"}`

(2).JS需要调用OrDroid函数"ftp"，并传入第一个步骤的JSON字符串，上传成功后，OrDroid会调用JS函数"clientCallback"，并传入结果(JSON字符串)，只需解析此JSON字符串，通过获取的"result"字段结果判断是否上传成功(0,成功/-1,失败)，JSON字符串格式如下:
`{"data":{"result":"0"},"type":"ftpUpload"}`

(3).上传成功后，JS还需调用WebAPI将FtpFile表主键写入FtpFile表中。
注意: 以上WebAPI并无现成接口，需开发人员自行实现。

**6.ftp下载：**
ftp下载需要分为两个步骤:
(1).JS需要通过WebAPI接口获得FtpServer地址、FtpUser账号、FtpPassword密码、FtpFolder(FTP根目录)、FtpSubFolder(FTP子目录，如果没有，此字段可为空)、FtpUploadFile下载文件名称，并将以上字段拼接成JSON字符串，JSON字符串格式如下:
`{"Type":"download","FtpServer":"192.168.1.121:17089","FtpUser":"Administrator","FtpPassword":"Windows2012","FtpFolder":"FtpFiles","FtpSubFolder":"202011","FtpUploadFile":"FTP1000001HLf93459f4e6ce7daa8d83f4f364932984.png"}`

(2).JS需要调用OrDroid函数"ftp"，并传入第一个步骤的JSON字符串，如果下载成功，OrDroid会调用JS函数"clientCallbackImg"，并传入下载图片JSON字符串(OrDroid需要将图片压缩，然后使用Base64编码，接着将编码、图片路径拼接成JSON字符串)，只需解析此JSON字符串，并获取其中"img"字段，即可获得图片编码，同样的，其中"path"字段为图片路径。下载成功JSON字符串如下:
`{"img":"data:image\/jpg;base64,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","path":"\/storage\/emulated\/0\/Android\/data\/com.ordroid.host\/cache\/Files\/3bcaa841d992bf900a68f5fecd9cd38f.jpg"}`

如果下载失败，OrDroid会调用JS函数"clientCallback"，并传入结果(JSON字符串)，只需解析此JSON字符串，即可知道下载失败，下载失败JSON字符串格式如下:
`{"data":{"result":"-1"},"type":"ftpDownload"}`
注意: 以上WebAPI并无现成接口，需开发人员自行实现。

**7.蓝牙打印机打印：**
打印步骤主要分为两步:
(1).JS需要调用WebAPI接口获得标签名称PrintFile、斑马打印机ZPL命令、打印浓度Concentration、打印横坐标PrintX、打印纵坐标PrintY、标签宽度LableSizeX(斑马打印机可将宽度设置为-1，让打印机自适应标签宽度)、标签高度LableSizeY(斑马打印机可将高度设置为-1，让打印机自适应标签高度)、标签间距Gap、标签打印张数Copies、图片像素ImageResolution、标签左边距leftMargin(佳博、斑马、Hand-held打印机无法设置此值)，打印方向Direction(佳博、斑马、Hand-held打印机无法设置此值)，并将以上字段拼接成JSON字符串，JSON格式如下:
`{"Type":"print","data":[{"PrintFile":"789.jpg","ZPL":"","Concentration":"25","PrintX":"0","PrintY":"0","LableSizeX":"50","LableSizeY":"38","Gap":"2","Copies":"1","ImageResolution":"384","leftMargin":"0","Direction":"0"},{"PrintFile":"456.jpg","ZPL":"","Concentration":"25","PrintX":"0","PrintY":"0","LableSizeX":"50","LableSizeY":"38","Gap":"2","Copies":"1","ImageResolution":"384","leftMargin":"0","Direction":"0"}]}`

(2).JS需要调用OrDroid函数"print"，并传入第一个步骤的JSON字符串，OrDroid端则开始下载JSON字符串中指定的标签(如果斑马打印机ZPL不为空则不会下载标签)，如果下载成功，则开始打印标签，当打印完成后，OrDroid端会调用JS函数"clientCallback"，并传入JSON字符串，同样的，开发人员可通过"result"字段判断是否成功，JSON字符串格式如下:
`{"data":{"result":"0"},"type":"print"}`