• 电商小程序09活动管理



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

    1 创建数据源

    展示信息需要将信息存储到数据源中,我们这里新建一个活动的数据源,字段有标题、详情、轮播图、状态。
    在这里插入图片描述
    这里要注意详情我们是选择的富文本,富文本的好处是可以进行图文混排。而状态我们选择的是枚举值,枚举值分为未开始、进行中、已结束
    在这里插入图片描述
    为什么要设置成枚举值呢,是因为在首页展示的时候,需要根据状态进行过滤数据,只展示进行中的活动。

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

    2 详情页面搭建

    活动我们分为首页的轮播图展示,及详情页的展示。需要先新建一个详情页,点击新建页面
    在这里插入图片描述
    详情页新建好之后,需要搭建布局,这里我们使用数据详情组件来实现,数据模型选择我们的活动管理
    在这里插入图片描述
    其他组件可以参考我这个,我搭建了图片组件用来显示轮播图,然后普通容器放置两个文本组件,设置布局为横向排列,两端对齐
    在这里插入图片描述
    接着选中页面组件,添加URL参数,这里设置为id
    在这里插入图片描述
    然后选中数据详情组件设置筛选条件,让数据标识等于我们的id
    在这里插入图片描述
    接着就是绑定数据,给每一个组件绑定具体的字段信息
    在这里插入图片描述

    3 首页轮播图搭建

    在首页添加轮播图组件
    在这里插入图片描述
    然后在代码区创建一个数据表查询
    在这里插入图片描述
    选择我们的活动管理
    在这里插入图片描述
    这里需要设置过滤条件,条件是状态等于进行中
    在这里插入图片描述
    数据定义好之后就可以绑定到图片上,第一个图片绑定的表达式为
    在这里插入图片描述

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

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

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

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

    4 最终的效果

    点击轮播图片,可以跳转到详情页,展示活动的具体信息
    在这里插入图片描述

    5 总结

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

  • 相关阅读:
    软件测试和硬件测试的区别及概念
    前端框架Vue学习 ——(六)Vue组件库Element
    Redis基本内容
    【Unity】U3D ARPG游戏制作实例(一)EasyTouch5完整示例
    大数据-玩转数据-Flink CEP编程
    第7讲:v-bind属性绑定,v-model双向绑定,v-on事件监听使用
    解决navicat premium连接数据库自动断开问题
    大三,请问现在自学Java还来得及吗?
    微信小程序rich-text里面写单行溢出显示省略号在ios中不显示的问题
    springboot同城流浪动物救助与收养网站
  • 原文地址:https://blog.csdn.net/u012877217/article/details/136136550