文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

微信小程序实现文章关注功能详细流程

2022-11-13 14:04

关注

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 总结

我们本篇介绍了如何实现文章的关注功能,要想实现关注功能首先要设计好数据源,然后传入正确的参数,在低码方法中写入数据源即可。

到此这篇关于微信小程序实现文章关注功能详细流程的文章就介绍到这了,更多相关小程序关注功能内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯