1. DemandThe event time can be configured in the background. During the event, the event picture will be automatically displayed in a pop-up window on the mini program homepage. Users can turn off the display of active images. 1. In the management backend, you can add activity time periods, whether to display pop-up boxes, pop-up box pictures, and whether to enable activities. 2. When entering the mini program, request whether there is a pop-up box activity in the background. If so, a pop-up box will display the activity picture. 2. Database DesignSince the mini program pop-up activity is an item in the system configuration, the public system configuration is directly used to store the pop-up activity configuration. The public system configuration table structure is as follows: CREATE TABLE `sys_config` ( `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT 'Primary key', `configName` varchar(255) DEFAULT NULL COMMENT 'Configuration name', `configInfo` longtext COMMENT 'Configuration information', PRIMARY KEY (`id`) )ENGINE=MyISAM DEFAULT CHARSET=utf8; 3.Java background configuration implementationpublic class SysConfig extends CommonBean { public static String NAME_SECKILL="config_seckill"; //Seckill configuration private Long id; private String configName; // Configuration name private String configInfo; // Configuration information 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; // Update configuration public int update(SysConfig sysConfig){ return sysConfigDao.update(sysConfig); } // Get configuration information based on configuration name @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; } // Save configuration 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); // Determine whether it has been added, if yes, update, if no, add if (sysConfigDao.getConfigByName(configname) == null) { int result = sysConfigDao.add(sysConfig); return result; } else { int result = sysConfigDao.update(sysConfig); return result; } } } The effect after implementation is: 4. WeChat applet front-end implementationMini Program JS Implementation 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 }) } } }) }, Mini Program Style /*Activity pop-up window*/ .seckill{position: fixed;width:325px;height:164px;top:100px;right: 20px;} .seckill-close{position: fixed;width:32px;height:32px;top:250px;right:160px;} Front-end display <!--Activity pop-up box--> <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> SummarizeThis concludes this article about the development of WeChat mini-programs to implement the homepage pop-up box activity guidance function. For more relevant WeChat mini-program pop-up box activity guidance content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: Detailed steps and problem solving methods for installing MySQL 8.0.19 on Linux
>>: Detailed explanation of the knowledge points of using TEXT/BLOB types in MySQL
Table of contents 1. What is the use of provide/i...
Problem Description I want to use CSS to achieve ...
Preliminary Notes 1.Differences between Vue2.x an...
Use text-align, margin: 0 auto to center in CSS W...
Table of contents introduce 1. Pica 2. Lena.js 3....
Steps: 1. Install MySQL database 1. Download the ...
To facilitate the maintenance of MySQL, a script ...
Installation Environment 1. gcc installation To i...
In the process of product design, designers always...
This article records the installation and configu...
There are two files a.htm and b.htm. In the same d...
1: Define a stored procedure to separate strings ...
Nginx uses a fixed number of multi-process models...
Table of contents Before MySQL 5.6 After MySQL 5....
1. Add fields: alter table table name ADD field n...