微信小程式實現文章關注功能詳細流程

2022-08-02 18:03:34

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 = "已關注"
}

然後在容器上設定點選事件，呼叫低碼方法，引數傳入頁面的引數變數