更新记录

2.2.0(2022-09-18)

Android文档预览openFile方法

  • 新增参数:coreUrl,内核离线包url,coreLocalPath优先级更高,即,如果coreLocalPath不为空,coreUrl参数无效。
  • 增加回调结果获取,返回状态码、状态信息、结果数据。
  • 解决插件内核首次安装重复弹框问题

2.1.1(2022-09-07)

Android文档预览openFile方法

  • 参数installOfflineCore默认为false,即默认不开启离线安装内核
  • 新增参数:coreLocalPath,内核安装包本机绝对路径
  • 解决打包APP变大问题
  • 更新README,添加内核在线地址,内核下载到本机路径方法
查看更多

平台兼容性

Android Android CPU类型 iOS
适用版本区间:4.4 - 11.0 armeabi-v7a:支持,arm64-v8a:支持,x86:支持 适用版本区间:9 - 14

原生插件通用使用流程:

  1. 购买插件,选择该插件绑定的项目。
  2. 在HBuilderX里找到项目,在manifest的app原生插件配置中勾选模块,如需要填写参数则参考插件作者的文档添加。
  3. 根据插件作者的提供的文档开发代码,在代码中引用插件,调用插件功能。
  4. 打包自定义基座,选择插件,得到自定义基座,然后运行时选择自定义基座,进行log输出测试。
  5. 开发完毕后正式云打包

付费原生插件目前不支持离线打包。
Android 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/android
iOS 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/ios

注意事项:使用HBuilderX2.7.14以下版本,如果同一插件且同一appid下购买并绑定了多个包名,提交云打包界面提示包名绑定不一致时,需要在HBuilderX项目中manifest.json->“App原生插件配置”->”云端插件“列表中删除该插件重新选择


一、注意事项

  • manifest.json->App模块配置不要勾选Android X5 Webview

  • 不要同时使用其他任何预览插件,否则,会引起打包冲突

  • 如遇预览失败,(1)把APP卸载,重新打基座运行,第一次运行会自动安装X5插件;(2)或者换手机(华为或小米)进行测试。

各位同学,对于插件使用还有疑问的,可以加QQ群(170683293)咨询。

二、快速上手

demo工程地址 或在右上角直接下载示例工程

开发工具:HBuilderX

Step1. 下载demo工程,使用HBuilderX打开

Step2. 下载本文插件

插件名称:Seal-ImageVideo

点击右上角试用或者购买,选择你的云打包插件

Step3. 选择manifest.json->App原生插件配置中加载云端插件

Step4. 使用插件

  • 在vue或nvue组件中,导入插件
const sealImageVideoModule = uni.requireNativePlugin("Seal-ImageVideo")
  • openFile方法(推荐):支持Android和IOS,在线预览图片,播放视频,支持jpg、jpeg、png、bmp、gif、mp4、mkv、avi等多种格式。
  • getX5CoreInfo方法(调试):获取内核安装信息,用于调试

(1)图片预览

/**
* 图片预览,支持jpg、jpeg、png、bmp、jpg、gif等多种常用图片格式
* 图片可以来源于列表或九宫格,传递给imageUrls数组
* @param {Object} fileUrl 图片url
* @param {Object} imageCurrentIndex 当前图片位置下标,从0开始
*/
openImage(fileUrl, imageCurrentIndex) {
    if (this.platform === 'android') {
        // Android
        sealOfficeOnlineModule.openFile({
            imageUrls: this.imageList,
            imageCurrentIndex, // 当前点击图片在imageUrls中的下标,从0开始,默认为0
            imageIndexType: 'number' // 图片底部指示器类型,默认为'dot',可选:'number':数字;'dot':点
        });
    } else if (this.platform === 'ios') {
        // IOS
        sealImageVideoModule.openFile(
            {
                url: fileUrl, // 同时支持在线和本地文档,三种参数传递方式,具体查看文档说明
                title: 'IOS图片预览', // 顶栏标题,默认为:APP名称
                topBarBgColor: '#3394EC' // 顶栏背景颜色,默认为:#177cb0(靛青)
            },
            res => {
                uni.showModal({
                    content: 'IOS图片预览事件结果:' + JSON.stringify(res)
                });
            }
        );
    }
},

(2)视频播放

/**
* 视频播放,支持市面上几乎所有的视频格式,包括mp4, flv, avi, 3gp, webm, ts, ogv, m3u8, asf, wmv, rm, rmvb, mov, mkv等18种视频格式
* 功能包括:全屏播放、锁屏、分享、画面比例调节、左边上下滑动调节亮度,右边上下滑动调节音量等
* 支持Android和IOS
* @param {Object} fileUrl 视频url
*/
openVideo(fileUrl) {
    sealOfficeOnlineModule.openFile(
        {
            videoUrl: fileUrl, // 视频在线url,此参数优先于图片预览和文档预览
            installOfflineCore: true, // 是否离线安装内核
            coreLocalPath: this.coreLocalPath // 离线安装内核本地路径
        },
        res => {
            uni.showModal({
                content: '播放视频事件结果:' + JSON.stringify(res)
            });
        }
    );
}

(3)获取内核信息,用于调试

/** 获取内核信息,用于调试 
* 返回结果格式
* {
*     'isCoreInited': false, // 内核是否加载
*     'coreVersion': 0, // 内核版本
*     'sdkVersion': 43967, // sdk版本
* }
*/
getX5CoreInfo() {
    const coreInfo = sealOfficeOnlineModule.getX5CoreInfo();
    console.log('coreInfo', coreInfo);
    uni.showModal({
        content: '插件内核信息:' + JSON.stringify(coreInfo)
    });
},

Step5. 调试

  • 制作自定义调试基座:在开发工具中点击“运行到手机或模拟器-》制作自定义调试基座”
  • 选择自定义调试基座:然后“运行到手机或模拟器-》基座运行选择-》自定义调试基座”
  • 连接真机,运行调试

三、openFile接口参数说明

参数名 说明 类型 是否必填 默认值 可选值
videoUrl 视频在线url,此参数优先于图片预览和文档预览 string
imageUrls 图片url数组,此参数优先于文档预览;长按图片底部弹出保存图片菜单,保存图片至相册,IOS端无此配置 array
installOfflineCore 是否离线安装插件内核,IOS端无此配置 bool false true
coreLocalPath 插件内核本地绝对路径,参考上面下载插件到本地用法,installOfflineCore=true时,必须配置,IOS端无此配置 string null
coreUrl 内核离线包url,coreLocalPath优先级更高,即,如果coreLocalPath不为空,coreUrl参数无效,IOS端无此配置 string null
imageCurrentIndex 当前点击图片在imageUrls中的下标,从0开始IOS端无此配置 int 0
imageIndexType 图片底部指示器类型,IOS端无此配置 string 'dot' 'number':数字;'dot':点

四、问题解决

问题一:

问题描述:真机测试有4部手机测试, 小米MAX3、坚果pro2 、华为P20 这个三个手机测试预览都能成功,小米redmi K30 预览 就不成功, "canLoadVideo": false, "canLoadX5": false, "coreVersion": 0, "sdkVersion": 43967, "canLoadX5FirstTimeThirdApp": false, "isCoreInited": true X5内核没有加载成功,反复卸载APP和重新打包基座好几次了,X5内核都是没有加载成功,这个问题该如何解决

后面想了一下可能是CPU支持类型的问题,

解决方案:manifest.json -APP常用其他设置 -支持CPU类型 armeabi-v7a arm64-v8a 两个都勾选的

重新打一下自定义基座 问题就解决了

隐私、权限声明

1. 本插件需要申请的系统权限列表:

android.permission.READ_EXTERNAL_STORAGE 读取 SD 卡中的内容 android.permission.WRITE_EXTERNAL_STORAGE 修改或删除 SD 卡中的内容 android.permission.INTERNET 访问网络连接

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问