In the first two articles, we analyzed the production method of the homepage of medical beauty applet. The official template is the external data source used, which is not conducive to our own data management. Therefore, we use self built data sources for redevelopment. Of course, if we use self built data sources, it will inevitably involve development. In this section, we will introduce how to read information from the database and display it on the page. The final effect of the page is as follows:
Business logic
To develop, we first need to understand the logic. According to the page planning, we need to read the store information. Where do we read it?
In the field of software development, information is generally stored in the database, so we need to read information from the database. Weida provides a set of online document database. Different from relational database, its data structure can be defined more complex. Our data source is defined like this
Only one record is displayed on the page, how to read the information? Multiple queries in the database can return a collection of records, which is exactly what we need
Function realization
Go to application management and find the background of the medical beauty applet we created
The home page is displayed by default, and we perform function operations on the home page
Where should we start? You can think of it this way. The information is displayed as soon as the page is loaded. Where did this action operate at the beginning?
To operate in low code editing, click low code editing on the navigation bar
After opening the editor, it is divided into global life cycle and page life cycle. We can write code in the page life cycle
The specific codes are as follows:
export default { async onPageLoad(query) { const ret = await app.dataSources.shop_8cp2v9w.wedaGetList(); if(ret.code!=0){ return } const formContent = getformContent($page.dataset.state.formContent,ret.data[0]); $page.dataset.state.formContent = [...formContent] }, onPageShow() { //console.log('---------> LifeCycle onPageShow') }, onPageReady() { //console.log('---------> LifeCycle onPageReady') }, onPageHide() { //console.log('---------> LifeCycle onPageHide') }, onPageUnload() { //console.log('---------> LifeCycle onPageUnload') }, } function getformContent(formContent,data){ formContent && Array.isArray(formContent) && formContent.map((item)=>{ const {key} = item; switch(key) { case 'location': console.log("location",data[key]) item.value = getLocation(data[key]); console.log("locationvalue",item.value) break; case 'telphone': item.value = data[key]; break; case 'workTime': item.value = getWorkTime(data[key]); break; default: item.value = data[key]; return item; } }) return formContent; } function getLocation(location){ let {province = '',city = '',district='',address = ''} = location; return `${province}-${city}-${district}-${address}`; } function getWorkTime(data){ let weekNum = []; let weekMap = { 1:'Monday', 2:'Tuesday', 3:'Wednesday', 4:'Thursday', 5:'Friday', 6:'Saturday', 7:'Zhou Qi', } let startWeek, endWeek, startHour, endHour, startMin, endMin, weekText; for(let prop in data){ startHour = parseInt(data[prop].start/60); startMin = parseInt(data[prop].start%60); endHour = parseInt(data[prop].end/60); endMin = parseInt(data[prop].end%60); weekNum.push(prop.replace('week','')*1); } weekNum = weekNum.sort(); startWeek = weekMap[weekNum[0]]; endWeek = weekMap[[weekNum[weekNum.length-1]]]; startHour = padding(startHour,2); endHour = padding(endHour,2); startMin = padding(startMin,2); endMin = padding(endMin,2); weekText = weekNum.length ===1 ? startWeek:`${startWeek} to ${endWeek}`; return `${weekText},${startHour}:${startMin}-${endHour}:${endMin}`; } function padding(num,length){ for(var len = (num+"").length;len<length;len = num.length){ num = "0"+num; } return num; }
Code parsing
The first is async/await, because the methods defined by the micro build data source are asynchronous. The so-called asynchrony is that if an asynchronous method is encountered during code execution, it will continue to execute without waiting for the completion of execution. In this way, it will not work if it needs to be processed according to the results returned by the method.
At this time, we need to wait for the asynchronous method to be executed and continue to execute, so the async keyword needs to be added before the method onPageLoad. If an asynchronous method needs to wait for the return result, the await keyword needs to be added to the front.
If we want to call the data source, we need to call the data source api of wechat, specifically app.dataSources.shop_8cp2v9w.wedaGetList()
shop_8cp2v9w is the name of the data source, corresponding to the name in the data source management
wedaGetList corresponds to the method in the data source
After the data source method is called, an object is returned. If the call is successful, ret.code returns 0, and if it fails, other values are returned. Therefore, we added a judgment. If the call fails, the subsequent code will not be executed
if(ret.code!=0){
return
}
In order to increase the readability of the code, the logic is encapsulated as a function
function getformContent(formContent,data){
}
The purpose of this function is to return the information required on the page and receive two parameters, one is the variable defined in the page, and the other is the information queried from the database
We can use the $page.dataset.state.formContent syntax to get the variables defined in the page
After the method call of the data source is successful, ret.data returns an array. We obtain the first record ret.data[0] through the syntax of brackets
After the function is successfully executed, assign a value to the variable of the page through the assignment statement
$page.dataset.state.formContent = [...formContent]
Where... Is the expanded syntax, so that the corresponding information of formContent can be assigned to the variables in the page
getformContent code parsing
Formcontent & & array.isarray (formcontent) calculates the value of variables through & & syntax. If they are true, the third variable will be executed. If one of them is false, the execution will end&& It is also called short circuit operator. Both sides must be true to be true. If one is false, it returns false
Array.isArray(formContent) calls an API to determine whether formContent is an array
Formcontent. Map ((item) = > {}) is the iteration syntax of an array, so that each value in the array can be iterated. (item) = > {} This is called the arrow function, which means the same as function (item) {}
Then the switch case syntax is used to determine the keys in the array. Different keys call different functions to format the information respectively.
getLocation code parsing
The main logic of this code is to merge home addresses into one line
let {province = '',city = '',district='',address = ''} = location;
The key value pairs in Location are disassembled into defined variables through deconstruction and assignment
${province}-${city}-${district}-${address}
A pair of inverted single quotation marks indicates that this is a template string, and ${} indicates that the content inside is a variable, which can be calculated into a specific value during program execution
The final effect of the program is string splicing
getWorkTime code parsing
The meaning of this code is to calculate the working hours from Monday to Sunday. The splicing result is displayed as follows
padding code parsing
This is to fill zero before time. If it is one digit, fill a 0. If it is two digits, the value of time will be directly displayed
summary
Well, after a certain space, we introduced how to read values from the database and display them on the page in the micro build. If you want to do well, you must have basic programming skills. If you want to improve your programming ability, you should still rely on long-term training and proficiency.