电商小程序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的基本知识,编程基本功必须扎实才可以自如的搭建出想要的功能来。

相关文章
|
4月前
|
小程序 视频直播 UED
电商直播小程序系统开发:打造“直播+电商+社交”闭环
电商直播小程序成为商家与消费者互动的关键,通过微信提供的实时视频工具,实现流畅购物体验。系统功能包括直播预览、主播管理、红包互动、用户管理及闭环购物。它强化品牌效应,利用私域流量,简化流程并转化会员。开发涉及需求分析、设计规划、功能开发、测试优化及上线维护。企业需关注用户体验,以保持竞争力。寻求开发合作可联系相关人员。
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的社区网格化管理平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的社区网格化管理平台附带文章源码部署视频讲解等
53 0
基于springboot+vue.js+uniapp小程序的社区网格化管理平台附带文章源码部署视频讲解等
|
3月前
|
小程序 前端开发 JavaScript
【电商新机遇】支付宝小程序如何助你打造爆款电商解决方案?揭秘背后的技术奥秘!
【8月更文挑战第27天】本文详细介绍如何利用支付宝小程序构建电商应用,覆盖从项目初始化、页面设计、功能开发到数据分析的全流程。首先,需注册开发者账号并安装相关工具;随后创建项目,并按示例配置基本页面结构;接着设计商品列表等界面布局;再实现商品展示等功能;最后运用支付宝提供的工具进行数据分析,以优化用户体验及营销策略。跟随本教程,您将能打造出一款完整的电商小程序。
93 1
|
4月前
|
小程序
商家店铺电商小程序模板源码
商家店铺电商小程序模板源码
48 5
|
4月前
|
开发框架 小程序 前端开发
私域电商小程序系统开发:提供可行的电商解决方案
私域电商小程序助广州企业融合线上线下业务,利用智能手机普及与网络技术,提供个性化购物体验。开发涉及需求分析、UI设计、前后端开发及测试上线。技术要点包括微信小程序框架、前端后端技术及安全优化。市场竞争需关注用户需求、特色服务、技术创新与合作推广。通过差异化策略抓住市场机遇。
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的学生毕业管理小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的学生毕业管理小程序附带文章源码部署视频讲解等
37 1
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的高校社团管理小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的高校社团管理小程序的详细设计和实现(源码+lw+部署文档+讲解等)
37 1
|
4月前
|
小程序 安全 UED
百果园社区电商小程序开发:打造私域精准营销发展趋势
百果园借助社区电商小程序转型,拓展线上渠道,增强品牌形象,降低运营成本,适应市场变化。小程序提供实时购物、社群互动、商家入驻及优惠活动,强调用户体验、功能丰富性和安全性,成为品牌与消费者连接的新桥梁。
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的校园疫情防控管理平台小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的校园疫情防控管理平台小程序附带文章源码部署视频讲解等
27 0
|
4月前
|
小程序
企业相册名片管理小程序模板
微信小程序个人名片+公司信息,增添公司信息,增添企业信息,编辑个人信息,查看更多,名片通讯录。
39 0

热门文章

最新文章