更新记录

1.0.0（2024-04-20）

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

平台兼容性

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

定制插件加QQ252797991

开发文档

• 插件集成步骤参考https://www.jianshu.com/p/830ccc503e29或官网

项目配置

• 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