Realize the attention function of the article in the applet

A common scenario in social applets is to focus on functions , In this article, we will focus on the published articles as an example , Explain how to realize the focus function .

1 Data source design

Low code tools are divided into two types: model driven and form driven , Micro build low code is a model driven low code tool . The so-called model driven is to design the data source first , Design the relationship between data sources . Let's analyze what the relationship is , There should be a data source for the article , There is also a data source of concern . The relationship between articles and concerns is one to many , The so-called one to many refers to an article that can be followed by multiple people .

1.1 Article data source

We can design the fields of the article data source , It's the title 、 Release date 、 Content . According to the design, we create data sources and corresponding fields

1.2 Focus on data sources

Pay attention to the data source. We need to store the data ID of the article and the user's openid

2 Enter test data

After the data source is created, we , First, add some test data to the article table . Click more of data sources , Click management data to enter

3 Create an

After the data source is created , We can develop small programs . Click Apply on the console , Create a custom application


Click the blank page to complete the creation of the home page

We need a detail page to show the details of the article , Click... Next to the page + To complete the creation of the new page

4 Home page function realization

We first place a data list component on the home page to display our article list , Data source selection article table

Bind the title of the article to the title field


Then bind the release date

Then select the ordinary container with circular display , Bind a click event , Pass in the data ID of the current record

Jump of event selection platform method , You need to create a new page parameter first

After the parameter is established, we bind it to the data ID of the current record

5 Details page function realization

Switch to the details page , We can use block template to realize , Add a content detail block

We need to define a variable to get the information of the current article , Select the model variable according to the type of variable , Method select query single , And bind our parameter variables

Bind the title of the article to the title in our variable


The release date is bound to the release date in the variable


Bind the body to the contents of our variables


Change the text of the button to follow

6 Get the user's openid

As soon as the applet starts, it can get the user's openid, We need to define a global variable to store

Add getting users in the global life cycle of the low code editor openid Code for

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 Set the low code method of concern

When we click the follow button on the details page , Call the concerned low code method , Logic is the data identification passed into the current variable , Get the user's openid Write to data source

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 = " Followed "
}

Then set the click event on the container , Call low code method , Parameter the parameter variable passed into the page

In this way, the whole is done

8 Release preview

Click the Publish button , Released as a beta , Test it on your phone , You can see that the current concerned data source has written data

9 summary

This article introduces how to realize the attention function of the article , To realize the attention function, we must first design the data source , Then pass in the correct parameters , Write the data source in the low code method . If it works , Remember the praise. 、 Follow and comment .