Table of contents
When children reach the appropriate age, they need to enter kindergarten to study. Now many families are only one child. It is more important to choose a suitable kindergarten so that children can adapt to collective life from an early age, and learn social skills and corresponding cultural and artistic skills. In order to give their children a safe and good educational environment, parents often need to compare many aspects when choosing a school.
Now Baidu map is more convenient, but the map can only show one geographic location information of the kindergarten. If you want to learn more about the school's philosophy, teachers, environment and other information, it is often lacking. After the WeChat mini-program was launched in 2017, its ready-to-use and installation-free features attracted a large number of applications to the shelves.
However, most kindergartens do not have their own publicity applet yet. In this article, we use low-code tools to quickly build a applet, which is not only convenient for kindergarten publicity, but also convenient for parents to choose schools. The practical tutorial is divided into three parts: demand analysis, data source design, and application development. It strives to achieve detailed knowledge, and the steps are clear and clear. Even if there is no foundation, it can be built step by step.
1 Demand analysis
The process of general requirements analysis is to understand the real needs of customers and convert the requirements into software functions. In the process of requirements analysis, we often use several steps such as interviews, prototyping, and function confirmation. For interviews, we can communicate face-to-face. If it is online communication, we can use WeChat, Tencent conference and other tools to facilitate detailed understanding of needs.
After the demand communication, we will use the mind map to sort out the function points. The following are the function points that we have sorted out. The function points
are not intuitive. We will also use the prototype tool to draw prototypes to facilitate confirmation of functions.
1.1 Homepage prototype
The home page is a page that displays the functions of our applet as a whole, and it often presents all the information, and the information can be listed in order from top to bottom. The navigation bar at the bottom can jump between different pages
1.2 Registration Details Page
On the registration details page, you can quickly communicate and submit consultation information through icons and buttons.
1.3 Graphic display
There can be two views for graphic display, one is a single-column view and the other is a double-column view
1.4 My page
My page generally displays the user's avatar, and you can view the consultation information that has been submitted
2 Data source design
After the functional information is refined, we need to design the data source according to the function. Most of them are for displaying information, and we can design independent data sources according to the columns. If the data source is relatively simple, we can consider designing two data sources, one is the column data source and the other is the document data source.
However, there is a problem with splitting into the main and sub-tables. The sub-tables store the data identifiers of the main table. Especially when we are doing the display, we have to filter by the column name. In this way, we must use the aggregation syntax for table connection, which will undoubtedly increase complexity. For simplicity, we will not split it into main and sub-tables. A column is a data source.
From the needs of sorting out, our columns are divided into the introduction of the kindergarten, teachers, exciting activities, works display, news announcements, teaching classes, about us, and appointments. This information is display class information. In addition to the display class, we also have a type of submission class information, that is, consulting information can also create a separate data source.
2.1 Information about the garden
We will plan a data source for the basic information related to the kindergarten. The fields include the homepage carousel, contact number, address, about us, teachers, teaching classes, and navigation icons . It
should be noted here that the navigation icons are the first selection array. The element is an object, you need to add the fields and then add the properties in the object
2.2 Notice and Announcement
The notification announcement contains three fields: title, body, and release date.
2.3 Wonderful activities
In addition to the title and text, we have added an additional field for the picture of the event.
2.4 Exhibition of works
The Work Display field includes a title and a picture of the work
2.5 Book an appointment
Reservation registration fields include title, content
2.6 Consultation information
Consultation information fields include student name, ID number, student parent, mobile phone number, home address, nationality
3 Create background apps
Generally, small programs will be provided to operators with a management background, and the low-code management background can be automatically generated. Click to create a model application
Enter the name of the application
Check the data source we created above The
model application will automatically generate a page for adding, deleting, modifying and checking
Click Navigation Configuration
Click to generate one-click according to the page
Automatically generate the menu on the left
Click the Publish button
to choose to publish as a trial version, Solve various problems found in the configuration check. After the
release is completed, you can view the specific effect on the enterprise workbench
4 Create an applet
Click New Application to create a custom application
Enter the name of the application to support the platform to select the applet
Click the blank page to complete the creation of the applet
4.1 Page Creation
According to the needs, we have planned the home page, about us, appointment registration list, appointment registration details, exciting activities, me, consultation information and other pages.
Click the + sign in the page component area to create a page
Enter the page name to complete the page creation
4.2 Get user openid
Beginners who have not used low-code tools, design a login page as soon as they develop a small program, and prompt the user to enter a user name and password. This is still a matter of traditional thinking.
Low-code tools rely on cloud facilities, and all environments are hosted on the cloud, which is naturally different from the traditional development model. There are three modes in low code, namely anonymous login, username and password login, and SMS verification code login.
Because we are a website application, we use the anonymous login mode,
so that the user has completed the login as soon as he opens the applet, which is convenient for us to automatically obtain the openid when we submit information later.
Open the code editor
In the common directory, we create a getopenid to get the user's login information and
paste the following code
export async function getOpenId() {
const {
OPENID, FROM_OPENID } = await app?.utils?.getWXContext()
let userId = FROM_OPENID || OPENID
if (!userId) {
const {
wedaId } = await app.cloud.getUserInfo()
userId = wedaId
}
return userId
}
Create a global variable to store the user's openid
. When the applet starts, we get the user's openid and assign it to the global variable
import {
getopenid } from './common/getopenid'
export default {
onAppLaunch(launchOpts) {
//console.log('---------> LifeCycle onAppLaunch', launchOpts)
getopenid().then(async userId => {
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)
}
}
Open the development and debugging tool, and you can see that the console outputs the user's login information. The
login information is especially useful when the user submits the information, which can identify who submitted the information.
Summarize
This article systematically introduces how a small program goes from requirements to design to the specific development process. Although low-code tools lower the development threshold, the software development process is still unavoidable. Doing all the preparatory work according to the software development process can also ensure the smooth progress of the subsequent development work. In the next article, we will introduce the specific development of each page, so stay tuned.