mui+h5plus如何实现类似于微信收到消息弹窗效果

Question

环境

mui+h5plus

效果

收到消息,显示横幅通知,类似于微信收到好友消息的横幅通知

Answer 1

对于在mui+h5plus环境下实现类似微信收到消息弹窗效果，你可以使用HTML5 Plus的推送通知API来实现。下面是一个简单的示例：

var options = {cover:false};  
plus.push.createMessage("Hello,你有新的消息啦", "New Msg", options); 

在这个示例中，"Hello,你有新的消息啦"是通知的内容，"New Msg"是通知的标题，options是一个可选的参数对象，其中cover:false表示当在状态栏中存在相同id的消息时，不覆盖，继续添加。

然后，你还可以使用HTML5 Plus的事件监听机制来实现点击通知后的响应事件，例如：

// 监听点击消息事件
plus.push.addEventListener( "click", function ( msg ) {
    // 判断是从本地创建还是离线推送的消息
    switch( msg.payload ) {
        case "LocalMSG":
            outSet( "点击本地创建消息启动：" );
        break;
        default:
            outSet( "点击离线推送消息启动：");
        break;
    }
    // 提示点击的内容
    plus.nativeUI.alert( msg.content );
}, false );

这样，当你收到新的消息时，就会显示一个横幅通知，当用户点击这个通知时，就会弹出一个对话框显示消息的内容。