This is the fifth day of my participation in the August Wen Challenge.More challenges in August

Foundation frame construction and pit drainage memo

I. Introduction and attention points of uniApp

1. Directory structure

2. Go to the page

Uni. NavigateTo Jump to page ②uni. SwitchTab Jump tabbar If the page is on the navigation bar, use ②

Conditional compilation

- # ifdef:ifDefined exists only on a platform - #ifndef:ifNot defined App applications exist in all platforms except for a certain platform: app-Plus micro program: mp-weixin// #ifdef %PLATFORM% Platform specific API implementation// #endif
Copy the code

4. Life cycle

Created () is used in the onLoad onReady component

5. Style layout

  • Use Flex layouts whenever possible and minimize the use of relative and absolute layouts

6. Photo citation

  • The App side before v3 mode and applets do not support the use of local CSS files, including local background images and font files. It can be used only in Base64 mode.
  • To avoid reference problems, image.css. Components use absolute paths
  • Reference path You are advised to use an absolute path starting with ~@

Note: wechat applet does not support relative path (real machine does not support, development tools support)

7. HTML tags

  • The body to switch to the page
  • Div, ul, li to switch to the view
  • A switch to the navigator
  • Span to switch to text
  • Img to image
  • Input is still used, but the type attribute is changed to confirmType
  • The select switch to picker
  • The iframe to switch to the web – the view

8.JsApi

Document, cookie, window, location, Navigator, and localstorage are not available on non-H5 terminals. For example, to use relevant properties, you need to call the Api encapsulated by uniApp:

  • uni.setStorage(key,data)
  • uni.getStorage(key)
  • uni.clearStorage()

9. Applets component support

H5,APP, and applets should be placed in the project’s special folder wxComponents, which is the project root directory

10. Event invocation

For better versatility, some VUE events use UNI events as much as possible

  • @ click using the @ the tap

11. File storage

Strong regulation: avoid multi – end packaging, individual end problems

  • Static can only be used for pictures
  • It is recommended to store CSS and JS files in Common

Pay attention to the point

  • When you need to use applets in vue components, note that usingComponents are configured in globalStyle of pages. Json rather than page-level configuration.
  • All component and attribute names are lowercase and words are hyphenated
  • If the page structure is complex and there are too many CSS styles, using image may slow down the style effect and cause “flash”. In this case, set image{will-change: transform} to optimize this problem
  • If there is a mask layer, disable page scrolling and add @touchmove.stop.prevent=”moveHandle” method

Second, third-party plug-ins

1. ColorUi style library

Official website: www.color-ui.com Introduction: Pure style library, by adding class name Settings to achieve different display examples:

<button class="cu-btn"> default < / button ><button class="cu-btn round">Rounded corners</button>Just add the round attributeCopy the code

2. Luch-request Network request library

Liverpoolfc.tv: ext.dcloud.net.cn/plugin?id=3… Abstract: based on the Promise of cross-platform development, project level library network request (based on Axios do adaptation) secondary packaging to see in this article: blog.csdn.net/r657225738/…

3. HM – search search bar

Liverpoolfc.tv: ext.dcloud.net.cn/plugin?id=9… Description: Contains a drop-down list of candidate words, historical search

4. The Skeleton frame screen

Liverpoolfc.tv: ext.dcloud.net.cn/plugin?id=2… Summary: Display infrastructure at load time to enhance user experience

5. Loading the animation globally

Liverpoolfc.tv: ext.dcloud.net.cn/plugin?id=5… Summary: Loading animations to enhance interaction

6. UCharts graph library

Liverpoolfc.tv: ext.dcloud.net.cn/plugin?id=2… Overview: The full display of charts is supported, but there are few types of charts

9. Custom Tabbar raised navigation bar

Website:Ext.dcloud.net.cn/plugin?id=1…Description: Custom bottom navigation bar