Some thoughts on small program development

This is my participation 8 The fourth of the yuegengwen challenge 20 God , Check out the activity details ：8 Yuegengwen challenge

Some thoughts on small program development

One 、 Before project development

1、 Project architecture phase , Subcontracting shall be decided as early as possible according to the project volume .

For larger volumes 、 For applet projects with more pages , The advantage of subcontracting is ：

• Optimize the overall loading speed of applet ;
• Optimize package size , Avoid exceeding code package limits ;
• Conducive to project management , Quickly locate the page location ;

API：developers.weixin.qq.com/miniprogram…

2、 Picture material in the project 、 Public Large js And so on , Upload to the cloud as soon as possible , Local icon Make folder classification according to the page to facilitate management .

• Whether online or local , Strictly control the size of the picture , Try to avoid the appearance of 100KB The picture above , May seriously affect page performance ;
• Local icon Sub folder management , Quick positioning when replacement or deletion is needed , Avoid redundancy icon Accumulation and waste of time ;

3、 All interfaces or main list details , Handle the interface return exception logic as soon as possible , Agree the exception throwing method with the backend .

• scene 1： Small program end session_key Be overdue

take session_key The logic of expired re acquisition is encapsulated into the public js in , Each interface gets the exception value again according to the exception value agreed with the back end

• scene 2： The backend login status has expired

According to the business scenario , Return to the login page or throw an exception

• scene 3： Other mistakes

According to the business scenario , Return to the login page or throw an exception

I personally believe that the return values and processing methods of different scenarios should be agreed with the backend before development , Adding after the main logic development is completed will waste unnecessary working time . ### Two 、 Project under development

4、 Title of all fixed frames 、 If the content exceeds the text length .

• The most common front end style bug One of , If the text length exceeds the normal range, you should always pay attention to adding processing logic in the process of static page development , Avoid waste of work in the testing stage ;

5、 All lists use scroll-view, Drop down loading events should take into account the rendering speed of resources per page , Optimize the user experience .

• All need to use pull-up loading 、 The drop-down refresh 、 Anchor positioning page , Static page development will use scroll-view To write ;
• For pull-up load paging list pages , When considering fast sliding scroll-view Often get stuck and pull again to display the content of the next page , To optimize the user experience interactively , Such as loading icons at the bottom of the page , Interface loading The explicit and implicit time of ;

6、 all image Add... According to the actual use scenario mode.

• The most common front end style bug The second , Static page development process should think of here image How to display , Whether to cut 、 How to deal with deformation , use widthFix、aspectFit And so on mode;

7、 When doing page Jump , Consider which routing method to use .

• Jump between list and details 、 Normal pages and tab Page Jump and other scenes , You can't just use navigateTo, Consider the actual application scenario , Think about whether the current page should be destroyed , Note that the page stack is stacked after the current operation , Flexible use redirectTo、reLaunch And other routing methods ;
• List page message read unread status reset 、 On the details page, pay attention to the button status on the back list page and other scenarios , The development process should take into account , Instead of waiting for the tester to ask , Sub page is a common method for data management of superior pages ：

changeIndexInE: function(){
    let pages = getCurrentPages();   // Get the page stack 
    let prevPage = pages[pages.length - 2];   // Get the parent page 
    prevPage.setData({
      // This is the parent page that needs to be changed data
    })
}
 Copy code 

8、 Flexible use onHide and onUnload.

• onHide： When from the current A Page Jump to another page , be A The page is hidden ;
• onUnload： The current in the A page , When you click the back button , be A Page uninstall ;

Used in this page storage Logic is no longer useful , When unloading pages or hiding pages, empty them in time to avoid memory occupation ;

Two 、 Small problems

9、view If there is... In the label text label ,text The beginning of the label is not on the same line as the closing label , Will hold up view label .

• view Used in text label , Start and close on the same line , Otherwise, there may be blank lines that cannot be deleted anyway

correct ：

<view>
    <text> I am content. </text>
</view>
 Copy code 

error ：

<view>
    <text>
         I am content. 
    </text>
</view>
 Copy code 

10、 Applet gettime Method , Real machine ios There will be compatibility problems at the end , Must take 2019-04-30 Replace with 2019/04/30 Can be used .

The summary is one-sided , I mainly want to remind myself that you can't just focus on the current small functions in the coding process , You should also expand your thinking at any time and think of the relevant parts before and after the function point , Make a good connection between the current function point and its corresponding function point , It will help you save a lot of development time and bug Modify workload , Share with everyone :)