更新记录

1.2.0（2024-07-03）

本次主要更新： 1.修复有时候 画中画黑屏的情况

1.1.0（2023-05-04）

本次主要更新： 1.增加与弹出内容交互 2.增加隐藏系统按钮

1.0.0（2023-04-28）

首次提交

平台兼容性

原生插件通用使用流程：

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原生插件配置”->”云端插件“列表中删除该插件重新选择

KJ-Pip

应用外、全局、后台悬浮窗、画中画、在其他应用上层显示(ios)

注意事项

1.需要配置manifest.json->App常用其它设置->后台运行能力 audio

使用

<template>
    <view class="content">
        <button type="primary" @click="initPip1">初始化(正方形弹窗)</button>
        <button type="primary" @click="initPip2">初始化(横向弹窗)</button>
        <button type="primary" @click="initPip3">初始化(竖向弹窗)</button>
        <button type="primary" @click="openPip1">打开弹窗(本地html)</button>
        <button type="primary" @click="openPip2">打开弹窗(网站)</button>
        <button type="primary" @click="closePip">关闭弹窗</button>
        <view class="title">-------与弹窗内容交互-------</view>
        <button type="primary" @click="webView_evaluateJavaScript">webView执行js</button>
        <button type="primary" @click="webView_load">webView加载url</button>
        <button type="primary" @click="onH5SendDataCallBack">监听网页发送的数据</button>

        <button type="primary" @click="nav">nav</button>
        <input />
        <textarea></textarea>
    </view>
</template>

<script>
    const KJPip = uni.requireNativePlugin('KJ-Pip');
    export default {
        data() {
            return {

            }
        },
        onLoad() {
            var globalEvent = uni.requireNativePlugin('globalEvent');
            globalEvent.addEventListener('onPip', function(res) {
                console.log("onPip:" + JSON.stringify(res));
                if (res.method == "willStartPip") {
                    console.log("即将开启画中画");
                } else if (res.method == "didStartPip") {
                    console.log("已经开启画中画");
                } else if (res.method == "failedStartPip") {
                    console.log("开启画中画失败");
                } else if (res.method == "willStopPip") {
                    console.log("即将关闭画中画");
                } else if (res.method == "didStopPip") {
                    console.log("已经关闭画中画");
                } else if (res.method == "restorePip") {
                    console.log("恢复");
                }
            });
            globalEvent.addEventListener('onWebview', function(res) {
                console.log("onWebview:" + JSON.stringify(res));
                if (res.method == "finish") {
                    console.log("页面加载完成");
                } else if (res.method == "fail") {
                    console.log("加载失败");
                }
            });
            setTimeout((res) => {
                this.initPip1();
            }, 500)
            this.onH5SendDataCallBack();
        },
        methods: {
            initPip(shape) {
                var dic = {
                    "shape": shape, //弹窗形状 square(正方形) landscape(横向) portrait(竖向)
                    // "isShowSystemBtn": true, //是否显示 快进 后退 按钮
                    // "isShowSystemBtnV2": true //是否显示 快进 播放/暂停 后退 按钮、进度条、灰色背景
                }
                KJPip.initPip(dic)
            },
            initPip1() {
                this.initPip("square");
            },
            initPip2() {
                this.initPip("landscape");
            },
            initPip3() {
                this.initPip("portrait");
            },
            openPip(url) {

                KJPip.isPictureInPictureActive((res) => { //是否当前的画中画处于活跃状态
                    console.log("isPictureInPictureActive:" + JSON.stringify(res));
                })
                KJPip.isPictureInPictureSuspended((res) => { //是否当前的画中画处于暂停状态
                    console.log("isPictureInPictureSuspended:" + JSON.stringify(res));
                })
                KJPip.isPictureInPicturePossible((res) => { //是否当前的画中画功能可用
                    console.log("isPictureInPicturePossible:" + JSON.stringify(res));
                    if (res.result == false) { //避免不能打开的情况
                        KJPip.closePip();
                        this.initPip1();
                        setTimeout((res) => { //不能init之后，立即打开，一定要加延迟
                            this.openPip(url);
                        }, 500)
                    }
                })
                KJPip.isPictureInPictureSupported((res) => { //是否支持的画中画功能
                    console.log("isPictureInPictureSupported:" + JSON.stringify(res));
                })
                var dic = {
                    "url": url
                }
                KJPip.openPip(dic, (res) => {
                    console.log("openPip:" + JSON.stringify(res));
                })
            },
            openPip1() {
                this.openPip(plus.io.convertLocalFileSystemURL("hybrid/html/index.html"));
            },
            openPip2() {
                this.openPip("https://ext.dcloud.net.cn/publisher?id=22130");
            },
            closePip() {
                KJPip.closePip()
            },
            webView_evaluateJavaScript() {
                var dic = {
                    "js": "changeImg()"
                }
                KJPip.webView_evaluateJavaScript(dic, (res) => {
                    console.log("webView_evaluateJavaScript:" + JSON.stringify(res));
                })
            },
            webView_load() {
                var dic = {
                    "url": "https://www.baidu.com/"
                }
                KJPip.webView_load(dic, (res) => {
                    console.log("webView_load:" + JSON.stringify(res));
                })
            },
            onH5SendDataCallBack() { //注意ios16之后，弹出里的内容不能点击
                KJPip.onH5SendDataCallBack((res) => {
                    console.log("onH5SendDataCallBack:" + JSON.stringify(res));
                    uni.showModal({
                        title: "监听网页发送的数据",
                        content: JSON.stringify(res)
                    })
                })
            },
            nav() {
                uni.navigateTo({
                    url: "/pages/index/index2"
                })
            }
        }
    }
</script>
<style>
    .title {
        text-align: center;
        margin-top: 8px;
        margin-bottom: 8px;
    }
</style>