当前位置:网站首页>小程序中实现文章的关注功能
小程序中实现文章的关注功能
2022-07-05 04:02:00 【低代码布道师】
在社交小程序里有个常见的场景是关注功能,我们本篇以关注已经发布的文章为例,讲解一下关注功能如何实现。
1 数据源设计
低代码工具分为模型驱动和表单驱动两种类型,微搭低代码属于模型驱动的低码工具。所谓模型驱动就是要先设计数据源,设计数据源之间的关系。我们分析一下关系是什么,应该有一个文章的数据源,还有一个关注的数据源。文章和关注之间的关系是一对多的关系,所谓的一对多是指一篇文章可以被多个人进行关注。
1.1 文章数据源
我们可以设计一下文章数据源的字段,分别是标题、发布日期、内容。按照设计我们创建数据源并建立对应的字段
1.2 关注数据源
关注数据源我们需要存文章的数据标识和用户的openid
2 录入测试数据
数据源创建好了之后我们,先往文章表添加几条测试数据。点击数据源的更多,点击管理数据进行录入
3 创建应用
数据源创建好之后,我们就可以开发小程序了。在控制台点击应用,创建一个自定义应用
点击空白页完成首页的创建
我们需要一个详情页来展示文章的详情信息,点击页面旁边的+
号来完成新页面的创建
4 首页功能实现
我们首先在首页放置一个数据列表组件用来展示我们的文章列表,数据源选择文章表
将文章的标题绑定到标题字段上
接着绑定发布日期
然后选中设置了循环展示的普通容器,绑定一个点击事件,传入当前记录的数据标识
事件选择平台方法的跳转,需要先新建一个页面参数
参数建立之后我们绑定为当前记录的数据标识
5 详情页功能实现
切换到详情页,我们可以使用区块模板实现,添加一个内容详情区块
我们需要定义一个变量来获取当前文章的信息,变量的类型选择模型变量,方法选择查询单条,并且绑定我们的参数变量
将文章的标题绑定为我们变量中的标题
发布日期绑定为变量中的发布日期
把正文绑定为我们变量中的内容
将按钮的文字改为关注
6 获取用户的openid
小程序一启动的时候就可以获取用户的openid,我们先需要定义一个全局变量用来存储
在低码编辑器的全局生命周期里加入获取用户openid的代码
export default {
async onAppLaunch(launchOpts) {
//console.log('---------> LifeCycle onAppLaunch', launchOpts)
const {
OPENID, FROM_OPENID } = await app.utils.getWXContext()
let userId = FROM_OPENID || OPENID
app.dataset.state.openid = userId
console.log(app.dataset.state.openid)
},
onAppShow(appShowOpts) {
//console.log('---------> LifeCycle onAppShow', appShowOpts)
},
onAppHide() {
//console.log('---------> LifeCycle onAppHide')
},
onAppError(options) {
//console.log('---------> LifeCycle onAppError', options)
},
onAppPageNotFound(options) {
//console.log('---------> LifeCycle onAppPageNotFound', options)
},
onAppUnhandledRejection(options) {
//console.log('---------> LifeCycle onAppUnhandledRejection', options)
}
}
7 设置关注的低码方法
我们在详情页点击关注按钮时,调用关注的低码方法,逻辑是传入当前变量的数据标识,取得用户的openid写入数据源
export default async function({
event, data}) {
const result = await app.cloud.callModel({
name:'gz_necsx6t',
methodName:'wedaCreate',
params:{
wzbs:data.target,
openid:app.dataset.state.openid
}
})
$page.widgets.id20.text = "已关注"
}
然后在容器上设置点击事件,调用低码方法,参数传入页面的参数变量
这样整体就做好了
8 发布预览
点击发布按钮,发布成测试版,在手机上进行测试,可以看到当前关注数据源已经写入了数据
9 总结
我们本篇介绍了如何实现文章的关注功能,要想实现关注功能首先要设计好数据源,然后传入正确的参数,在低码方法中写入数据源即可。如果觉得有用,记得点赞、关注加评论哦。
边栏推荐
- Web components series (VII) -- life cycle of custom components
- speed or tempo in classical music
- [array]566 Reshape the matrix - simple
- 长度为n的入栈顺序的可能出栈顺序
- Is there a sudden failure on the line? How to make emergency diagnosis, troubleshooting and recovery
- 灵魂三问:什么是接口测试,接口测试怎么玩,接口自动化测试怎么玩?
- 面试字节,过关斩将直接干到 3 面,结果找了个架构师来吊打我?
- Containerd series - what is containerd?
- Why do big companies such as Baidu and Alibaba prefer to spend 25K to recruit fresh students rather than raise wages by 5K to retain old employees?
- 为什么百度、阿里这些大厂宁愿花25K招聘应届生,也不愿涨薪5K留住老员工?
猜你喜欢
Rust区块琏开发——签名加密与私钥公钥
How to use jedis of redis
ActiveReportsJS 3.1 VS ActiveReportsJS 3.0
[understand series after reading] 6000 words teach you to realize interface automation from 0 to 1
Soul 3: what is interface testing, how to play interface testing, and how to play interface automation testing?
Timing manager based on C #
Rome链分析
How does the applet solve the rendering layer network layer error?
PlasticSCM 企业版Crack
Containerd series - what is containerd?
随机推荐
Behavior perception system
面试字节,过关斩将直接干到 3 面,结果找了个架构师来吊打我?
Differences among 10 addressing modes
Use Firefox browser to quickly pick up Web image materials
JWT漏洞复现
It took two nights to get Wu Enda's machine learning course certificate from Stanford University
ABP vNext microservice architecture detailed tutorial - distributed permission framework (Part 2)
[vérification sur le Web - divulgation du code source] obtenir la méthode du code source et utiliser des outils
Interview summary: This is a comprehensive & detailed Android interview guide
[charging station]_ Secular wisdom_ Philosophical wisdom _
Rome链分析
WGS84 coordinate system, web Mercator, gcj02 coordinate system, bd09 coordinate system - brief introduction to common coordinate systems
Threejs rendering obj+mtl model source code, 3D factory model
The order of LDS links
Redis source code analysis: redis cluster
An elegant program for Euclid‘s algorithm
[an Xun cup 2019] not file upload
长度为n的入栈顺序的可能出栈顺序种数
Pyqt pyside custom telescopic menu bar sharing (including tutorial)
Clickpaas low code platform