开发者最爱的轻量级解决方案！推荐一款基于原生 JavaScript 的简约消息提示插件，简洁灵活（带私活）

在现代的 Web 开发中，提供良好的用户反馈是至关重要的。

消息提示是其中一种最常见的方式之一，它可以用来向用户传达重要信息、警告或成功状态。

然而，为了简化开发者的工作并提供一种轻量级、易于集成的解决方案，Dream-Msg 应运而生。

Dream-Msg 是一个基于原生 JavaScript 的简约消息提示插件，本文将介绍该插件的主要特点、用法以及如何集成到你的项目中。

一、主要特点

1. 轻量级： Dream-Msg 插件非常轻量，不依赖于任何第三方库或框架，使其易于集成到任何 Web 项目中。

2. 简约美观： 插件提供了简洁美观的样式，并且集成了错误提示音。

3. 灵活性： 用户可以自定义消息内容、显示时长、手动关闭等参数，并且也融合了弹窗关闭函数回调功能。

二、用法示例

1. 引入插件： 在 HTML 文件中引入 Dream-Msg 的 JavaScript 文件。

   <script src="https://cdn.jsdelivr.net/gh/iGaoWei/Dream-Msg/lib/dream-msg.min.js"></script>

2. 显示消息： 调用 Dreamer.方法 来显示消息。

   info 提示

   // 默认
   Dreamer.info("您有一条新消息待处理，请及时查收！");
   //函数回调
   Dreamer.info("您有一条新消息待处理，请及时查收！",function () {
       alert("我是自定义事件");
   });
   //手动关闭
   Dreamer.info("您有一条新消息待处理，请及时查收！",0);
   //自动关闭
   Dreamer.info("您有一条新消息待处理，请及时查收！",2000);
   //提示音
   Dreamer.info("您有一条新消息待处理，请及时查收！",true);
   

   success 提示

   // 默认
   Dreamer.success("操作成功！");
   //函数回调
   Dreamer.success("操作成功！",function () {
       alert("我是自定义事件");
   });
   //手动关闭
   Dreamer.success("操作成功！",0);
   //自动关闭
   Dreamer.success("操作成功！",2000);
   //提示音
   Dreamer.success("操作成功！",true);
   

   warning 提示

   // 默认
   Dreamer.warning("系统警告！");
   //函数回调
   Dreamer.warning("系统警告！",function () {
       alert("我是自定义事件");
   });
   //手动关闭
   Dreamer.warning("系统警告！",0);
   //自动关闭
   Dreamer.warning("系统警告！",2000);
   //提示音
   Dreamer.warning("系统警告！",true);
   

   error 提示

   // 默认
   Dreamer.error("添加失败，请稍后再试！！");
   //函数回调
   Dreamer.error("添加失败，请稍后再试！！",function () {
       alert("我是自定义事件");
   });
   //手动关闭
   Dreamer.error("添加失败，请稍后再试！！",0);
   //自动关闭
   Dreamer.error("添加失败，请稍后再试！！",2000);
   //提示音
   Dreamer.error("添加失败，请稍后再试！！",true);
   

   loading 提示

   // 默认
   Dreamer.loading("加载中，请稍后")
   //自动关闭
   var closeMsg = Dreamer.loading("加载中，请稍后");
   setTimeout(function(){
       closeMsg();
   }, 4000);
   

   closeAll 关闭全部提示

   Dreamer.destroyAll();
   

三、结语

Dream-Msg 插件提供了简单而有效的方式来管理和显示消息提示，使其成为任何 Web 项目中增加用户反馈和交互的理想选择。

其轻量级、简约美观和灵活性使其适用于各种应用场景，无论是个人网站、博客，还是大型企业应用，都能从中受益。

通过 Dream-Msg，为你的用户提供更好的用户体验，让他们更容易理解和操作你的应用程序。

开源地址：

https://github.com/iGaoWei/Dream-Msg

写在最后（私活源码）

项目介绍

Jeepay是一套适合互联网企业使用的开源支付系统，支持多渠道服务商和普通商户模式。已对接微信支付，支付宝，云闪付官方接口，支持聚合码支付。

Jeepay使用Spring Boot和Ant Design Vue开发，集成Spring Security实现权限管理功能，是一套非常实用的web开发框架。

项目特点

· 支持多渠道对接，支付网关自动路由

· 已对接微信服务商和普通商户接口，支持V2和V3接口

· 已对接支付宝服务商和普通商户接口，支持RSA和RSA2签名

· 已对接云闪付服务商接口，可选择多家支付机构

· 提供http形式接口，提供各语言的sdk实现，方便对接

· 接口请求和响应数据采用签名机制，保证交易安全可靠

· 系统安全，支持分布式部署，高并发

· 管理端包括运营平台和商户系统

· 管理平台操作界面简洁、易用

· 支付平台到商户系统的订单通知使用MQ实现，保证了高可用，消息可达

· 支付渠道的接口参数配置界面自动化生成

· 使用spring security实现权限管理

· 前后端分离架构，方便二次开发

· 由原XxPay团队开发，有着多年支付系统开发经验

系统架构

Jeepay计全支付系统架构图

核心技术栈

软件名称	描述	版本
Jdk	Java环境	1.8
Spring Boot	开发框架	2.4.5
Redis	分布式缓存	3.2.8 或 高版本
MySQL	数据库	5.7.X 或 8.0 高版本
MQ	消息中间件	ActiveMQ 或 RabbitMQ 或 RocketMQ
Ant Design Vue	Ant Design的Vue实现，前端开发使用	2.1.2
MyBatis-Plus	MyBatis增强工具	3.4.2
WxJava	微信开发Java SDK	4.1.0
Hutool	Java工具类库	5.6.6

开发部署

· 系统开发：https://docs.jeequan.com/docs/jeepay/dev_serv

· 通道对接：https://docs.jeequan.com/docs/jeepay/dev_channel

· 线上部署：https://docs.jeequan.com/docs/jeepay/deploy

· 接口文档：https://docs.jeequan.com/docs/jeepay/payment_api

功能模块

Jeepay运营平台功能

Jeepay商户系统功能

系统截图

以下截图是从实际已完成功能界面截取

开源地址

扫码关注本号，后台回复 支付

扫码关注本号，后台回复 支付

持续关注本号，分享更多项目源码