在uni-app中实现网页版本聊天功能，并将其打包为App以支持关闭后接收消息及角标未读消息推送功能，需要结合一些第三方服务和原生插件。以下是一个简要的实现思路和代码案例。

1. 网页版聊天功能

首先，确保你的uni-app项目已经集成了聊天功能。通常，这涉及到WebSocket或Socket.IO等实时通信技术。

示例代码（使用WebSocket）：

// 在uni-app的某个页面或组件中
onReady() {
    this.socket = uni.connectSocket({
        url: 'wss://your-websocket-server-url',
        success: () => {
            console.log('WebSocket连接成功');
        },
        fail: (err) => {
            console.error('WebSocket连接失败', err);
        }
    });

    this.socket.onMessage((res) => {
        console.log('收到消息', res.data);
        // 更新聊天界面
    });

    this.socket.onError((err) => {
        console.error('WebSocket错误', err);
    });

    this.socket.onClose((res) => {
        console.log('WebSocket已关闭', res);
    });
}

2. 打包为App

使用HBuilderX将uni-app项目打包为原生App。这一步相对简单，只需在HBuilderX中选择“发行”->“原生App-云端打包”即可。

3. 关闭后接收消息

为了实现App关闭后仍能接收消息，你需要使用推送服务，如个推、极光推送等。以下以个推为例，展示如何在App端接收推送消息。

安装个推SDK（在manifest.json中配置）：

"plugins": {
    "getui": {
        "version": "x.x.x",  // 填写具体的版本号
        "provider": "your-provider-id"
    }
}

在App端接收推送消息：

在App的main.js或原生插件代码中注册推送服务，并处理接收到的消息。

// 示例：在App启动时注册推送服务（伪代码）
uni.onLaunch(() => {
    // 注册个推等推送服务
    // 个推SDK初始化代码...
    
    // 监听推送消息
    plus.push.addEventListener('receive', function(msg) {
        if (msg.aps) {
            // iOS推送消息处理
            console.log('收到iOS推送消息', msg.aps.alert);
            // 更新角标未读消息数
            plus.runtime.setBadgeNumber(yourUnreadMessageCount);
        } else {
            // Android推送消息处理
            console.log('收到Android推送消息', msg.payload);
            // 更新角标未读消息数
            plus.runtime.setBadgeNumber(yourUnreadMessageCount);
        }
    });
});

注意

• 以上代码为示例性质，具体实现需根据所选推送服务和业务需求进行调整。
• 角标未读消息数的更新逻辑需要根据实际业务逻辑实现，如从服务器获取未读消息数。
• 确保服务器能够正确推送消息到客户端，并处理各种可能的异常情况。