腾讯云微搭低代码平台--绍河珍珠溯源_低代码平台扫码组件-CSDN博客

本文链接：https://blog.csdn.net/weixin_52028484/article/details/122395228

前端搭建

微搭中的数据源模块是一个比较容易搞混的地方，编写完数据源字段后，数据库的信息增添不容易找到

做测试的时候，如果是用的发布版本，经历页面上的改动后需要发布新的版本

前端搭建

首页搭建

首页分为3个部分，分别是大标题介绍、数据展示、扫码模块。因为数据库暂无相应的用户数据，所以这里先用静态数据做展示。

静态页面的搭建可以从页面右边获取到各种组件，这里就不赘述具体的实施方式

扫码模块本质上是给一个按钮绑定点击事件，利用微搭平台自带的添加事件窗口给按钮绑定点击后执行扫码动作，并且执行扫码成功的回调，该回调是在微搭的低代码编辑器中首页代码模块里面的handler中。具体实现方式：

打开后

进入低代码编辑器后

编辑完成后，回到主页面，打开顶部的预览区开关。点击“扫一扫溯源珍珠”（可以试着选择自己的微信二维码名片）。扫描成功后，会在控制台看到输出的event

可以看到，其中保存了我们想要的跳转链接路径，此时利用BOM api就可以实现页面的跳转

window.location.href = event.detail.value.result

介绍页搭建

介绍页分为3个部分、轮播图、列表项、选项卡。

变量的创建，选择上面的“+”号，填写变量标识、类型以及初始值（建议：这里统一把所有的数据都写到info中，是因为后续从数据库中拿出来的数据也是一个对象。如果为了方便分类在这里创建了如pic、introduction、details等多个变量，那么在与数据库对接的时候就不方便）

数据的绑定

选择对应的数据

这样数据就完成了动态的绑定。后面的列表项和选项卡的数据绑定也类似，在此就不再赘述。

后端搭建

数据源的创建

注意，这里的字段标识需要与介绍页中变量里的数据名称一致，字段名称随意看得懂即可。

添加完毕后找到右侧的管理数据

上传对应的图片和文字

添加完毕后回到数据源，找到方法，选择“查询列表”，点击方法测试

这里的“查询列表”方法的核心是where配置项，里面的三个参数key、rel、val其中key是用来寻找对应数据源中的数据，这里的参数包含一个"grade": "优"，那么它就会去寻找每组数据中哪一组数据里面包含了"grade": "优"这一键值对，并将该键值对所在的那一组数据返回。rel指的是关系，一般不改动

{
  "where": [
    {
      "key": "grade",
      "rel": "lte",
      "val": "优"
    }
  ]
}

前后端互动

现在只需要在扫码后，将对应页面的数据从数据源中拿来渲染上去即可，通过此前设置的id，给每个介绍页的网址后面加上?id=xxx（这里设为?id=001）并生成二维码，在首页扫描该带有?id=001的url二维码，并在window.location.search中获得。因为扫码后会自动跳转，所以在介绍页的生命周期钩子中找到onPageShow()在里面编写渲染数据的代码即可。结合上面的方式，完成数据从数据库渲染到页面上。

具体实现代码：