电商小程序09活动管理

简介: 电商小程序09活动管理



商家在日常运营中经常需要通过活动来进行推广和促销,我们在小程序中也需要考虑这部分的业务。本节我们讲解一下微搭低代码中如何实现活动的功能。

1 创建数据源

展示信息需要将信息存储到数据源中,我们这里新建一个活动的数据源,字段有标题、详情、轮播图、状态。

这里要注意详情我们是选择的富文本,富文本的好处是可以进行图文混排。而状态我们选择的是枚举值,枚举值分为未开始、进行中、已结束

为什么要设置成枚举值呢,是因为在首页展示的时候,需要根据状态进行过滤数据,只展示进行中的活动。

也有习惯将状态设置为数字的,这不是一个特别好的设计,因为数字默认你自己知道,日后别人维护程序的时候很难从具体的数字推断出业务的意义来。

2 详情页面搭建

活动我们分为首页的轮播图展示,及详情页的展示。需要先新建一个详情页,点击新建页面

详情页新建好之后,需要搭建布局,这里我们使用数据详情组件来实现,数据模型选择我们的活动管理

其他组件可以参考我这个,我搭建了图片组件用来显示轮播图,然后普通容器放置两个文本组件,设置布局为横向排列,两端对齐

接着选中页面组件,添加URL参数,这里设置为id

然后选中数据详情组件设置筛选条件,让数据标识等于我们的id

接着就是绑定数据,给每一个组件绑定具体的字段信息

3 首页轮播图搭建

在首页添加轮播图组件

然后在代码区创建一个数据表查询

选择我们的活动管理

这里需要设置过滤条件,条件是状态等于进行中

数据定义好之后就可以绑定到图片上,第一个图片绑定的表达式为

$w.activiteList.data.records[0].lbtp

点击的时候要打开页面,传入的参数是

([{key:"id",value:$w.activiteList.data.records[0]._id}])

按照同样的方法设置第二个图片,只是需要将数组的下标改为1

4 最终的效果

点击轮播图片,可以跳转到详情页,展示活动的具体信息

5 总结

我们本篇带着大家搭建了活动的具体功能,看似简单,过程中需要熟练掌握数据源的定义,变量的创建,数据绑定,页面传参等基本知识。除了掌握工具的用法外,尤其是在变量绑定的时候需要用到比较多的javascript的基本知识,编程基本功必须扎实才可以自如的搭建出想要的功能来。

相关文章
|
1月前
|
小程序 程序员 开发工具
电商小程序05用户注册
电商小程序05用户注册
|
1月前
|
前端开发 小程序 JavaScript
电商小程序04实现登录逻辑
电商小程序04实现登录逻辑
|
1月前
|
小程序 测试技术 uml
电商小程序01需求分析
电商小程序01需求分析
|
8天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的优购电商小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的优购电商小程序的详细设计和实现
31 0
|
1月前
|
缓存 小程序 API
电商小程序08调用缓存
电商小程序08调用缓存
|
1月前
|
小程序 数据安全/隐私保护 容器
电商小程序07显示用户个人信息
电商小程序07显示用户个人信息
|
1月前
|
小程序
电商小程序06用户审核
电商小程序06用户审核
|
1月前
|
小程序 前端开发 数据安全/隐私保护
电商小程序03登录页面开发
电商小程序03登录页面开发
|
1月前
|
存储 运维 小程序
电商小程序02数据源设计
电商小程序02数据源设计
|
15天前
|
小程序 前端开发 API
小程序全栈开发中的多端适配与响应式布局
【4月更文挑战第12天】本文探讨了小程序全栈开发中的多端适配与响应式布局。多端适配涉及平台和设备适应,确保统一用户体验;响应式布局利用媒体查询和弹性布局维持不同设备的布局一致性。实践中,开发者可借助跨平台框架实现多平台开发,运用响应式布局技术适应不同设备。同时,注意兼容性、性能优化和用户体验,以提升小程序质量和用户体验。通过这些方法,开发者能更好地掌握小程序全栈开发。