1.5项目点赞与分享功能的设置|学习笔记(一)

简介: 快速学习1.5项目点赞与分享功能的设置

开发者学堂课程【低代码认证-第一章:项目评选系课程1.5项目点赞与分享功能的设置】学习笔记,与课程紧密联系,让用户快速学习知识。  

课程地址:https://developer.aliyun.com/learning/course/1007/detail/15057


项目点赞与分享功能的设置


内容介绍

一、功能介绍

二、实操演练

三、点赞功能

四、课程总结


一、功能介绍

分享功能:点击可以将喜欢的项目链接复制,分享给其他人,他人可以点击链接查看相关的数据。

访问功能:点击进入到当前项目详情页,查看更多项目介绍。

点赞功能:点击为喜欢的项目投票,每人仅限一票。

图片1.png

相关接口功能介绍:

图片2.png

接口 :/v1/form/updateFormData.json 。

接口作用 :更新表单中指定组件值

用法:请求类型: POST 自动加载:关闭

请求地址: /dingtalk/web/ 应用

AppType/v1/form/updateFormData.ison 参数: forminstld 要更新的表单数据ID

updateFormDatalson 要更新的表单组件值

接口 : /v1/form/saveFormData.json 接口作用 :新增表单实例

用法:请求类型: POST 自动加载:关闭

请求地址: /dingtalk/web/ 应用

AppType/v1/form/saveFormData.ison 参数: formUuid 表单 ID

appType 应用 ID

formDatalson 表单数据

实现功能:

当点击分享时,弹出需要分享的链接并可以进行复制

实现步骤:

容器绑定点击动作>>在动作面板内书写相关逻辑

如右图所示:

图片3.png

弹出的是一个弹框,后面定义了 name ,里面就是获取到的循环数据里面的项目名称。获取项目名称之后,同样通过 API 方法将链接拼接上项目名称,赋值给对话框内的输入框组件。然后再去配置 nok ,也就是对话框的确定时间。

右图当中的 bug 为断点。这里是用于查看当点击时是否触发了点击事件。

在弹窗之后是否获取到内容,也就是获取循环里面的项目名称。

点赞功能配置流程:

图片4.png

在项目展示页面,这个自定义页面当中获取项目表达里面的项目数据,也就是获取点赞的数据,获取完成后,文本也是点赞的文本绑定获取的点赞数据进行展示。

再给点赞容器绑定上动作。这里绑定的动作用于去查询当前登录人是否已投票,如果当前登录人已投票,那么返回到项目展示页面当中进行弹窗提醒,如果没有在投票中间表当中记录投票的人员,并且更新项目点赞数,更新到项目数据当中。

通过给文本绑定变量数据源,控制点赞数据。

步骤:选择文本组件>>默认值绑定变量>>循环内数据默认用 item 取循环值>>判断是否有值并展示相关数据,有值展示值,没有展示0。

图片5.png

 

二、实操演练

实现点击分享时弹出分享链接,并且可以进行复制,所以首先要在节目当中选中一个对话框组件。这个对话框组件用来放置链接地址。

图片6.png

将输入框的标题更改为链接地址。将对话框的标题更改为分享链接。完成后,将对话框的确认按钮更改成复制。这样复制就更清晰明了。然后来进行绑定动作,设置去书写代码。

图片7.png

在对话框组件的下方动作设置当中绑定 onOK 。

这里已经提前收集好了,将它复制过来,并更改里面的唯一标识为链接地址的唯一标识,直接在高级当中获取的。

这样就书写完成了,接下来要再点击分享时显示出这个对话框,所以先复制对话框的唯一标识。然后将它隐藏。选择分享的容器,给容器绑定点击动作。

在这里面要使用的是 API 的方法。通过this.对话框的唯一标识. show 的方式去获取对话框,弹窗之后,想要将自定义页面的访问链接拼接上相,名称放置在链接地址输入框内,所以需要在弹窗后的回调函数当中去输写相关的业务逻辑,在这里定义一个内容。

图片8.png

然后使用 this.item.formsts. 这里获取到的组建的唯一标识是向表单当中巷名称的组件标识,也可以直接在这边已经提前绑定好了,就可以直接复制,粘贴,

图片9.png 

接下来要将它拼接在一起,并用 API 的 set value 的方式赋值给链接地址,这个输入框,所以先写入链接地址的唯一标识. set value,这里面的拼接用加号去进行拼接,拼接的是内部。

回到项目评选应用当中,找到访问的链接,将它复制过来,

图片10.png

将后面的 copy ID 去掉 hope,更改成 name,等于通过这种方式去进行拼。

完成后保存,预览查看一下它的效果,点击分享。点击复制,复制完成,新开一个页面,粘贴过来。

图片11.png

现在我们的链接已经拼接上了。刚才布置的项目名称回到设置页面。下面我们要实现的,就是当点击这个链接之后,展示相关的这一条数据,而不是展示所有的数据。

配置初始化的筛选功能,首先打开数据源

这里是自动加载的数据,这里面有用到的接口,是根据条件搜索表单实例详情的接口,所以打开使用手册。找到3.6。

图片12.png

可以看到,这里面可以传递一个参数,是根据表单内组件值查询。可以根据这个参数来实现自动加载时只展示这样一条数据。返回到的数据当中。在这里之前是携带的固定的参数,现在想要将它更改成变量参数,在变量参数内可以进行判断。所以选择绑定使用变量。

首先是 formuid 设置参数,获取它的值,复制,接下来是 search field Jason,这里通过. url camera,点的方式,来获取携带的 name 参数,如果有的话,将它转换成 json 的格式去查找数据,返回到向表单页面当中找到巷名称的唯一标识,复制过来,然后将携带的项名称粘贴过去。

图片13.png


 

相关文章
|
6月前
|
Web App开发 JavaScript 前端开发
python实现QQ空间自动点赞功能
python实现QQ空间自动点赞功能
118 0
|
小程序
云开发(微信-小程序)笔记(十四)---- 收藏,点赞(上)
云开发(微信-小程序)笔记(十四)---- 收藏,点赞(上)
117 0
|
小程序 程序员 开发工具
开启微信小程序的学习窗口(第一课)(一)
开启微信小程序的学习窗口(第一课)(一)
90 0
|
6月前
|
JavaScript 小程序 Java
基于Java+SpringBoot+Vue的摄影素材分享网站的设计与实现(亮点:活动报名、点赞评论、图片下载、视频下载、在线观看)
基于Java+SpringBoot+Vue的摄影素材分享网站的设计与实现(亮点:活动报名、点赞评论、图片下载、视频下载、在线观看)
118 0
uniapp 分享功能-分享给朋友群聊朋友圈效果(整理)
uniapp 分享功能-分享给朋友群聊朋友圈效果(整理)
|
小程序 数据库
云开发(微信-小程序)笔记(十五)---- 收藏,点赞(下)
云开发(微信-小程序)笔记(十五)---- 收藏,点赞(下)
122 0
|
数据采集 JSON 小程序
开启微信小程序的学习窗口(第一课)(二)
开启微信小程序的学习窗口(第一课)(二)
102 0
HarmonyOS实战—实现抖音点赞和取消点赞效果
HarmonyOS实战—实现抖音点赞和取消点赞效果
340 0
HarmonyOS实战—实现抖音点赞和取消点赞效果
|
存储 JSON API
1.5项目点赞与分享功能的设置|学习笔记(二)
快速学习1.5项目点赞与分享功能的设置
1.5项目点赞与分享功能的设置|学习笔记(二)
|
Web App开发 存储 安全
工具资源合集【置顶】
工具资源合集【置顶】
552 0