The following content is the problem I encountered in the development and the solution, if there is any wrong, please also point out ~Copy the code

Develop a small program to step on the pit record.

  1. Using the official Scroll view component, when adjusting the style, the horizontal layout must be set to display: inline-block, otherwise there is no effect. For vertical layout, the Scrollview must have a fixed height, using px/ RPX units. On Android, the scrollbar will be displayed. Set CSS **:: -webkit-scrollBar {display: None}**

  2. 1. CSS -webkit-overflow-scrolling: touch 2. CSS -webkit-overflow-scrolling: touch

  3. An element is fixed at the bottom of the page, and the middle content is beyond the scrolling display. There is no abnormality in Android system, and the fixed element in ios system is ignored, resulting in half display of the last element at the bottom. Obtain the height of the current machine, and then calculate.

  4. For small ICONS on the page, do not use the spritogram to do calculation. First of all, there is no problem in the simulator, but the display will be blurred and the position calculation will not be accurate. (This is the case for 1 and 2 times of graphs) For such ICONS library (Alibaba Vector chart library)/picture CDN as far as possible.

  5. For HTTP not friendly, use HTTPS regardless of links/images/requests. Of course, at the time of development, you can not verify the domain name in the development tool.

  6. Realize page scrolling in the list page to monitor the current page data in real time, as shown in the figure.

    When developing this requirement, the first thing you want to do is to record the scroll bar, and then to make judgments as you scroll the scroll bar, the idea is,

    (1) When looking for the height of the condition of the current page of the record, various reasons lead to inaccurate calculation (request the data of the next page, scroll back and forth page) (2) Call onPageScroll hook is frequently called to do calculation, performance is also affected, so finally give up the implementation of this requirement.

  7. The list on the right scrolls alphabetically, and the list on the main page also scrolls, as shown in the figure. Much like point 6, it also represents abandoning the requirement implementation.

Development of small program optimization

  1. Write custom components, if you have developed vUE partners, see the official documentation should be very easy to understand. Achieve component reuse.
  2. Avoid frequent calls to setData.
  3. Data not related to page rendering should not be placed in data, but in page.
  4. Try to avoid too much complex business logic in the onPageScroll hook.
  5. Subcontract the small program to optimize the rendering time of the first screen.

There are still some needs that haven’t been answered yet.

  • Can it be differentiated according to the experience version/production version? The address of the request interface will be changed according to this. (The goal is that every time you upload, you don’t have to check whether the interface is test/production.)