Historical summary:

  • Wechat applets custom component – table component is coming
  • Realize “Dingdingclocking” through wechat mini program
  • Make a note of the subcontracting of wechat small program project and the pre-downloading of subcontracting

For a beginner after reading developer documents, familiar with developer tools, the next step is to develop small program, small program combat.

Among small program version from the design draft after, what steps need to pass, what are the points for attention, and how a page is divided into functional modules are developed, and how to use the developer tools to improve the efficiency of our development, these three ways, we combined with his own experience, introduce to you, for your reference only.

A small program from the design draft to the version

1. Divide pages

When we get the design drawing, the first step is to analyze how many pages there are in the design drawing, the process relationship of each page, and check whether there are any missing pages. After sorting out the pages, configure them in the Pages property of app.json. If there is a Tab page, configure it in tabBar. For example, with designs like this one, the tabBar applet’s unique property configuration needs to be noted.

2. Link pages

After all the pages are configured in app.json, the applet is smart and helps us generate all the pages.

We connect them by links or buttons. There is no need to make up any page style or logic, as long as the page can jump normally. Such a simple small procedure demo molding.

The goal is quick trial and error. Experience the process of the whole project. If you feel there is a problem in the process, you can immediately rework and modify it. If it is a business problem, it is also appropriate to raise it at this time. There is no problem with the page flow. Fix the parameters passed between the pages and write them into the jump link and onLoad parameters respectively. Another advantage of this is that you can actually divide up tasks and assign some of the most relevant pages to one person.

3. Build infrastructure

The applets infrastructure includes the base style library, Passport login, API request, HTTP wrapper, utility class library, and developing common components.

According to the needs of the design draft, if the small program design style is relatively uniform, we can write a common style, introduced into the app.wxSS file, the style in the app.wxSS is shared by all pages.

Passport can be developed in-house or directly using a packaged SDK. Two SDKS are encapsulated for Passport login, one is for businesses that need to open tourist mode and have a login interface, and the other is for businesses that only need wechat authorization and have no login interface.

You are advised to store all API requests in a centralized manner to facilitate interface reuse and unified management and reduce service complexity. It is recommended to write asynchronous requests using Promise for HTTP requests to avoid “hell callbacks” caused by nested callback functions. We can write some general utility classes or methods, such as date formatting, string validation, etc. For all to use. For functional modules that are reused by multiple pages, we encapsulate them as components for multiple pages to reduce development costs.

4. Write static pages

According to the design draft, complete the style and function of each page. We can render the page with mock data first.

5. Back-end integration

When the background interface is OK, we can carry out interface joint adjustment and some optimization and adjustment work.

If the mini program has payment function, be sure to apply for merchant number in advance.

6. After self-testing of test release, first release internal test of experience version. After passing the test of the experience version, you will be questioned by wechat. After passing the audit, it will be tested again. After passing the test, it will be officially released online. (Small program management platform operation)

After we get the design draft, we divide the page first, do simple demo, do task division, build infrastructure, mock rendering page, interface joint adjustment, and test version. This is one of our development processes, so how to develop a small program page?

Page actual combat – Star Energy public welfare ranking project

1. Home page division

Get this design drawing, we can roughly understand that this page contains home page opening screen, bullet screen, popover, TAB switch, date selector, payment, star list these functional modules. Since payment functions are relatively present in multiple pages, they can be made into components that can be reused across multiple pages.

Figure: I want to divide the page into header, Content, and footer

Header: barrage

Content: Homepage opening screen, active popup window, TAB switch, date picker, star list, payment, message prompt box

footer: buttons

Component: Now even abstracting the payment function as a component, other functions are complicated and the entire page is heavy, so I consider splitting the page into modules. Template: home screen, active pop-up window, message prompt box header: pop-up content: TAB switch, date picker, and star list footer: buttons

Component: payment component Template: Home page displays, active pop-ups, and message prompt boxes

2. Definition and use of tempalte

Demo: Home page. WXML file opens developer tools to show how to define a template fragment and then call it in different places? Use the name attribute for the module’s name, and then