Apicloud Development Experience Summary

1. Front-end frame :

Try not to use the heavy-duty framework of jquery, AngularJS, bootstrap, etc. to get rid of the reliance on $ and cultivate your own hands-on habits, but you can use functional independent mobile first frameworks on specific pages based on functional requirements

The default style setting, Dom manipulation, and string handling are recommended for use with the Apicloud Front end framework (Api.js and API.CSS) mobile-side UI Framework recommended AUI

2. Front-End frame:

Try not to use the heavy-duty framework of jquery, AngularJS, bootstrap, etc. to get rid of the reliance on $ and cultivate your own hands-on habits, but you can use functional independent mobile first frameworks on specific pages based on functional requirements

The default style setting, Dom manipulation, and string handling are recommended for use with the Apicloud Front end framework (Api.js and API.CSS) mobile-side UI Framework recommended AUI

3. Screen fitting: To set viewport correctly, we recommend using 720*1280 size UI diagram.

Priority is given to the unit PX of the absolute metering class, which should first be measured in the UI (such as the 720x1280 Dimension chart) for the width or height of the element, divided by the screen magnification (such as the screen magnification of the 720x1280 device is typically 2) to obtain the exact value of the writing style.

!!! Attention!!! : The Apicloud Project acceptance will be installed in a mobile device (such as 720x1280) corresponding to the screen resolution, based on the UI diagram dimensions provided by the design (such as 720x1280).
Compare the running page to the UI. !!! Attention!!! : The implementation of the H5 interface is exactly the same as the UI design, fine to 0.5px. !!! Attention!!! : openframe/Framegroup, you should use auto combined with the margin layout to dynamically adapt to the vagaries of the Android device screen. Recommended Documentation: screen adaptation principle and implementation
Https://docs.apicloud.com/Dev-Guide/screen-adapt-guide

4, window closed processing: the development process as needed to deal with the Android Keyback events and iOS back-slip gestures.

!!! Attention!!! : Android on the window in order to hear the Keyback event, frame can not hear the Keyback event;
In iOS7 above the system can be openwin at the time by setting the slidbackenabled parameter to support the return slip gesture to close the function of the window. !!! Attention!!! : When you close the page in the background, you should be careful to add Animation:{type:"none"in the Close method to prevent the user experience from changing the appearance of the animation;

5, form background picture: Avoid using H5 to achieve body level background picture, can use window or frame's bgcolor parameter in native way to implement efficiently

!!! Attention!!! : It is not recommended to implement the body level background image by assigning background to the BODY element, especially if the large background image of HD is implemented in H5 way, which can seriously affect rendering performance.

6, Navigation switch: Switch the bottom navigation or the top category menu, the need to switch experience smooth, switching process can not appear white screen, splash screen and other phenomena

!!! Attention!!! : It is recommended to use Framegroup to achieve frame switching, to reasonably configure the number of pre-loaded frames, each frame should have a clear refresh mechanism, can not be refreshed and redrawn each time. !!! Attention!!! : The Nvtabbar module is recommended if you use a module to implement the bottom navigation bar.

7, List scrolling: scrolling effect to smooth and smooth, can not use Iscroll and other JS way to achieve scrolling

!!! Attention!!! : It is recommended to use theUI structure of window+ frame to native the scrolling of list pages. !!! Attention!!! : On iOS to support the click on the status bar can automatically return to the top of the effect, you can configure the Openwin or Openframe when the scrolltotop parameters to achieve;
This effect is used in framegroup to ensure that only the Scrolltotop property of the currently displayed frame is true, and that the Scrolltotop property of the other frame is false.

8. Interactive response: The Click event must handle the 300MS delay of the Click event, optimizing the Click Response Speed, and we recommend that you optimize the click speed by adding the Tapmode attribute to the clickable element.

!!! Attention!!! : Engine optimization of element click events with Tapmode attributes is automatically optimized based on the current DOM tree before the Apiready event is triggered.
Data that is loaded after Apiready uses an explicit call to the Api.parsetapmode method for proactive tapmode processing, such as calling the Api.parsetapmode method after loading more data in the pull-up.!!! Attention!!! : To determine the size of the clickable area according to the UE design, you can expand the click Area to ensure the sensitivity of the click Response. !!! Attention!!! : Api.parsetapmode calls have a performance cost and do not need to be called casually. !!! Attention!!! : To define the interactive effect of all button clicks as required, set the correct style value for the Tapmode property, and for click Implementations without interactivity, you can specify no style for the Tapmode property.
However, to optimize the click speed, you must add the Tapmode attribute to the element.

9, the network Request status processing: The app to determine the current network status, the request process to the UI design has a clear status prompt, the network time-out or network request fails to be related to processing and error prompts.

The Common prompt dialog box method is encapsulated under the API object and the DialogBox module. HTTPS://Docs.apicloud.com/client-api/ui-layout/dialogbox

10, data cache: to the GET request to the data cache processing, in the case of the user does not use the network, still can see the static interface layout of the app and the last cached server-side data.

!!! Attention!!! : You can set the cache parameter to true in the Api.ajax method to turn on caching, or you can use the Api.writefile and Api.readfile methods to implement a simple data cache after fetching the data.
or use the FS and DB modules to cache data. HTTPS://docs.apicloud.com/client-api/api#3

11, Picture cache: You must manually do the image cache processing, you need to call the Api.imagecache method implementation.

!! Attention!!! : WebView The default caching mechanism is defective, does not perform well across windows, and there are problems with the size limit of the cached picture.
The picture cache for all Apicloud apps cannot rely on the WebView default caching mechanism and must be implemented manually.

12, image processing: To reduce the memory footprint caused by the picture, reduce the image scaling and other performance of the operation, the server should be based on product design to provide the appropriate size of large map, small map, thumbnails, etc.

!!! Attention!!! : The size of the memory used by the Apicloud app is determined by the size of the page being loaded, usually over the assembly, resulting in an excessive memory footprint for the entire application, and a high cost of scaling the image in the browser. !!! Attention!!! : List of pictures and other thumbnails, wide height should be controlled between 250-300px, smaller than this range of large-screen mobile phone easily distorted, larger than this range consumes more memory and performance.

13. Configure external fonts: You can introduce external fonts according to the needs of your project, but to control the size of external font files, font files should not be too large.

!!! Attention!!! : There are 3 types of fonts on Android: Sans, serif, monospace, the default is sans if not specified by the developer, and these 3 fonts are referenced by the font name during development.
The system automatically corresponds to the built-in font file. However, for external font files, Android can not be implemented through the engine configuration becomes built-in font files, only through the @font-faceway in each page repeatedly loaded,
Each window or frame to use an external font is introduced once, if the font volume is too large to occupy memory and affects the loading speed of the page. !!! Attention!!! : iOS can configure the external font file in the config configuration file, and once configured, it can be specified in the page like the system's built-in font.
No need to be introduced in each window or frame by @font-face. HTTPS://docs.apicloud.com/dev-guide/app-config-manual#14-1

14, JavaScript Template: We recommend using the dot template and other lightweight templates.

!!! Attention!!! : To select the template with mobile first, the volume is small and the generated text is efficient. HTTPS://github.com/apicloudcom/apicloud-js-modules

Apicloud Development Experience Summary