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.