我的编程空间,编程开发者的网络收藏夹
学习永远不晚

微信小程序开发实现首页弹框活动引导功能

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

微信小程序开发实现首页弹框活动引导功能

1.需求

后台可以配置活动时间,在活动期间,自动在小程序首页,以弹框形式显示活动图片。用户可以关闭活动图片的显示。

1.管理后台可以新增活动时间段,是否弹框显示,弹框图片和活动是否开启配置

2.进入小程序时,请求一下后台是否有弹框活动,如果有,就弹框显示活动图片

2.数据库设计

由于小程序弹框活动是系统配置中的一项,直接使用公共的系统配置来存储弹框活动配置。

公共系统配置表结构如下:


CREATE TABLE `sys_config` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '主键',
  `configName` varchar(255) DEFAULT NULL COMMENT '配置名称',
  `configInfo` longtext COMMENT '配置信息',
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8;

3.Java后台配置实现


public class SysConfig  extends CommonBean {
 
    public static String NAME_SECKILL="config_seckill";//秒杀配置
 
    private Long id;
    private String configName;// 配置名称
    private String configInfo;// 配置信息
 
    public Long getId() {
        return id;
    }
 
    public void setId(Long id) {
        this.id = id;
    }
 
    public String getConfigName() {
        return configName;
    }
 
    public void setConfigName(String configName) {
        this.configName = configName;
    }
 
    public String getConfigInfo() {
        return configInfo;
    }
 
    public void setConfigInfo(String configInfo) {
        this.configInfo = configInfo;
    }
}

@Service("sysConfigService")
public class SysConfigServiceImpl<T> implements SysConfigService<T> {
 
    @Autowired
    private SysConfigDao sysConfigDao;
    // 更新配置
    public int update(SysConfig sysConfig){
        return sysConfigDao.update(sysConfig);
    }
 
    // 根据配置名称获取配置信息
    @Override
    public T getConfigByName(Class t, String configname) {
        SysConfig sysConfig = sysConfigDao.getConfigByName(configname);
        if (sysConfig == null) {
            return null;
        }
        T result = (T) new Gson().fromJson(sysConfig.getConfigInfo(), t);
        return result;
    }
 
    // 保存配置
    public int saveConfig(T t, String configname) {
        SysConfig sysConfig = new SysConfig();
        sysConfig.setConfigName(configname);
        Gson gson=new GsonBuilder().setDateFormat("yyyy-MM-dd HH:mm:ss").create();
        String json = gson.toJson(t);
        sysConfig.setConfigInfo(json);
        // 判断是否添加过,有就更新,没有就添加
        if (sysConfigDao.getConfigByName(configname) == null) {
            int result = sysConfigDao.add(sysConfig);
            return result;
        } else {
            int result = sysConfigDao.update(sysConfig);
            return result;
        }
    }
 
}

实现后的效果为:

4.微信小程序前端实现

小程序js实现


             getSysConfigSecKill() {
               app.$post(app.API_SysConfigSecKill, {}, (res) => {
                 if (res.statusCode == 0) {
                   let data = res.data;
                   if (data.openIndexPopWindow) {
                     this.setData({
                       seckillispopwindow: true,
                       seckillurl: data.popWindowPic
                     })
                   }
                 }
               })

             },

小程序样式



.seckill{position: fixed;width:325px;height:164px;top:100px;right: 20px;}
.seckill-close{position: fixed;width:32px;height:32px;top:250px;right:160px;}

前端显示


<!--活动弹框-->
<view wx:if="{{seckillispopwindow}}">
  <view>
    <image bindtap='seckill_go' class="seckill" class="lazy" data-src="{{seckillurl}}"></image>
    <image bindtap='seckill_close' class="seckill-close" class="lazy" data-src="../../images/close.png"></image>
  </view>
</view>

总结

到此这篇关于微信小程序开发实现首页弹框活动引导功能的文章就介绍到这了,更多相关微信小程序弹框活动引导内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

微信小程序开发实现首页弹框活动引导功能

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

微信小程序弹框功能代码如何实现

本篇内容介绍了“微信小程序弹框功能代码如何实现”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!1.提示框:wx.showToast实例:wx:
2023-06-26

微信小程序使用uni-app实现首页搜索框导航栏功能详解

这篇文章主要介绍了微信小程序使用uni-app实现首页搜索框导航栏功能,uni-app 是一个使用 Vue.js (opens new window)开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序
2022-11-13

小程序开发 page-container 页面容器弹出对话框功能的实现

这篇文章主要介绍了小程序开发 page-container 页面容器,弹出对话框,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2022-11-13

PHP开发微信小程序:如何实现自动回复功能?

PHP开发微信小程序:如何实现自动回复功能?微信小程序是一种轻量级的应用程序,非常适用于移动设备。在开发微信小程序时,自动回复功能是一个非常重要的功能,可以提供更好的用户体验。本文将介绍如何使用PHP语言开发微信小程序的自动回复功能,并提供
2023-10-27

微信小程序实现页面导航与传参功能详解

这篇文章主要为大家详细介绍一下微信小程序实现页面导航的几种方法以及帮助大家掌握微信小程序如何进行传递参数,感兴趣的朋友可以了解一下
2022-11-13

微信小程序开发如何实现地图功能

这篇文章主要讲解了“微信小程序开发如何实现地图功能”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“微信小程序开发如何实现地图功能”吧!基本使用地图组件使用起来也很简单。.wxml
2023-06-26

微信小程序云开发怎么实现搜索功能

本篇内容介绍了“微信小程序云开发怎么实现搜索功能”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!简单搜索功能实现WXML代码段
2023-06-30

使用微信小程序实现搜索框自动补全功能

使用微信小程序实现搜索框自动补全功能 随着移动互联网的发展,微信小程序成为了人们生活中不可或缺的一部分。在小程序中,搜索功能是非常常见的需求之一。为了提升用户体验,搜索框的自动补全功能是一个很好的加分项。本文将介绍如何使用微信小程序实现搜索
使用微信小程序实现搜索框自动补全功能
2023-11-21

微信小程序实现发动态功能的示例代码

最近做了一个校园拍卖小程序,想在里面添加一个类似校园圈功能,现在来一步一步实现,对微信小程序实现发动态功能感兴趣的朋友一起看看吧
2022-11-13

微信小程序开发文件上传功能怎么实现

这篇文章主要介绍了微信小程序开发文件上传功能怎么实现的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇微信小程序开发文件上传功能怎么实现文章都会有所收获,下面我们一起来看看吧。保存图片,我认为有两处需要保存 1、选
2023-06-26

uniapp开发微信小程序自定义顶部导航栏功能实例

uni-app是一个使用Vue.js开发跨平台应用的前端框架,下面这篇文章主要给大家介绍了关于uniapp开发微信小程序自定义顶部导航栏功能的相关资料,文中通过图文以及示例代码介绍的非常详细,需要的朋友可以参考下
2022-11-13

微信小程序使用uni-app开发小程序及部分功能实现详解

uni-app是一个使用Vue.js开发所有前端应用的框架,下面这篇文章主要给大家介绍了关于微信小程序使用uni-app开发小程序及部分功能实现的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-11-13

编程热搜

目录