Uni-app Learning Notes series

【 knowledge 】Uni-app- Learning Notes 01

Updates continue at……..

Uni-app- Study Notes 01

Environment set up
Page Appearance Configuration
Data binding
Uni-app life cycle
Use of components
Style learning in UNI-app
Use font icon and enable SCSS in UNI-app
Conditional annotation cross-end compatibility

Introduction to UNI-App

Uni-app official website is a framework for developing all front-end applications using vue. js. Developers write a set of code that can be published to iOS, Android, H5, and various small programs (wechat/Alipay/Baidu/Toutiao /QQ/ Dingding) and other platforms.

Uni-app is also a better applets development framework, even if it is not cross-terminal. With the development experience of Vue and wechat applets, uni-App can be used quickly

Why study UNI-App?

For developers, the cost of learning is reduced, because after learning uni-App, you can develop apps for iOS, Android, H5 and various small programs. You don’t need to learn the framework of developing other applications. Compared to companies, the cost of development is also greatly reduced.

1. Environment construction

Install front-end development tool HbuilderX (App development version) download address

Install wechat developer tools download address

2. Initialize the project with HbuilderX

Go to HbuilderX menu bar File > Project > New
Select UNI-app, fill in the project name, directory created for the project
This allows you to create your own projects

3. Run projects

Click Run in the menu bar, run to the browser, select the browser to run

Run uni-App in wechat Developer Tools: Enter the UniApp project and click run in the toolbar -> Run to Mini Program Simulator -> wechat Developer Tools to experience uni-App in wechat Developer Tools

Run in wechat Developer tools: Enter the UniApp project and click run in the toolbar -> Run to Mobile phone or Simulator -> Select mode mobile phone

Note:

If it is the first time to use, you need to configure the path of the small program IDE, to run successfully
Wechat developer tools in the Settings of security Settings, set the service port on

Uni-app basic syntax

1. Introduce the function of project directory and files

Pages is the directory where all pages are stored.

Static Indicates a directory of static resources, such as images.

The app. vue file is the root component of the project. All pages are switched under app. vue. It is the page entry file, which can call the application life cycle function.

The main.js file is the entry file for the project. Its main function is to initialize the vue instance and use the required plug-ins.

The manifest.json file is an application configuration file that specifies the name, icon, and permissions of the application.

The pages. Json file is used to configure uni-app globally, determining the path of the page file, window style, native navigation bar, native tabbar at the bottom, etc.

The uni. SCSS file is used to control the overall application style, such as button color and border style. The uni. SCSS file comes with a batch of SCSS variable presets.

Unpackage is the package directory, where you have the package files for each platform.

Directory where components are stored

In order to achieve multi-terminal compatibility, uni-App has agreed on the following development specifications in consideration of compilation speed and runtime performance:

Page files follow the Vue Single file Component (SFC) specification
Component labels are close to the applets specification, see the UNI-APP Component specification
Interface capability (JS API) close to wechat applets specification, but need to prefixwxReplace withuni, as shown in theUni-app interface specification
Data binding and event handling are the sameVue.jsSpecification, and complement the App and page life cycle
It is recommended that you develop with a Flex layout for multiterminal compatibility

2. Global configuration and page configuration

1) Global configuration via globalStyle in pages. Json

Set the status bar, navigation bar, title, window background color, and so on. Detailed documentation

attribute	type	The default value	describe
navigationBarBackgroundColor	HexColor	#F7F7F7	Background color of navigation bar (same as background color of status bar)
navigationBarTextStyle	String	white	The title color of the navigation bar and foreground color of the status bar can only be black or white
navigationBarTitleText	String		Navigation bar title text content
backgroundColor	HexColor	#ffffff	Background color of the window
backgroundTextStyle	String	dark	Pull-down loading mode, dark/Light only
enablePullDownRefresh	Boolean	false	Whether to enable drop-down refresh. For details, seePage life cycle.
onReachBottomDistance	Number	50	The unit of distance to the bottom of the page when the pull-bottom event is triggered is PX. See detailsPage life cycle

2) Create a new Message page

Right-click Pages to create a new message directory, right-click in the Message directory to create a. Vue file, and select the basic template

</view> </template> <script> </script> <style> </style>Copy the code

3) Configure the page through Pages

attribute	type	The default value	describe
path	String		Configuring the Page Path
style	Object		The configuration page is displayed for configuration item referencepageStyle

The first item in the pages array represents the application startup page

"pages": [{"path":"pages/message/message"
		},
		{
			"path": "pages/index/index"."style": {
				"navigationBarTitleText": "uni-app"}}]Copy the code

Modify the page title and navigation background color by style, and set the unique style of the H5 drop-down refresh

"pages": [
    / / pages start page, said the first item in the array application reference: https://uniapp.dcloud.io/collocation/pages
		{
			"path":"pages/message/message"."style": {
				"navigationBarBackgroundColor": "#007AFF"."navigationBarTextStyle": "white"."enablePullDownRefresh": true."disableScroll": true."h5": {
					"pullToRefresh": {
						"color": "#007AFF"}}}}]Copy the code

4) Configure tabbar in the bottom navigation bar

If the application is a multi-tab application, you can use the tabBar configuration item to specify the performance of the TAB bar and the corresponding page to be displayed when the TAB is switched.

Tips

When position is set to top, icon is not displayed
The list in tabBar is an array. You can configure at least two to a maximum of five tabs. The tabs are sorted in array order.

Attribute Description:

attribute	type	mandatory	The default value	describe	Platform Difference Description
color	HexColor	is		Default color of text on TAB
selectedColor	HexColor	is		The color of the text on TAB when selected
backgroundColor	HexColor	is		The background color of TAB
borderStyle	String	no	black	The color of the border on the tabbar supports only black/white	App 2.3.4+ supports other color values
list	Array	is		For details about the TAB list, see the list attribute description. There are at least two to a maximum of five tabs
position	String	no	bottom	The value can be “bottom” or “top”	The top value is only supported by wechat applets

Where list receives an array where each item in the array is an object with the following attribute values:

attribute	type	mandatory	instructions
pagePath	String	is	The page path, which must be defined in Pages first
text	String	is	TAB button text, optional on 5+APP and H5 platform. For example, an icon with a + sign without text can be placed in the middle
iconPath	String	no	Image path, icon size limit is 40KB, recommended size 81px * 81px, when postion is TOP, this parameter is invalid, network images, font ICONS are not supported
selectedIconPath	String	no	The icon size limit is 40KB, and the recommended size is 81px * 81px. This parameter is invalid when postion is TOP

Case code:

"tabBar": {
		"list": [{"text": "Home page"."pagePath":"pages/index/index"."iconPath":"static/tabs/home.png"."selectedIconPath":"static/tabs/home-active.png"
			},
			{
				"text": "Information"."pagePath":"pages/message/message"."iconPath":"static/tabs/message.png"."selectedIconPath":"static/tabs/message-active.png"
			},
			{
				"text": "我们"."pagePath":"pages/contact/contact"."iconPath":"static/tabs/contact.png"."selectedIconPath":"static/tabs/contact-active.png"}}]Copy the code

5) Condition start mode configuration

The startup mode configuration, effective only during development, is used to simulate the direct page scenario, for example: after the small program is forwarded, the user clicks the opened page.