快捷導(dǎo)航

微信小程序?qū)崿F(xiàn)文章關(guān)注功能詳細(xì)流程

更新時(shí)間：2022年08月02日 16:39:09 作者：低代碼布道師

在社交小程序里有個(gè)常見(jiàn)的場(chǎng)景是關(guān)注功能，我們本篇以關(guān)注已經(jīng)發(fā)布的文章為例，講解一下關(guān)注功能如何實(shí)現(xiàn)

1 數(shù)據(jù)源設(shè)計(jì)

低代碼工具分為模型驅(qū)動(dòng)和表單驅(qū)動(dòng)兩種類型，微搭低代碼屬于模型驅(qū)動(dòng)的低碼工具。所謂模型驅(qū)動(dòng)就是要先設(shè)計(jì)數(shù)據(jù)源，設(shè)計(jì)數(shù)據(jù)源之間的關(guān)系。我們分析一下關(guān)系是什么，應(yīng)該有一個(gè)文章的數(shù)據(jù)源，還有一個(gè)關(guān)注的數(shù)據(jù)源。文章和關(guān)注之間的關(guān)系是一對(duì)多的關(guān)系，所謂的一對(duì)多是指一篇文章可以被多個(gè)人進(jìn)行關(guān)注。

1.1 文章數(shù)據(jù)源

我們可以設(shè)計(jì)一下文章數(shù)據(jù)源的字段，分別是標(biāo)題、發(fā)布日期、內(nèi)容。按照設(shè)計(jì)我們創(chuàng)建數(shù)據(jù)源并建立對(duì)應(yīng)的字段

1.2 關(guān)注數(shù)據(jù)源

關(guān)注數(shù)據(jù)源我們需要存文章的數(shù)據(jù)標(biāo)識(shí)和用戶的openid

2 錄入測(cè)試數(shù)據(jù)

數(shù)據(jù)源創(chuàng)建好了之后我們，先往文章表添加幾條測(cè)試數(shù)據(jù)。點(diǎn)擊數(shù)據(jù)源的更多，點(diǎn)擊管理數(shù)據(jù)進(jìn)行錄入

3 創(chuàng)建應(yīng)用

數(shù)據(jù)源創(chuàng)建好之后，我們就可以開發(fā)小程序了。在控制臺(tái)點(diǎn)擊應(yīng)用，創(chuàng)建一個(gè)自定義應(yīng)用

點(diǎn)擊空白頁(yè)完成首頁(yè)的創(chuàng)建

我們需要一個(gè)詳情頁(yè)來(lái)展示文章的詳情信息，點(diǎn)擊頁(yè)面旁邊的+號(hào)來(lái)完成新頁(yè)面的創(chuàng)建

4 首頁(yè)功能實(shí)現(xiàn)

我們首先在首頁(yè)放置一個(gè)數(shù)據(jù)列表組件用來(lái)展示我們的文章列表，數(shù)據(jù)源選擇文章表

將文章的標(biāo)題綁定到標(biāo)題字段上

接著綁定發(fā)布日期

然后選中設(shè)置了循環(huán)展示的普通容器，綁定一個(gè)點(diǎn)擊事件，傳入當(dāng)前記錄的數(shù)據(jù)標(biāo)識(shí)

事件選擇平臺(tái)方法的跳轉(zhuǎn)，需要先新建一個(gè)頁(yè)面參數(shù)

參數(shù)建立之后我們綁定為當(dāng)前記錄的數(shù)據(jù)標(biāo)識(shí)

5 詳情頁(yè)功能實(shí)現(xiàn)

切換到詳情頁(yè)，我們可以使用區(qū)塊模板實(shí)現(xiàn)，添加一個(gè)內(nèi)容詳情區(qū)塊

我們需要定義一個(gè)變量來(lái)獲取當(dāng)前文章的信息，變量的類型選擇模型變量，方法選擇查詢單條，并且綁定我們的參數(shù)變量

將文章的標(biāo)題綁定為我們變量中的標(biāo)題

發(fā)布日期綁定為變量中的發(fā)布日期

把正文綁定為我們變量中的內(nèi)容

將按鈕的文字改為關(guān)注

6 獲取用戶的openid

小程序一啟動(dòng)的時(shí)候就可以獲取用戶的openid，我們先需要定義一個(gè)全局變量用來(lái)存儲(chǔ)

在低碼編輯器的全局生命周期里加入獲取用戶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 設(shè)置關(guān)注的低碼方法

我們?cè)谠斍轫?yè)點(diǎn)擊關(guān)注按鈕時(shí)，調(diào)用關(guān)注的低碼方法，邏輯是傳入當(dāng)前變量的數(shù)據(jù)標(biāo)識(shí)，取得用戶的openid寫入數(shù)據(jù)源

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 = "已關(guān)注"
}

然后在容器上設(shè)置點(diǎn)擊事件，調(diào)用低碼方法，參數(shù)傳入頁(yè)面的參數(shù)變量