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

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

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:

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

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.

Attribute Description:

The list: