快捷導(dǎo)航

微信小程序開發(fā)實(shí)現(xiàn)首頁彈框活動(dòng)引導(dǎo)功能

更新時(shí)間：2021年08月29日 09:51:16 作者：秋9

自己x實(shí)現(xiàn)的一個(gè)比較簡(jiǎn)單微信彈窗功能,主要就是教會(huì)大家對(duì)微信彈窗的用法和理解,這篇文章主要給大家介紹了關(guān)于微信小程序如何實(shí)現(xiàn)首頁彈框活動(dòng)引導(dǎo)功能的相關(guān)資料,需要的朋友可以參考下

1.需求

后臺(tái)可以配置活動(dòng)時(shí)間，在活動(dòng)期間，自動(dòng)在小程序首頁，以彈框形式顯示活動(dòng)圖片。用戶可以關(guān)閉活動(dòng)圖片的顯示。

1.管理后臺(tái)可以新增活動(dòng)時(shí)間段，是否彈框顯示，彈框圖片和活動(dòng)是否開啟配置

2.進(jìn)入小程序時(shí)，請(qǐng)求一下后臺(tái)是否有彈框活動(dòng)，如果有，就彈框顯示活動(dòng)圖片

2.數(shù)據(jù)庫設(shè)計(jì)

由于小程序彈框活動(dòng)是系統(tǒng)配置中的一項(xiàng)，直接使用公共的系統(tǒng)配置來存儲(chǔ)彈框活動(dòng)配置。

公共系統(tǒng)配置表結(jié)構(gòu)如下：

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后臺(tái)配置實(shí)現(xiàn)

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);
    }
 
    // 根據(jù)配置名稱獲取配置信息
    @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;
        }
    }
 
}

實(shí)現(xiàn)后的效果為：

4.微信小程序前端實(shí)現(xiàn)

小程序js實(shí)現(xiàn)

             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
                     })
                   }
                 }
               })

             },

小程序樣式

/*活動(dòng)彈框*/
.seckill{position: fixed;width:325px;height:164px;top:100px;right: 20px;}
.seckill-close{position: fixed;width:32px;height:32px;top:250px;right:160px;}

前端顯示

<!--活動(dòng)彈框-->
<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>

總結(jié)

到此這篇關(guān)于微信小程序開發(fā)實(shí)現(xiàn)首頁彈框活動(dòng)引導(dǎo)功能的文章就介紹到這了,更多相關(guān)微信小程序彈框活動(dòng)引導(dǎo)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: