WeChat applet development realizes the home page pop-up box activity guidance function

WeChat applet development realizes the home page pop-up box activity guidance function

1. Demand

The 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 Design

Since 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 implementation

public 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 implementation

Mini 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>

Summarize

This 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 explanation of the 3 common pop-up prompts used in WeChat applets
  • WeChat Mini Program Practice: Custom Modal Pop-up Window (8)
  • How to implement custom modal pop-up window encapsulation in WeChat applet
  • WeChat applet implements custom picker selector pop-up content
  • WeChat applet achieves beautiful pop-up effect
  • Detailed explanation of WeChat applet custom pop-up window implementation (universal)
  • How to implement the WeChat applet vant pop-up component
  • WeChat applet pop-up window custom example code
  • WeChat applet form pop-up example
  • Detailed explanation of WeChat applet custom modal pop-up component

<<:  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

Recommend

Examples of using provide and inject in Vue2.0/3.0

Table of contents 1. What is the use of provide/i...

Additional instructions for using getters and actions in Vuex

Preliminary Notes 1.Differences between Vue2.x an...

Example code for using text-align and margin: 0 auto to center in CSS

Use text-align, margin: 0 auto to center in CSS W...

Top 10 Js Image Processing Libraries

Table of contents introduce 1. Pica 2. Lena.js 3....

MySQL green decompression version installation and configuration steps

Steps: 1. Install MySQL database 1. Download the ...

Detailed explanation of how to use grep to obtain MySQL error log information

To facilitate the maintenance of MySQL, a script ...

Centos7.3 How to install and deploy Nginx and configure https

Installation Environment 1. gcc installation To i...

Analysis of product status in interactive design that cannot be ignored in design

In the process of product design, designers always...

MySQL server 5.7.20 installation and configuration method graphic tutorial

This article records the installation and configu...

Example of using #include file in html

There are two files a.htm and b.htm. In the same d...

Implementation of mysql split function separated by commas

1: Define a stored procedure to separate strings ...

Detailed explanation of Nginx process scheduling problem

Nginx uses a fixed number of multi-process models...

Does Mysql ALTER TABLE lock the table when adding fields?

Table of contents Before MySQL 5.6 After MySQL 5....

How to add fields and comments to a table in sql

1. Add fields: alter table table name ADD field n...