Build information query applet by using micro build

Small and medium-sized enterprises manage data on a daily basis , May be more used to it excel, Organize the accumulated business data into excel To support daily business operations .

excel It's easy to use , It is not very convenient when providing services to the outside world . take excel The data is stored in the database , Then developing a small program to facilitate customers to query information is undoubtedly a good solution .

To achieve this requirement , The first requirement is to provide an online database that can store data . Second, it needs to be able to provide a background management system that can maintain data . Third, you need to provide the function of the applet .

The above three demands can be well satisfied by micro matching , Micro build provides a data source to store data . Depending on the data source, the production model application can meet the needs of the background management system . Support H5、 Applet , It is very convenient to query information on the mobile phone .

Function is introduced

There are three functions , The first page is to enter the query criteria , Click query to enter the information details page , If no data is found, jump to the page without this record

Insert picture description here

Insert picture description here

Insert picture description here

Development steps

Generally, low code development requires the creation of data sources 、 Create an 、 Create a page 、 Realization function 、 Preview release 、 Configure the domain name .

create data source

Talking about creating data sources , It is possible to consider new construction from the beginning , Sometimes stereotyped thinking is not conducive to the implementation of the project . If you start by creating a new data source , There is a question , How to import the data accumulated by customers over time .

When you really practice, you will find it embarrassing , The data source does not provide the function of batch importing data , Then you will find that the data source you have worked hard to create cannot be used when it is online , Everything has been done in vain .

So we still need to be based on actual needs , At the beginning, I considered whether there were historical data , Do you want to import .

How to create a data source if there is data ？ You should start by creating an application , Need from excel Create an , In this way, the platform will help you create a good data source and automatically import data .

It should also be noted that the platform will import two copies when importing data , A copy is imported into the preview environment , A copy is imported into the formal environment .

Create an

We are two appeals , One is PC The requirements of the end management background , One is a small program . Let's create a PC End applications .

Click on the console , Click application , from excel Create an

Insert picture description here

Then select upload from local

Insert picture description here

Choose your local excel

Insert picture description here

The system will automatically get excel Column in , And identify by type

Insert picture description here

Create an application with the default name

Insert picture description here

Then click publish , You can use PC End of the management background , Configuration checks will be performed during release , Publish the data source first

Insert picture description here

After the data source is published , It can be used after the official version is released

Insert picture description here

Create an applet

PC After the client is created, we can create the applet , Click to create a blank application

Insert picture description here

Then you need to create three new pages , Including home page 、 Details page 、 No record page

Insert picture description here

The home page needs to place a form, mobile number and button component

Insert picture description here

After the component is placed, the problem is how to click the query button to obtain the value in the text box , The idea is that the form input component needs to bind a variable , Set the input value to the variable through the event of value change during form input

Insert picture description here

Insert picture description here

After the value of the variable has been , We call the low code method when we click the button , To get the data and jump to the page

export  default async  function({event, data}) {
   let telphone = $page.dataset.state.telphone
   const ret = await app.dataSources.zfqk_ihsqi00.wedaGetList({
      'phone':telphone
   });
    if(ret.code!=0){
      return
    }
    let result = ret.data
    if(result&&result?.length>0){
      app.navigateTo({
         pageId: 'detail',    //  page  Id 
         params: {id: result[0]._id},
      });
    }else{
      app.navigateTo({
         pageId: 'norecord'
      })
    }
    

}

The details page needs to define a parameter variable to receive the input from the first page id

Insert picture description here

Then define a model variable according to the passed in Id To get specific data

Insert picture description here

Finally, bind variables to components

Insert picture description here

Preview release

After the applet is completed, click the release button to view the function , There are generally two options , Issued as h5 Or applet , See what you need , If you need mobile phone user information, you can publish it as a small program , If only when the website is used, it will be published as h5 that will do

Domain name binding

Wechat comes with its own domain name , It is relatively long and may be inconvenient to use , At this time, you need to bind your own domain name . How to bind a domain name ？ Find cloud products in the navigation bar , Find cloud development cloudbase

Insert picture description here

Find your own environment

Insert picture description here

Click detailed configuration in static website hosting

Insert picture description here

Then add your own domain name

Insert picture description here

summary

In this article, we analyze how to build an online information query applet by using wechat with a practical case , Low code is characterized by visual development , One stop publishing , It is very easy to use and operate , Combine your own business characteristics to build your own small program .