微信小程序實現文章關註功能詳細流程

Posted on by

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 總結

我們本篇介紹瞭如何實現文章的關註功能，要想實現關註功能首先要設計好數據源，然後傳入正確的參數，在低碼方法中寫入數據源即可。

到此這篇關於微信小程序實現文章關註功能詳細流程的文章就介紹到這瞭,更多相關小程序關註功能內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：