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

  • 相关阅读:
    如何使用Ruby 多线程爬取数据
    浅析前端的堆栈原理以及深浅拷贝原理
    机器人上位机探索
    Java并发编程实战(1)
    Python-井字棋
    分组排序取第一条数据 SQL写法
    运维管理数智化:数据与智能运维场景实践
    java遇到的问题
    Unity-射线检测
    ElasticSearch DSL语法
  • 原文地址:https://blog.csdn.net/u012877217/article/details/136136550