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

2024-10-27 04:57: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 总结

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

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

微信小程序网络数据请求的实现详解

目录一.限制二.配置服务器合法域名三.发起请求 GET请求 POST请求二者区别四. 跳过requst合法域名校验五.关于跨域和Ajax的说明番外-GET与POST二者的通俗化解释一.限制出于安全性考虑,小程序官方对数据接口的请求做出了如下两点限制: 只能请求HTTPS类型的接口必须先将接口的域名添加到信任列表中二.配置服务器合法域名配置步骤: 登录微信小程序管理后台链接点击开发开发管理开发设置服务器域名点击右上角修改requst合法域名注意事项: 域名只支
微信小程序实现页面导航与传参功能详解

目录一.页面导航概述分类声明式导航导航到tabBar页面导航到非tabBar页面后退导航编程式导航导航到tabBar页面导航到非tabBar页面后退导航导航传参声明式导航传参编程式导航传参一.页面导航概述顾名思义,页面导航指的是页面之间的相互跳转, 而页面传参就是在加载页面时将特定的参数传递过去从而成为该页面的参数. 分类声明式导航:在页面上声明一个<navigator>导航组件,通过点击该组件实现页面跳转编程式导航:通过调用小程序专门的导航API,实现页
微信小程序登录与注册功能的实现详解

目录小程序中的登录用户注册用户信息修改总结小程序中的登录在小程序中有一个概念叫openid,这个相当于登录小程序用户的唯一标识,每个微信用户都不同.那要如何拿到用户的唯一标识呢?在微搭低代码中是通过调用系统的api来获取的 let userinfo = await app.utils.getWXContext() 我们通过这行代码的调用来获取到用户的唯一标识,获取到之后我们其他页面也需要使用,那就需要把他存起来.全局变量的作用域是所有页面都可见,所以我们需要在变量中定义一个全局变量叫
微信小程序中的生命周期与生命周期函数浅析介绍

目录一.生命周期概念分类二.生命周期函数概念作用分类三.总结一.生命周期概念生命周期(Life Cycle)是指一个对象从创建-->运行-->销毁的整个阶段小程序的生命周期小程序启动,表示生命周期的开始小程序关闭.表示生命周期的结束中间小程序的整个运行过程就是小程序的生命周期分类应用生命周期特指小程序从启动-->运行-->销毁的过程页面生命周期特指小程序中每个页面的加载-->渲染-->销毁的整个过程自定义组件生命周期组件实例被
微信小程序多表联合查询的实现详解

目录一对多表设计 SQL中的关联查询低码中的表关联自定义连接器中实现表关联查询新建连接器总结一对一的设计一般不常见,只需要设计到主表中即可,避免增加复杂性.一对多的关系比较常见,一的一方通常作为主表,多的一方通常作为子表.而多对多一般会拆分成两个一对多的关系,这就必须要用中间表进行过渡. 我们本篇介绍的多表查询,侧重在一对多的关系,我们先看一下我们实际的表设计一对多表设计我们实现的是文章关注的业务,通常将文章作为主表,而关注信息作为子表.表和表之间要进行关联,常见的设计思路是子表
微信小程序详解如何实现付款功能

目录 1 支付场景 2 创建数据源 2.1 商品数据源 2.2 订单数据源 3 创建连接器 4 创建应用 5 功能开发 5.1 首页 5.2 商品详情页 5.3 订单页总结 1 支付场景我们梳理一下支付场景是什么样子的,首先可以浏览商品,然后在商品的详情页里进行结算.结算的主要目的是生成订单,订单生成好之后就可以进行支付. 支付其实是先向微信支付提交一个在线订单,订单提交成功之后就可以调用支付接口来拉起支付界面. 拉起支付界面之后我们需要按照提示的金额进行付费,付费成功后我们更新一下订单的状
微信小程序访问mysql数据库流程详解

目录 1 开通云上的mysql 2 创建自定义连接器 3 创建云函数 4 安装依赖 5 出参映射 6 在小程序中使用连接器总结 1 开通云上的mysql 经过询价,我发现阿里云的数据库是比较便宜的,新人购买非常划算.对于爱学习的博主来说,果断购买一个. 按照操作指引购买后,云会帮你创建一系列的环境,在控制台就可以看到属于自己的实例点击操作列上的管理,就可以创建我们自己的数据库.配置的步骤是先创建数据库的账号然后创建一个数据库都设置好之后就可以登录数据库,创建表,加数据了刚创建好的数据库
微信小程序全局文件的使用详解

目录全局文件总结我们前边两篇介绍了账号的申请.注册,工具的安装,云服务的开通.本篇我们介绍一下基础语法.介绍的方法呢我们会结合上微搭低代码的工具一起做个对比.因为低代码工具也产生了非常多的技术概念,但最终在发布成小程序的时候也是按照微信的规范去生成的,把微信开发者工具学会了也可以更深入的了解低代码的相关概念. 全局文件小程序中是分为全局和页面级两部分.全局是在小程序的所有页面都有效,页面级是只在当前页面中生效.小程序根目录有三个文件app.js.app.json.app.wxss这三个就
微信小程序实现分页查询详解

目录创建自定义连接器云开发介绍分页实现思路使用连接器为什么要自定义分页功能日常小程序经常需要分页查询的功能,本篇我们讲解一下低代码中如何实现分页查询的功能.要自己开发分页功能,可以先参考官方的方法分页查询我们一般是需要有入参和出参,入参分别需要页码.每页大小.排序字段名称.排序方式.查询条件. 出参分别需要记录总条数.页码.每页大小.记录列表. 入参和出参知道之后,那在哪写代码呢?像分页这种功能一般属于后端的能力,低码工具中是在自定义连接器里写后端代码的. 创建自定义连接器登录低
微信小程序实现文章关注功能详细流程

目录 1 数据源设计 1.1 文章数据源 1.2 关注数据源 2 录入测试数据 3 创建应用 4 首页功能实现 5 详情页功能实现 6 获取用户的openid 7 设置关注的低码方法 8 发布预览 9 总结 1 数据源设计低代码工具分为模型驱动和表单驱动两种类型,微搭低代码属于模型驱动的低码工具.所谓模型驱动就是要先设计数据源,设计数据源之间的关系.我们分析一下关系是什么,应该有一个文章的数据源,还有一个关注的数据源.文章和关注之间的关系是一对多的关系,所谓的一对多是指一篇文章可以被多个人进行
微信小程序自动客服功能

微信小程序最近比较火爆,所以抽空做了个客服机器人的小程序,来回答之前坦克游戏中的常见问题.当然这个小程序也很容易修改为其他类型的自动客服,需要做的仅仅是在olami平台加上相应的问题和答案. 整个小程序界面包含2个部分,一部分用于显示回答,一部分为输入框.小程序的核心就是向olami服务器发送http请求,然后处理结果并显示出来.olami接口的详细使用方法可以参考置顶的两篇博客.处理输入的代码如下: bindInput: function (e) { var that = this; var
微信小程序一周时间表功能实现

这篇文章主要介绍了微信小程序一周时间表功能实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 wxml <view class="dateView"> <image class="dateLeft" bindtap="prevWeek" src="../../res/imgs/dateLeft.png"></image> <view&
微信小程序实现拨打电话功能的示例代码

1.在对应需要拨打电话的标签那里绑定事件(使用的标签不固定,可以是text.view等) 例子: <text class="phone" bindtap="callPhone">400-9121-211</text> 2.在对应的事件方法里面写入 wx.makePhoneCall方法例子: callPhone() { wx.makePhoneCall({ phoneNumber: '400-9121-211' //仅为示例,并非真实的电话号
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法

本文实例讲述了微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法.分享给大家供大家参考,具体如下: 很多项目都会有消息记录页,即列表页,紧接着就是点击列表的某一项进入到消息的详情页,这里承接上一篇文章,继续分享如何从列表的item项跳转到下一个页面. 一.效果图从左边的列表页调到右边的详情页二.页面之间的跳转首先要看的是页面的跳转,微信小程序有三种跳转方式可供选择: 1.保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面. wx.navi
微信小程序实现的涂鸦功能示例【附源码下载】

本文实例讲述了微信小程序实现的涂鸦功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 布局文件index.wxml: <view class="container">  <view class="canvas_area">  &
微信小程序首页的分类功能和搜索功能的实现思路及代码详解

就在昨天,微信宣布了微信小程序开发者工具新增"云开发"功能下载最新的开发者工具,现在无需服务器即可实现小程序的快速迭代! 分类功能和搜素功能的效果图 1.首页分类功能的实现 boxtwo方法(.js文件) boxtwo: function (e) { var index = parseInt(e.currentTarget.dataset.index) this.setData({ HomeIndex: index }) }, 当在首页点击分类导航时,会触发这个方法,并传回当前点击
微信小程序拍照和摄像功能实现方法示例

本文实例讲述了微信小程序拍照和摄像功能实现方法.分享给大家供大家参考,具体如下: 拍照原先的想法是使用微信的camera组件来实现,并且模拟发朋友圈的样子来进行相机的设置,其实就是将camera组件的大小设置成根屏幕一样大,并在上面使用一个cover-image组件来给用户进行点击,可是实际上的情况是第一,cover-image组件有时候会消失,第二,整个流程实现起来很僵硬,页面跳转也是卡的要死,后来无意间发现了另一个API:wx.chooseImage,这个API会自己去调用相机和相册,之后
微信小程序纯文本实现@功能

前言大家肯定对@功能不陌生,在如今的各大社交软件中它是一种不可或缺的功能.实现@人的功能并不复杂,只需将@人员的id传给后端,后端下发通知即可.主要的复杂点在于一键删除功能与变色功能,web端可以使用现成库 caret.js 或者 At.js 来实现.但笔者需要在小程序中实现这个功能,而且在 textarea 标签里实现,当然@人名的变色功能自然而然就砍掉了. 准备工作怎么来实现一键删除呢?首先想到对@人名前后用特殊符号标记+正则来实现,但结果不是很理想,扩展性也比较差,如果还要匹配话题之类