更新记录

1.0.11（2024-12-30）

优化内部逻辑

1.0.10（2024-12-17）

ios增加回调

1.0.9（2024-12-11）

更新demo

平台兼容性

Vue2	Vue3
√	√

App	快应用	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
HBuilderX 3.6.8，Android：4.4，iOS：9，HarmonyNext：不确定	×	×	×	×	×	×

钉钉小程序	快手小程序	飞书小程序	京东小程序	鸿蒙元服务
×	×	×	×	×

H5-Safari	Android Browser	微信浏览器(Android)	QQ浏览器(Android)	Chrome	IE	Edge	Firefox	PC-Safari
×	×	×	×	×	×	×	×	×

自定义锁屏界面，类似QQ音乐在锁屏时动态刷新歌词封面的效果

相关插件推荐

app、H5、短信启动拉起唤醒其他app、添加桌面快捷方式https://ext.dcloud.net.cn/plugin?id=17817
自定义锁屏界面，类似QQ音乐在锁屏时动态刷新歌词封面的效果https://ext.dcloud.net.cn/plugin?id=17729
动态切换桌面icon图标实现类似双十一、过年时app桌面图标自动变化的效果支持vue2vue3https://ext.dcloud.net.cn/plugin?id=18062
长按桌面图标快捷菜单入口shortcut3dtouchhttps://ext.dcloud.net.cn/plugin?id=10475

集成步骤

拷贝demo里的nativeResources、Info.plist、AndroidManifest.xml文件到项目根目录
集成插件步骤请参考https://www.cnblogs.com/wenrisheng/p/18323027
某些品牌的android手机如果要展示锁屏通知的话，需要在app的权限的通知权限里开启锁屏通知，并且在通知对应的频道里开启锁屏权限，否则锁屏后通知会展示不出来
如果运行的是demo，demo导入HBuilderX后,将项目名称改为因为名称，避免某些版本HB运行iOS闪退，如果还是不行，按照直接copy demo里的代码到项目里

接口


import {
    UTSAVPlayer,
    UTSLockScreenView
} from "@/uni_modules/wrs-uts-lockscreenview"
var player = new UTSAVPlayer()

Android接口

创建通知频道 android 8以后需要跟每个通知归类给某个频道，就是给通知消息分类的意思


var params = {
    channelId: channelId,
    channelName: "支付channel",
    importance: 4, // 3: default 4: high 2: low 5: max 1: min 0: none
    lockscreenVisibility: 1, //1: public 0: private -1: secret
    description: "收付款通知channel"
}
UTSLockScreenView.createChannel(params)

创建或修改正常系统通知，采用的是系统通知界面UI


let contentTitle = "手机支付12元"
var params = {}
params.notification = {
    channelId: this.channelId,
    contentTitle: contentTitle,
    contentText: "你购买水果支付了12元",
    visibility: 1, // 1: public 0: private -1: secret
    smallIcon: { // 小图标
        type: "resource", // 固定写死
        defType: "drawable", // 固定写死
        name: "not" // nativeResources/android/res/drawable下的图片文件名，可以替换成自己的图片，不要带文件后缀
    },
    autoCancel: false,
    priority: 1, // 1: high 0: default -1: low -2:min 2: max
    progress: { // 进度条，非必填
        max: this.max,
        progress: this.index,
        indeterminate: true
    }
}
params.channel: {
    channelId: channelId,
    channelName: "支付channel",
    importance: 4, // 3: default 4: high 2: low 5: max 1: min 0: none
    lockscreenVisibility: 1, //1: public 0: private -1: secret
    description: "收付款通知channel"
},
params.id = this.notificationId // 通知id,自定义一个ID，后面修改或删除通知都需要这个id
UTSLockScreenView.notificationNotify(params)

取消正常系统通知


UTSLockScreenView.notificationCancel({
    id: this.notificationId
})

创建或修改锁屏通知


var params = {}
let channelId = this.channelId
let notification = this.getNotificationParams(contentTitle, true)
params.data = [{
    id: this.notificationId,
    channel: {
        channelId: channelId,
        channelName: "支付channel",
        importance: 4, // 3: default 4: high 2: low 5: max 1: min 0: none
        lockscreenVisibility: 1, //1: public 0: private -1: secret
        description: "收付款通知channel"
    },
    notification: {
        channelId: this.channelId,
        contentTitle: contentTitle,
        contentText: "你购买水果支付了12元",
        visibility: 1, // 1: public 0: private -1: secret
        smallIcon: { // 小图标
            type: "resource", // 固定写死
            defType: "drawable", // 固定写死
            name: "not" // nativeResources/android/res/drawable下的图片文件名，可以替换成自己的图片，不要带文件后缀
        },
        autoCancel: false,
        priority: 1, // 1: high 0: default -1: low -2:min 2: max
        progress: { // 进度条，非必填
            max: this.max,
            progress: this.index,
            indeterminate: true
        },
        actions: [ // 给消息通知添加按钮，可选
        {
        action: "before", // 用于按钮点击时事件回调标识
        title: "上一个", 
        requestCode: 100,
        flags: 67108864,
        icon: { // 按钮图标
            type: "resource",
            defType: "drawable",
            name: "before"
        }
    },
    {
        action: "play",
        title: "播放",
        requestCode: 100,
        flags: 67108864,
        icon: {
            type: "resource",
            defType: "drawable",
            name: "play"
        }
    }, {
        action: "next", // 动作名称，对标registerReceiver按钮事件回调里的按钮标识
        title: "下一个",
        requestCode: 100,
        flags: 67108864,
        icon: {
            type: "resource",
            defType: "drawable",
            name: "next"
        }
      }

        ],
        customContentView: { // 自定义通知界面UI，非必填
            id: "view_remote_progress",// 对应nativeResources/android/res/layout下的通知布局文件名称
            datas: [  // datas节点为刷新自定义布局的数据
                {  
                    settingType: "setTextViewText", // 设置文本
                    id: "titleTxtView", // 布局文件下文本控件的id,如 android:id="@+id/titleTxtView"，则id为titleTxtView
                    text: "xxx" // 文本值
                }, {
                    settingType: "setTextViewText",
                    id: "progressStartTxtView",
                    text: this.index + ""
                },
                {
                    settingType: "setTextViewText",
                    id: "progressEndTxtView",
                    text: this.max + ""
                }, {
                    settingType: "setImageViewBitmap", // 设置图片
                    id: "bgImgView", //  布局文件下图片控件的id
                    url: bgImgUrl // 本地图片绝对地址
                }, {
                    settingType: "setProgressBar",// 设置进度条
                    id: "progressBar",//  布局文件下进度条控件的id
                    max: this.max,  // 进度条最大值，整形
                    progress: this.index, // 当前进度，整形
                    indeterminate: false
                },
                {
                    settingType: "setOnClickPendingIntent", // 设置点击事件
                    id: "btn1", // 控件ID
                    action: "before", // 事件回调标识
                    title: "上一个",
                    requestCode: 110, //
                    flags: 67108864,
                    icon: {
                        type: "resource",
                        defType: "drawable",
                        name: "before"
                    }
                },
            ]
        }
    }
}]
let str = JSON.stringify(params)
UTSLockScreenView.startNotificationService(str)

取消删除锁屏通知


UTSLockScreenView.stopNotificationService({})

ios接口

ios里要想修改锁屏内容，需要播放后台音乐(可以是无声音乐)

开启后台音乐模式


// 设置音频支持后台播放
UTSLockScreenView.setCategory("playback")

开始接收远程通知事件


UTSLockScreenView.beginReceivingRemoteControlEvents()

结束接收远程通知事件


UTSLockScreenView.endReceivingRemoteControlEvents()

配置锁屏界面按钮激活和点击事件


var params = {}
params.previousTrackCommand = { // 上一首
    isEnabled: true,
    addTarget: true
}
params.nextTrackCommand = { // 下一首
    isEnabled: true,
    addTarget: true
}
params.stopCommand = { // 
    isEnabled: true,
    addTarget: true
}
params.pauseCommand = { // 暂停
    isEnabled: true,
    addTarget: true
}
params.togglePlayPauseCommand = { // 播放
    isEnabled: true,
    addTarget: true
}
params.seekForwardCommand = {
    isEnabled: true,
    addTarget: true
}
params.seekBackwardCommand = {
    isEnabled: true,
    addTarget: true
}

params.changePlaybackPositionCommand = { // 进度条
    isEnabled: true,
    addTarget: true
}

UTSLockScreenView.configRemoteCommandCenter(params, (resp) => {
    this.showMsg(JSON.stringify(resp))
    switch (resp.commandType) {
        case "changePlaybackPositionCommand":
            let positionTime = resp.positionTime
            player.seekTotime({
                positionTime: positionTime
            })
            break;
        case "pauseCommand":
            player.pause()
            break;
        case "togglePlayPauseCommand":
            player.play()
            break;
        default:
            break;
    }
})

播放音乐


var url = plus.io.convertLocalFileSystemURL('_www/static/music1.mp3');
var params = {}
params.url = url
params.volume = 1 // 音量，0～1
params.isMuted = false // 是否静音  
params.autoPlay = true // 是否自动播放
player.setUrl(params, (resp) => {
    // 开个定时器，刷新锁屏界面UI
    if (this.intervalId) {
        clearInterval(this.intervalId);
    }
    this.intervalId = setInterval(() => {
        // 刷新锁屏界面UI
        this.setNowPlayingInfo()
        this.index++
    }, 1000); // 每秒打印一次消息
})

开始播放


player.play()

暂停播放


player.pause()

获取当前播放数据


let playerInfo = player.getPlayerInfo()

获取app状态数据


let appInfo = getAppInfo()
// 0: active 1: inactive 2:background
let applicationState = appInfo.applicationState

刷新锁屏界面UI


// 刷新锁屏界面UI
var artwork = plus.io.convertLocalFileSystemURL('_www/static/music1.jpg');
var params = {}
// 标题
params.title = "兰亭序" + this.index
 //设置歌手名
params.artist = "周杰伦"
//设置专辑名
params.albumTitle = "兰亭序专辑"
// 总时长
params.playbackDuration = playerInfo.currentItem.duration
// 当前播放时长
params.elapsedPlaybackTime = playerInfo.currentItem.currentTime
//设置播放速率
params.playbackRate = playerInfo.rate
//设置显示的海报图片
params.artwork = artwork
UTSLockScreenView.setNowPlayingInfo(params, (resp)=>{

})

置空锁屏界面


UTSLockScreenView.setNowPlayingInfoNull((resp)=>{

})

自定义锁屏界面，类似QQ音乐在锁屏时动态刷新歌词封面的效果自定义锁屏界面 QQ音乐在锁屏界面 动态刷新歌词封面的效果

更新记录

1.0.11（2024-12-30）

1.0.10（2024-12-17）

1.0.9（2024-12-11）

平台兼容性

自定义锁屏界面，类似QQ音乐在锁屏时动态刷新歌词封面的效果

相关插件推荐

集成步骤

接口

Android接口

ios接口

隐私、权限声明

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

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

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

读写外接U盘、移动硬盘、SD卡文件、选择系统文件、支持android和ios

高德地图点标记导航离线地图-原生

腾讯x5webview支持离线内核

本地HttpServer-静态站点-getpost请求-文件上传下载-本地HLS(m3u8)视频播放

设置桌面应用角标badge消息数量Android、iOS、纯血鸿蒙next

自定义锁屏界面，类似QQ音乐在锁屏时动态刷新歌词封面的效果 自定义锁屏界面 QQ音乐在锁屏界面 动态刷新歌词封面的效果

更新记录

1.0.11（2024-12-30）

1.0.10（2024-12-17）

1.0.9（2024-12-11）

平台兼容性

自定义锁屏界面，类似QQ音乐在锁屏时动态刷新歌词封面的效果

相关插件推荐

集成步骤

接口

Android接口

ios接口

隐私、权限声明

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

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

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

读写外接U盘、移动硬盘、SD卡文件、选择系统文件、支持android和ios

高德地图点标记导航离线地图-原生

腾讯x5webview支持离线内核

本地HttpServer-静态站点-getpost请求-文件上传下载-本地HLS(m3u8)视频播放

设置桌面应用角标badge消息数量Android、iOS、纯血鸿蒙next

Modal title

自定义锁屏界面，类似QQ音乐在锁屏时动态刷新歌词封面的效果自定义锁屏界面 QQ音乐在锁屏界面动态刷新歌词封面的效果