Table of contents
A common scenario in social applets is the follow function. In this article, we will take the following articles as an example to explain how the follow function is implemented.
1 Data source design
Low-code tools are divided into two types: model-driven and form-driven. Microbuild low-code is a model-driven low-code tool. The so-called model-driven is to design the data source first, and design the relationship between the data sources. Let's analyze what the relationship is. There should be a data source for the article and a data source for attention. The relationship between articles and followers is a one-to-many relationship. The so-called one-to-many means that an article can be followed by multiple people.
1.1 Article data source
We can design the fields of the article data source, namely title, release date, and content. According to the design, we create the data source and establish the 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 a few pieces of test data to the article table. Click more of the data source, click Manage data to enter
3 Create an app
After the data source is created, we can develop the applet. Click Apply in the console to create a custom application
. Click the blank page to complete the creation of the home page.
We need a details page to display the details of the article. Click the +number next to the page to complete the creation of the new page.
4 Homepage function realization
We first place a data list component on the home page to display our article list, and the data source selects the article table
Bind the title of the article to the title field and
then bind the publication date
Then select the ordinary container with the circular display set, bind a click event, and pass in the data ID of the current record
For the jump of the event selection platform method, you need to create a new page parameter first.
After the parameter is established, we bind it as the data identifier of the current record
5 Details page function implementation
Switching to the details page, we can use the block template to add a content details block.
We need to define a variable to get the information of the current article, select the model variable for the type of the variable, select the query single for the method, and bind our parameter variable
Bind the title of the article to the title in our variable
Bind the release date to the release date in the variable
Bind the text to the content in our variable
Change the text of the button to follow
6 Get the user's openid
The user's openid can be obtained as soon as the applet is started. We first need to define a global variable to store
the code for obtaining the user's openid in the global life cycle of the low-code editor.
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 Low-code ways to set your attention
When we click the follow button on the details page, the low-code method of following is called. The logic is to pass in the data identifier of the current variable, obtain the user's openid and write it into the 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 = "已关注"
}
Then set the click event on the container, call the low-code method, and pass the parameter into the parameter variable of the page,
so that the whole is done.
8 Release Preview
Click the release button to release it as a beta version, and test it on the mobile phone. You can see that the current 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, and write the data source in the low-code method. If you find it useful, remember to like, follow and comment.