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

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

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

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

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

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

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

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

3 創(chuàng)建應用

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

點擊空白頁完成首頁的創(chuàng)建

我們需要一個詳情頁來展示文章的詳情信息，點擊頁面旁邊的+號來完成新頁面的創(chuàng)建

4 首頁功能實現(xiàn)

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

將文章的標題綁定到標題字段上

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

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

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

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

5 詳情頁功能實現(xiàn)

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

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

將文章的標題綁定為我們變量中的標題

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

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

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

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 設置關(guān)注的低碼方法

我們在詳情頁點擊關(guān)注按鈕時，調(diào)用關(guān)注的低碼方法，邏輯是傳入當前變量的數(shù)據(jù)標識，取得用戶的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)注"
}

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

這樣整體就做好了

8 發(fā)布預覽

點擊發(fā)布按鈕，發(fā)布成測試版，在手機上進行測試，可以看到當前關(guān)注數(shù)據(jù)源已經(jīng)寫入了數(shù)據(jù)

9 總結(jié)

我們本篇介紹了如何實現(xiàn)文章的關(guān)注功能，要想實現(xiàn)關(guān)注功能首先要設計好數(shù)據(jù)源，然后傳入正確的參數(shù)，在低碼方法中寫入數(shù)據(jù)源即可。

到此這篇關(guān)于微信小程序?qū)崿F(xiàn)文章關(guān)注功能詳細流程的文章就介紹到這了,更多相關(guān)小程序關(guān)注功能內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論