更新记录

1.0.2（2024-09-19）

android增加前台service权限

1.0.1（2024-05-06）

优化性能

1.0.0（2024-04-20）

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

平台兼容性

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

开发文档

集成插件步骤请参考https://www.cnblogs.com/wenrisheng/p/18323027

项目配置

Android增加权限


"<uses-permission android:name=\"android.permission.POST_NOTIFICATIONS\"/>",
"<uses-permission android:name=\"android.permission.FOREGROUND_SERVICE\"/>",

某些品牌的手机如果要展示锁屏通知的话，需要在app的权限里开启锁屏通知，并且在通知对应的频道里开启锁屏权限，否则锁屏后通知会展示不出来
增加Android资源下载demo示例，将项目里的nativeResources文件夹拷贝到自己的项目下
ios后台模式增加audio


/* ios打包配置 */
"ios" : {
    "UIBackgroundModes" : "audio"
}

接口


    import {
    setNowPlayingInfoNull,
    getAppInfo,
    startNotificationService,
    stopNotificationService,
    configRemoteCommandCenter,
    beginReceivingRemoteControlEvents,
    setNowPlayingInfo,
    createChannel,
    notificationNotify,
    notificationCancelAll,
    notificationCancel,
    UTSAVPlayer,
    setAVAudioSession
} 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"
}
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
notificationNotify(params)

取消正常系统通知


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"
                    }
                },
            ]
        }
    }
}]
startNotificationService(params)

取消删除锁屏通知


stopNotificationService({})

ios接口

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

开启后台音乐模式


setAVAudioSession({})

开始接收远程通知事件


beginReceivingRemoteControlEvents()

结束接收远程通知事件


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
}

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
setNowPlayingInfo(params)

置空锁屏界面


setNowPlayingInfoNull()

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

更新记录

1.0.2（2024-09-19）

1.0.1（2024-05-06）

1.0.0（2024-04-20）

平台兼容性

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

相关插件推荐

开发文档

项目配置

接口

Android接口

ios接口

隐私、权限声明

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

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

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

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

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

腾讯x5webview支持离线内核

读取本地相册图片视频音频，可自定义UI界面

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

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

更新记录

1.0.2（2024-09-19）

1.0.1（2024-05-06）

1.0.0（2024-04-20）

平台兼容性

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

相关插件推荐

开发文档

项目配置

接口

Android接口

ios接口

隐私、权限声明

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

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

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

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

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

腾讯x5webview支持离线内核

读取本地相册图片视频音频，可自定义UI界面

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

Modal title

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