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

网友投稿 661 2023-11-12

−目录1.需求 2.数据库设计 3.Java后台配置实现4.微信小程序前端实现总结

1.需求

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

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

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

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

2.数据库设计

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

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

?
1
2
3
4
5
6
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后台配置实现

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
@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实现

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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
})
}
}
})
},

小程序样式

?
1
2
3
/*活动弹框*/
.seckill{position: fixed;width:325px;height:164px;top:100px;right: 20px;}
.seckill-close{position: fixed;width:32px;height:32px;top:250px;right:160px;}

前端显示

?
1
2
3
4
5
6
7
<!--活动弹框-->
<view wx:if="{{seckillispopwindow}}">
<view>
<image bindtap=seckill_go class="seckill" src="{{seckillurl}}"></image>
<image bindtap=seckill_close class="seckill-close" src="../../images/close.png"></image>
</view>
</view>

总结

到此这篇关于微信小程序开发实

您可能感兴趣的文章:微信小程序自定义Dialog弹框微信小程序实现简单弹框效果微信小程序自定义弹框效果微信小程序实现自定义动画弹框/提示框的方法实例微信小程序实现弹框效果微信小程序之几种常见的弹框提示信息实现详解微信小程序开发之实现自定义Toast弹框微信小程序开发之toast等弹框提示使用教程微信小程序 modal弹框组件详解微信小程序自定义Modal弹框

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：程序 微信小程序 小程序 配置 实例
上一篇:券商架构解析
下一篇:微信小程序开发app.json全局配置实战指南
相关文章

 发表评论

暂时没有评论，来抢沙发吧~