uni-app

Development specification

Directory structure

Resource path description

Introduce static resources into the template

js file introduction

Introduce static resources into css

Lifecycle

Application life cycle

Page life cycle

Routing

Expand All

uni-app uses the syntax of Vue.

# Development specification

In order to achieve multi-terminal compatibility, factors such as compilation speed and running performance are comprehensively considered. uni-app has the following development specifications:

The page file follows the Vue Single File Component (SFC) specification (opens new window)
The component label adopts a custom specification, see uni-app component specification for details
Data binding and event handling are the same as the Vue.js specification, while supplementing the life cycle of App and page
To be compatible with multi-side operation, it is recommended to use flex layout for development

# Directory structure

A uni-app project, which contains the following directories and files by default:

┌─components            ...
│  └─comp-a.vue         ...
├─hybrid                ...
├─platforms             ...
├─pages                 ...
│  ├─index
│  │  └─index.vue       ...
│  └─list
│     └─list.vue        ...
├─static                ...
├─uni_modules           ...
├─main.js               ...
├─App.vue               ...
├─manifest.json         ...
└─pages.json            ...

Tips

When compiling to any platform, the files in the static directory will be fully packaged and will not be compiled. Files (vue, js, css, etc.) not in the static directory will be packaged and compiled only when they are referenced.
The js file in the static directory will not be compiled. If there is es6 code in it, it will report an error on the mobile device if it is run without conversion.
css, less/scss and other resources should not be placed in the static directory. It is recommended that these public resources be placed in the self-built common directory.

Valid directory	Instruction
app-plus	App
h5	H5

# Resource path description

# Introduce static resources into the template

When introducing static resources into template, such as image, video and other tags of the src attribute, you can use a relative path or an absolute path in the form as follows

<!-- For absolute path, /static refers to the static directory under the root directory. For cli project, /static refers to the static directory under the src directory -->
<image class="logo" src="/static/logo.png"></image>
<image class="logo" src="@/static/logo.png"></image>
<!-- Relative path -->
<image class="logo" src="../../static/logo.png"></image>

Notice

The absolute path and relative path starting with @ will be verified by base64 conversion rules
The introduced static resources are not converted to base64 on non-h5 platforms.
On H5 platform, resources less than 4kb will be converted to base64, and the rest will not be converted.
From HBuilderX 2.6.6, template supports the introduction of static resources in the path starting with @, which is not supported by the old version.
From HBuilderX 2.6.9 on the App platform, when static resource files (such as pictures) are referenced in the template node, adjust the search strategy to [Search based on the path of the current file], which is consistent with other platforms

# js file introduction

When importing js files in js files or script tags (including renderjs, etc.), you can use relative paths and absolute paths in the following form

//Absolute path, @ points to the root directory of the project, and in cli projects @ points to the src directory
import add from '@/common/add.js'
// Relative path
import add from '../../common/add.js'

Notice

js files do not support the introduction of the method starting with /

# Introduce static resources into css

For css files or when css files are introduced in style label (same for scss and less files), you can use relative or absolute paths (HBuilderX 2.6.6)

/* Absolute path */
@import url('/common/uni.css');
@import url('@/common/uni.css');
/* Relative path */
@import url('../../common/uni.css');

Notice

From HBuilderX 2.6.6, static resources are imported using absolute paths, which is not supported by the old version.

For css files or pictures referenced in style label, you can use a relative path or an absolute path.

/* Absolute path */
background-image: url(/static/logo.png);
background-image: url(@/static/logo.png);
/* Relative path */
background-image: url(../../static/logo.png);

Tips

For the introduction of font icons, please refer to Font icons
The absolute path and relative path starting with @ will be verified by base64 conversion rules
On H5 platform, resources less than 4kb will be converted to base64 while those more than 4kb will not.
Resources on other platforms will not be converted to base64

# Lifecycle

# Application life cycle

uni-app supports application life cycle functions such as onLaunch, onShow and onHide. Please refer to Application life cycle for details.

# Page life cycle

uni-app supports life cycle functions such as onLoad, onShow and onReady. Please refer to Page life cycle for details.

# Routing

uni-app page routing is managed in a unified way as a framework, and developers need to configure the path and page style of each routing page in pages.json. Therefore, the routing usage of uni-app is different from Vue Router. If you still want to use Vue Router to manage routing, you can search for Vue-Router (opens new window) in the plug-in market.

# Routing jump

uni-app has two page routing jump methods: jump through the navigator component, and jump through the API.

# Page stack

The framework manages all current pages in the form of stack. When a route switch occurs, the page stack behaves as follows:

Routing mode	Page stack performance	Trigger timing
Initialization	New page onto the stack	The first page opened by uni-app
Open a new page	New page onto the stack	Call API uni.navigateTo, use component <navigator open-type="navigate"/>
Page redirection	The current page is out of the stack, and the new page is in the stack	Call API uni.redirectTo, use component <navigator open-type="redirectTo"/>
Page return	The page is constantly popped until the target returns to the page	Call API uni.navigateBack , use component <navigator open-type="navigateBack"/>, user presses back button in the upper left corner, Android user presses back button
Tab switching	All the pages are out of the stack, leaving only the new Tab page	Call API uni.switchTab, use component <navigator open-type="switchTab"/>, user switches Tab
Reload	All the pages are out of the stack, leaving only the new page	Call API uni.reLaunch, Use component <navigator open-type="reLaunch"/>

# Operating environment judgment

# Development environment and production environment

You can use process.env.NODE_ENV to determine whether the current environment of uni-app is a development environment or a production environment. Generally, it is used for dynamic switching of connecting test server or production server.

In HBuilderX, the code compiled by clicking "Run" is the development environment, while the code compiled by clicking "Release" is the production environment.
cli mode is a common way of compilation environment processing.

if(process.env.NODE_ENV === 'development'){
    console.log ('development environment')
}else{
    console.log ('production environment')
}

If more environments need to be customized, such as test environment:

Assuming that you only need to configure a single platform, you can configure it in package.json. There will be one more in the running and publishing menu of HBuilderX. https://uniapp.dcloud.io/collocation/package (opens new window)
If it is configured for all platforms, you can configure it in vue-config.js. https://uniapp.dcloud.io/collocation/vue-config (opens new window)

Shortcut code block

Type in the code blocks uEnvDev and uEnvProd in HBuilderX, then you can quickly generate code for determining the operating environment corresponding to development and production.

// uEnvDev
if (process.env.NODE_ENV === 'development') {
    // TODO
}
// uEnvProd
if (process.env.NODE_ENV === 'production') {
    // TODO
}

# Judgment platform

There are 2 scenarios for platform judgment, one is at compile time and the other is at run time.

Compile time judgment Compile time judgment, i.e., conditional compilation. Different platforms have different codes after compiling the package. For details, see: Conditional compilation

// #ifdef H5
	alert ("Only H5 platform has alert method")
// #endif

The above code will only be compiled to the distribution package of H5 (not other platforms).

Runtime judgment Runtime judgment means that the code has been entered into the package and still needs to be judged at runtime. At this time, you can use uni.getSystemInfoSync().platform to judge whether the client environment is Android or iOS.

switch(uni.getSystemInfoSync().platform){
    case 'android':
       console.log ('Run on Android')
       break;
    case 'ios':
       console.log ('Run on iOS')
       break;
    default:
       Console.log ('Run on developer tools')
       break;
}

If necessary, you can also define a variable and assign it different values in conditional compilation. Dynamically judge the environment in the subsequent running code.

# Other environment variables

For the definition of other environment variables, please refer to Environment variables.

# Page style and layout

css of uni-app is basically the same as that of web. css usage is not covered in this article. Based on your knowledge of web css, this article also describes some style-related considerations.

There are vue page and nvue page in uni-app. vue page is rendered by webview, and that of the app side is rendered natively. Styles are more restricted in nvue pages than in the web. See also Nvue style specific document

In this article, attention is placed on the style considerations of the vue page.

# Size unit

Common css units supported by uni-app include px, rpx

px, i.e. screen pixels
rpx, i.e. responsive px, is a dynamic unit that self-adapts to the screen width. Based on the 750-wide screen, 750rpx is exactly the screen width. When the screen becomes wider, the actual display effect of rpx will be enlarged proportionally. However, when the screen width of App and H5 reaches 960px, it will be calculated according to the screen width of 375px by default. For specific configuration, please refer to: rpx calculation configuration (opens new window).

vue page supports the following common H5 units, but not support in nvue:

rem root font size can be configured through page-meta
vh means viewpoint height. 1vh is equal to 1% of the viewpoint height
vw means viewpoint width. 1vw is equal to 1% of the viewpoint width

nvue does not support percentage units yet.

On the App side, only px is supported for the units involved in titleNView in pages.json. Note that rpx is not supported at this time

In nvue, px and rpx can be used in uni-app mode (Introduction to different compilation modes of nvue (opens new window)), with the same performance as in vue. weex mode currently follows the unit of weex, and its unit is a little bit special:

px: a length unit calculated dynamically on the basic of a 750-wide screen, is the same concept as that of rpx in vue page. (Be sure to pay attention to the px in weex mode, whose logic is different from that of px in vue.)
wx: a length unit independent of the screen width of the device, is the same concept as that of px in the vue page

The following is a detailed description of rpx:

Designers generally only provide drawing with one resolution while providing design drawing.

If you develop strictly according to the px marked by the design icon, the interface is easily deformed on mobile phones of different widths.

Width deformation is dominant. Generally, the height is not easy to go wrong on account of the scroll bar. As a result, a strong demand for dynamic width unit is triggered.

uni-app supports rpx on both the App side and H5 side, and configures different screen width calculation methods. For details, please refer to: rpx calculation configuration (opens new window).

rpx is a unit relative to the reference width, which can be adapted to the screen width. uni-app The specified screen reference width is 750rpx.

Developers can calculate the rpx value of page elements based on the reference width of design draft. The conversion formula between design draft 1px and frame style 1rpx is as follows:

Design draft 1px / design draft baseline width = frame style 1rpx / 750rpx

In other words, the formula for calculating the width of the page element width in uni-app is as follows:

750 * element width in design draft/Design draft baseline width

For example:

If the width of the design draft is 750px and the width of element A on the design draft is 100px, then the width of element A in uni-app should be set to: 750 * 100 / 750, the result is: 100rpx.
If the width of the design draft is 640px and the width of element A on the design draft is 100px, then the width of element A in uni-app should be set to: 750 * 100 / 640, the result is: 117rpx.
If the width of the design draft is 375px and the width of element B on the design draft is 200px, then the width of element B in uni-app should be set to: 750 * 200 / 375, the result is: 400rpx.

Tips

Note that rpx is a unit related to the width. The wider the screen, the larger the actual pixels. If you do not want to zoom according to the screen width, you should use px as the unit.
If the developer also uses rpx in font or height, this writing mode means that as the screen becomes wider, the font and height will become larger. If you need a fixed height, you should use px.
rpx does not support dynamic landscape and portrait screen switching calculation, so it is recommended to lock the screen direction when using rpx
Designers can take iPhone6 as the standard of visual drafts.
If the design draft is not 750px, HBuilderX provides an automatic conversion tool, see: https://ask.dcloud.net.cn/article/35445 (opens new window).
On the App side, only px is supported for the units involved in titleNView in pages.json except for rpx.
Early uni-app provided upx, and now it is recommended to change to rpx. See details (opens new window)

# Style import

The @import sentence can be used to import an external style sheet, @import is followed by the relative path of the external style sheet that needs to be imported, and ; indicates the end of the sentence.

Sample code:

<style>
    @import "../../common/uni.css";

    .uni-card {
        box-shadow: none;
    }
</style>

# Inline style

Frame components support the use of style and class attributes to control the style of components.

style: static styles are uniformly written into class. style receives dynamic styles, which will be parsed at runtime. Please try to avoid writing static styles into style so as not to affect the rendering speed.

<view :style="{color:color}" />

class: used to specify a style rule. Its attribute value is a collection of class selector names (style class names) in the style rule. Style class names do not need to be marked with. The style class names are separated by spaces.

<view class="normal_view" />

# Selector

Currently supported selectors are:

Selector	Example	Example description
.class	.intro	Select all components with class="intro"
#id	#firstname	Select the component with id="firstname"
element	view	Select all view components
element, element	view, checkbox	Select view component of all documents and all checkbox components
::after	view::after	Insert content behind the view component, Only vue page is valid
::before	view::before	Insert content in front of the view component, Only vue page is effective

Notice:

You cannot use the * selector in uni-app.

page is equivalent to the body node, for example:

<!-- Set the background color of the page. Using scoped may cause invalidation -->
page {
  background-color:#ccc;
}

# Global and local styles

The styles defined in App.vue are global styles, which act on every page. The styles defined in the vue file in the pages directory are local styles, which only act on the corresponding pages and will cover the same selectors in App.vue.

Notice:

In App.vue, you can import out-of-line styles through the @import statement, which also applies to every page.
nvue pages do not support global styles temporarily

# CSS variables

uni-app provides built-in CSS variables

CSS variables	Describe	App	H5
--status-bar-height	Height of system status bar	See below for height of system status bar and attentions for nvue	0
--window-top	Distance of the content area from the top	0	Height of NavigationBar
--window-bottom	Distance of the content area from the bottom	0	Height of TabBar

Notice:

var(--status-bar-height) represents the height of the actual status bar of the phone in the App.
When setting "navigationStyle":"custom" to cancel the native navigation bar, the status bar position is occupied because the window is immersive. At this time, a view with a height of var(--status-bar-height) can be placed at the top of the page to prevent the page content from appearing in the status bar.
Since it is on the H5 side, there is no native navigation bar and tabbar and it is also a front-end div simulation. If a fixed-position bottom view is set, it is above the tabbar on the App side, but will overlap with the tabbar on the H5 side. At this time, you can use --window-bottom, no matter which end it is, it is fixed above the tabbar.
Currently nvue does not support the --status-bar-height variable on the App side. The alternative is to obtain the status bar height through uni.getSystemInfoSync().statusBarHeight when the page is onLoad, and then set the height of the placeholder view through style binding. Sample code is provided below

Code block

How to quickly write css variables: type hei in css to display 3 css variables in the candidate assistant. (supported by HBuilderX 1.9.6+)

Example 1 - use css variables on ordinary pages:

<template>
    <!-- page-meta is added to HBuilderX 2.6.3+. See details: https://uniapp.dcloud.io/component/page-meta -->
    <page-meta>
        <navigation-bar />
    </page-meta>
	<view>
		<view class="status_bar">
			<!-- Here is the status bar -->
		</view>
		<view> Text under the status bar </view>
	</view>
</template>	
<style>
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}
</style>

<template>
	<view>
		<view class="toTop">
			<!-- An up arrow can be put here, which shifts up 10px from the bottom tabbar-->
		</view>
	</view>
</template>	
<style>
	.toTop {
		bottom: calc(var(--window-bottom) + 10px)
	}
</style>

Example 2 - get the height of status bar on nvue page

<template>
	<view class="content">
		<view :style="{ height: iStatusBarHeight + 'px'}"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				iStatusBarHeight:0
			}
		},
		onLoad() {
			this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight
		}
	}
</script>

# Fixed value

The height of the following components in uni-app is fixed and cannot be modified:

Component	Describe	App	H5
NavigationBar	Navigation bar	44px	44px
TabBar	Bottom tab	56px before HBuilderX 2.3.4. From 2.3.4+, it was in line with H5, unified to 50px. BBut you can change the height voluntarily)	50px

# Flex layout

To support cross-platform, it is recommended that the framework adopts Flex layout. For Flex layout, please refer to external documents A Complete Guide to Flexbox (opens new window), Ruan Yifeng's flex tutorial (opens new window), etc.

# Background image

uni-app supports being used to set a background image in css in the same way as ordinary web projects, but the following points should be noted:

Support base64 format images.
Support web path images.
Note when using background images from local path:
1. For the convenience of developers, when the background picture is less than 40kb, uni-app will be automatically converted to base64 format when compiled to a platform that does not support local background images;
2. If the image is larger than or equal to 40kb, there may be performance problems. It is not recommended to use too large a background image. If developers must use it, they need to convert it to base64 format or move it to the server and reference it from the network address.
3. The absolute path starting with ~@ is recommended for the reference path of local background images.
```
     .test2 {
         background-image: url('~@/static/logo.png');
     }
```

# Font icon

uni-app supports the use of font icons in the same way as ordinary web projects, but the following points should be noted:

Support base64 format font icons.
Support network path font icons.
The network path must have a protocol header https.
The code copied from http://www.iconfont.cn (opens new window) has no protocol header added by default.
The font files downloaded from http://www.iconfont.cn (opens new window) are all fonts with the same name (the font names are all called iconfont, which can be seen when installing the font files). When using it in nvue, please note that the repeated font name may display abnormally, and you can use the tool to modify it.
Note when using local path icon font:
1. For the convenience of developers, when the font file is less than 40kb, uni-app will automatically convert it to base64 format;
2. If the font size of the file is larger than or equal to 40kb and is still converted to base64, there may be performance problems. If developers must use it, they need to convert it to base64 or move it to the server and reference it from the network address;
3. The absolute path starting with ~@ is recommended for the reference path of the font file.
```
     @font-face {
         font-family: test1-icon;
         src: url('~@/static/iconfont.ttf');
     }
```

You cannot import font files in nvue directly using CSS. Instead, you need to import font files in js using the following method. nvue does not support importing fonts from local paths, please use network links or the form of base64. In the src field, single quotation marks must be used within the brackets of url.

var domModule = weex.requireModule('dom');
domModule.addRule('fontFace', {
  'fontFamily': "fontFamilyName",
  'src': "url('https://...')"
})

Example:

<template>
	<view>
		<view>
			<text class="test">&#xe600;</text>
			<text class="test">&#xe687;</text>
			<text class="test">&#xe60b;</text>
		</view>
	</view>
</template>
<style>
	@font-face {
		font-family: 'iconfont';
		src: url('https://at.alicdn.com/t/font_865816_17gjspmmrkti.ttf') format('truetype');
	}
	.test {
		font-family: iconfont;
		margin-left: 20rpx;
	}
</style>

# `<template/>` and `<block/>`

uni-app supports nesting of <template/> and <block/> in the template for list rendering and conditional rendering.

<template/> and <block/> are not a component but just a packaging element. They will not be rendered on the page and only accept control attributes.

<block/> has certain differences in performance on different platforms. It is recommended to use <template/> uniformly.

Code example

<template>
	<view>
		<template v-if="test">
			<view>Display when test is true</view>
		</template>
        <template v-else>
        	<view>Display when test is false</view>
        </template>
	</view>
</template>

<template>
	<view>
		<block v-for="(item,index) in list" :key="index">
			<view>{{item}} - {{index}}</view>
		</block>
    </view>
</template>

# Supported on ES6

uni-app supports not only most ES6 API, but also await/async of ES7.

For the support of ES6 API, see the following table for details (x means no support, and no special instructions means support):

Because third party js engines are not allowed on iOS, there is no distinction between App and H5 on iOS. Each side only depends on the iOS version.
Differences can be seen among Android versions of various sides:

See the table below for the data of App side;
See caniuse for H5 side;

String	iOS8	iOS9	Android
codePointAt
normalize	x	x	Only NFD/NFC is supported
includes
startsWith
endsWith
repeat
String.fromCodePoint

Array	iOS8	Android
copyWithin
find
findIndex
fill
entries
keys
values	x	x
includes	x
Array.from
Array.of

Number	iOS8	iOS9	iOS10	Android
isFinite
isNaN
parseInt
parseFloat
isInteger
EPSILON
isSafeInteger

Math	iOS8	iOS9	iOS10	Android
trunc
sign
cbrt
clz32
imul
fround
hypot
expm1
log1p
log10
log2
sinh
cosh
tanh
asinh
acosh
atanh

Object	iOS8	iOS9	iOS10	Android
is
assign
getOwnPropertyDescriptor
keys
getOwnPropertyNames
getOwnPropertySymbols

Other	iOS8	iOS9	Android
Symbol
Set
Map
Proxy	x	x	x
Reflect
Promise

Notice

On the App side, Android supports less dependence on the Android version number. The data in the above table is applicable even on Android 4.4. Because js code of uni-app runs in its own independent jscore, there is no browser compatibility problem of js. The vue page of uni-app only has css browser compatibility problem on Android low-end device, because vue page is still rendered in webview. Affected by the Android version, too new css syntax is not supported in lower versions.

# Supported on NPM

Uni-app supports the use of npm to install third-party packages.

This document requires developers to have a certain understanding of npm, so the basic functions of npm will not be introduced. If you do not have access to npm before, please refer to the NPM official document (opens new window).

Initialize npm project

If the npm management dependency has not been used before in the project (no package.json file in the project root directory), please initialize the npm project by executing the command in the project root directory first:

npm init -y

cli project already has package.json by default. The project created by HBuilderX is not available by default and needs to be created by initialization command.

Installation dependencies

Execute the command to install npm package in the root directory of the project:

npm install packageName --save

Usage

You can use npm package after installation, and introduce npm package into js:

import package from 'packageName'
const package = require('packageName')

Notice

In consideration of multi-terminal compatibility, it is recommended to give priority to obtain plug-ins from the uni-app plug-in market (opens new window). Downloading the library directly from npm is easy to be compatible with the H5 side only.
Vue components and js modules that contain operations such as dom and window are not supported on the non-H5 side. The API used by the installed modules and their dependent modules must be the existing API in uni-app. Libraries like jQuery (opens new window) can only be used on the H5 side.
The node_modules directory must be under the root directory of the project. Whether it is a cli project or a project created by HBuilderX.
For the acquisition of ui library, please refer to Multi-terminal UI Library (opens new window)

# Supported by TypeScript

To develop using ts in uni-app, please refer to Vue.js TypeScript Support (opens new window).

The type definition file is provided by the @dcloudio/types module. Please pay attention to the compilerOptions> types section in the configuration tsconfig.json file after installation. Missing or wrong type definitions can be added or modified locally and reported to the official in the meantime to ask for updates.

# Precautions

Please note the following when using ts in uni-app.

# Declare lang="ts"

After declaring lang="ts", all vue components imported from the vue file need to be written in ts.

Sample code

Transform uni-badge.vue

<script lang="ts">
    //Only the core code that needs to be modified is displayed. For the complete code, please refer to the original components.
	import Vue from 'vue';
	export default Vue.extend({
		props: {
			type: {
				type: String,
				default: 'default'
			},
			inverted: {
				type: Boolean,
				default: false
			},
			text: {
				type: [String, Number],
				default: ''
			},
			size: {
				type: String,
				default: 'normal'
			}
		},
		computed: {
			setClass(): string {
				const classList: string[] = ['uni-badge-' + this.type, 'uni-badge-size-' + this.size];
				if (this.inverted === true) {
					classList.push('uni-badge-inverted')
				}
				return classList.join(" ")
			}
		},
		methods: {
			onClick() {
				this.$emit('click')
			}
		}
	})
</script>

Reference the uni-badge component in index.vue

<script lang="ts">
    import Vue from 'vue';
	import uniBadge from '../../components/uni-badge.vue';
	export default Vue.extend({
		data() {
			return {
				title: 'Hello'
			}
		},
		components:{
			uniBadge
		}
	});
</script>

# renderjs

renderjs is a js running in the view layer. Only supported by app-vue and h5.

renderjs has two main functions:

Greatly reduce the communication loss between the logic layer and the view layer, and provide high-performance view interaction capability
Operate dom in view layer and run js library for web

Platform difference description

App	H5
√(2.5.5+, only vue is supported)	√

# Usage mode

Set lang of script node to renderjs

<script module="test" lang="renderjs">
	export default {
		mounted() {
			// ...
		},
		methods: {
			// ...
		}
	}
</script>

# Example

uses the complete echarts (opens new window) on app and h5 through renderjs

# Function details

Greatly reduce the communication loss between the logic layer and the view layer, and provide high-performance view interaction capability

In addition to the separation of the logic layer and the view layer has many advantages, there is a side effect of blocking communication between the two layers.

renderjs runs on the view layer and can be used to directly manipulate the elements of the view layer to avoid communication loss.

In the canvas example of hello uni-app, the App side uses renderjs, and the renderjs running on the view layer directly manipulates the canvas of the view layer to achieve a smooth canvas animation example. You can experience it in the hello uni-app (opens new window) example.

Operate dom in the view layer and run the js library for web. It is officially not recommended to operate dom in uni-app, but if you want to use some libraries that operate dom and window, you can actually use renderjs to solve it.

In the app-vue environment, the view layer is rendered by the webview, and renderjs runs on the view layer, which can naturally operate dom and window.

This is an example of running the full version of echart based on renderjs: renderjs version of echart (opens new window)

In the same way, libraries such as f2 and threejs can all be used in this way.

# Precautions

Currently, only inline use is supported.
Don not reference large class libraries directly. It is recommended to refer to them by creating script dynamically.
You can use the life cycle of vue components but not the life cycle of App and Page
The communication method between the view layer and the logic layer is the same as WXS. In addition, the ComponentDescriptor instance of the current component can be obtained through this.$ownerInstance.
The observation updated data can be directly accessed in the view layer.
The path of the page reference resource in the APP side view layer is computed relative to the root directory, for example:./static/test.js.
On the APP side, dom and bom APIs can be used, but the logic layer data cannot be directly accessed, and uni-related interfaces (such as uni.request) cannot be used
The logic layer and the view layer on the H5 side actually run in the same environment, which is equivalent to using a mixin method to directly access the logic layer data.

# Thanks

uni-app uses the vue grammar to develop multi-terminal applications. Sincere thanks should be given to the Vue team!!

products

HBuilderX uni-app uniCloud uniMPsdk 5+Runtime uni-id uniPay uniPush uni-verify sms uni-starter uni-admin uni-upgrade-center

Operating services

uni-AD uni-stat uni-portal

Developer Services

forum dashboard

Docs

uni-app uniCloud native-support HBuilderX

Ecosystem

Marketplace OAuth

About

DCloud Jobs Terms of service Privacy policy acceptable use policy

bussiness：bd@dcloud.io Advertising：uniad@dcloud.io

# Development specification

# Directory structure

# Resource path description

# Introduce static resources into the template

# js file introduction

# Introduce static resources into css

# Lifecycle

# Application life cycle

# Page life cycle

# Routing

# Routing jump

# Page stack

# Operating environment judgment

# Development environment and production environment

# Judgment platform

# Other environment variables

# Page style and layout

# Size unit

# Style import

# Inline style

# Selector

# Global and local styles

# CSS variables

# Fixed value

# Flex layout

# Background image

# Font icon

# <template/> and <block/>

# Supported on ES6

# Supported on NPM

# Supported by TypeScript

# Precautions

# Declare lang="ts"

# renderjs

# Usage mode

# Example

# Function details

# Precautions

# Thanks

On This Page

# `<template/>` and `<block/>`