Uni-app from Entry to Abandonment (I)

1. Basic introduction

Uni-app 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, Web (responsive), mini programs (wechat/Alipay/Baidu/Toutiao /QQ/ Kuaishou/Dingding/Taobao), Kuaiapp and many other platforms.

Multi-platform cross-terminal use, saving development costs.

2. Environment construction

1. Install vscode or HbuilderX development tools

2. Install the wechat development tool

3. Project catalog and development specifications

3.1. Project directory and file functions

pages

Store the Uni-app page

static

Store static resources (images, fonts, ICONS, etc.)

App.vue

Root component, all pages are switched under app.vue, page entry file

main.js

The entry file of the project, the main function is to initialize the vue instance, and use the required plug-in

manifest.json

The configuration file of the application is used to configure the name, icon, and permission of the application

pages.json

The path to the project page, and the global look

uni.scss

Common style variables that control the overall style of the application

3.2 Development Specifications

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

Page files follow the Vue Single file Component (SFC) specification

Vue Single File Component (SFC) specification:

Vue-loader.vuejs.org/zh/spec.htm…
Component labels are close to the applets specification, see the UNI-APP Component specification

Uniapp. Dcloud. IO/component/R…
Interface capability (JS API) is close to the applets specification, but the prefix wx is replaced with UNI, as described in the UNI-App Interface specification

Development specification:

uniapp.dcloud.io/frame? Id = development…
Data binding and event handling are the same as the vue.js specification and complement the App and page lifecycle
It is recommended that you develop with a Flex layout for multiterminal compatibility

In short, it’s a mix of Vue and applets

4. GlobalStyle Global appearance configuration

The globalStyle property in the pages. Json file

Use to set the application’s status bar, navigation bar, title, window background color, etc

You can also set enablePullDownRefresh to enable pull-down refresh

See:

Uniapp. Dcloud. IO/collocation…

5. Create a page and configure the page

Create a new page file in the Pages folder,

Json file path. In addition to setting the path, you can also set the page appearance style

Code sample

{
    "pages": [{"path": "pages/index/index"./ / home page
            "style": {
                "app-plus": {
                    "pullToRefresh": {
                        "support": true."color": "#ff3333"."style": "default"."contentdown": {
                            "caption": "Drop down to refresh custom text"
                        },
                        "contentover": {
                            "caption": "Free refreshable custom text"
                        },
                        "contentrefresh": {
                            "caption": "Refreshing custom text"}}}}}]}Copy the code

Configure page window display, see:

Uniapp. Dcloud. IO/collocation…

6. Configure the basic Tabbar

If the application is a multi-tab application, you can use the Tabbar configuration item to specify the TAB field and the corresponding page to be displayed when the TAB is switched

Code sample


"tabBar": {
    "color": "#7A7E83"."selectedColor": "#3cc51f"."borderStyle": "black"."backgroundColor": "#ffffff"."list": [{
        "pagePath": "pages/component/index"."iconPath": "static/image/icon_component.png"."selectedIconPath": "static/image/icon_component_HL.png"."text": "Component"
    }, {
        "pagePath": "pages/API/index"."iconPath": "static/image/icon_API.png"."selectedIconPath": "static/image/icon_API_HL.png"."text": "Interface"}}]Copy the code

Tips

When position is set to top, icon will not be displayed, and the top value is only supported by wechat applet

The list in tabbar is an array. You can configure at least two to three tabs. The tabs are sorted according to the array order

Additional tabbar property configuration

For attribute description, see:

Uniapp. Dcloud. IO/collocation…

8. Condition Starts the mode

The boot mode configuration, which only takes effect during development, is used to simulate direct page scenarios, such as:

After the applet is forwarded, the user clicks on the page opened.

Configure it in pages. Json


"condition": { // Mode configuration, effective only during development
    "current": 0.// Active schema (index of list)
    "list": [{
            "name": "swiper".// The schema name
            "path": "pages/component/swiper/swiper".// Start page, mandatory
            "query": "interval=4000&autoplay=false" // The startup parameters are obtained in the onLoad function of the page.
        },
        {
            "name": "test"."path": "pages/component/switch/switch"}}]Copy the code

9. Basic use of the text component

Attributes that

Selectable text is optional

Space Displays consecutive Spaces

Decode Whether to decode

10. Basic use of VIEW components

Hover-class specifies the style to press

Hover-stop-propagation Click prevents bubbles

Hover-start-time Delay in clicking

Hover-stay-time Departure delay

11. Use of button component

The size size

Type type

Plain whether hollow

Disabled Whether to disable it.

Loading in the load

For other attributes, see:

Uniapp. Dcloud. IO/component/b…

12. Basic use of image component

Display images

SRC Indicates the image resource address

Mode Mode for clipping and zooming pictures

Lazy – load lazy loading

For other attributes, see:

Uniapp. Dcloud. IO/component/I…

13. Learning styles in UNI and how to use SCSS and font ICONS

RPX is a responsive PX, a dynamic unit that ADAPTS to the width of the screen.

Based on a 750-wide screen, 750rpx is exactly the width of the screen. As the screen widens, the actual RPX display will be proportionally enlarged.
The @import statement can be used to import an external style sheet, followed by the relative path of the external style sheet to be imported, using; Indicates the end of the statement.
Support basic common selectors class, ID, Element, etc.
* selector cannot be used in uni-app
Page is equivalent to the body node
The styles defined in app.vue are global and apply to each page.
The styles defined in the vue file in the Pages directory are local, apply only to the corresponding page, and override the same selector in app.vue.
Uni-app supports the use of font ICONS in the same way as normal Web projects. Note the following:

Font files smaller than 40KB are automatically converted to Base64 format by UNI-App;
If the font file is greater than or equal to 40KB, you need to convert it by yourself; otherwise, it will not take effect.
It is recommended that the font file reference path be an absolute path starting with ~@

@font-face {
     font-family: test1-icon;
     src: url('~@/static/iconfont.ttf');
 }
Copy the code

14. Basic data binding

The data needs to be defined in the page, just like we did in vUE, we can define the data directly in data.

Use of V-bind and V-for

Exactly like Vue.

16. How to register events and pass parameters and get event objects

Exactly like Vue.

17. Learning life cycle functions

Application life cycle

The concept of life cycle: The entire process of creating, running, and destroying an object is called the life cycle.

Life cycle functions: Each phase in the life cycle is accompanied by the firing of each function, which is called life cycle functions

Uni-app supports application life cycle functions such as onLaunch, onShow and onHide

For details, see Application life Cycle

The function name	instructions
onLaunch	Triggered when uni-app initialization is complete (globally only triggered once)
onShow	When uni-app is started, or from the background into the foreground display
onHide	When UNI-app goes from the foreground to the background
onError	Triggered when uni-app reports an error

Uni-app supports life cycle functions such as onLoad, onShow and onReady

For details, see page Life Cycle

The function name	instructions
onLoad	Listen to the page load. The parameter is the data passed on the previous page. The parameter type is Object (used for page parameter transfer)
onShow	Listen to the page display. Fires every time the page appears on the screen, including returning from sub-page points to reveal the current page
onReady	The listener page is rendered for the first time. Note that if the rendering is fast, it will trigger before the page is animated
onHide	Listening page hiding

Uni-app components support the same life cycle as vUE standard components. There is no page-level onLoad life cycle.

18. Drop-down Refresh

Page life cycle

onPullDownRefresh

Monitor the user’s pull-down actions, generally used for pull-down refresh

Method of use

Define an onPullDownRefresh handler in JS (the same as life cycle functions such as onLoad) that listens for the user’s pull-down refresh event on the page.

Find the Pages node of the current page in pages. Json and enable enablePullDownRefresh in the Style option.
Uni.stoppulldownrefresh stops the pull-down refresh of the current page when the data refresh is processed.

uni.startPullDownRefresh(OBJECT)

Start pull-down refresh, trigger pull-down refresh animation after the call, the effect is consistent with the user’s manual pull-down refresh.

uni.stopPullDownRefresh()

Stop the current page drop-down refresh.

The sample

pages.json

{
    "pages": [{"path": "pages/index/index"."style": {
                "navigationBarTitleText": "uni-app"."enablePullDownRefresh": true}}]."globalStyle": {
        "navigationBarTextStyle": "white"."navigationBarBackgroundColor": "#0faeff"."backgroundColor": "#fbf9fe"}}Copy the code

index.vue

// As an example only, delay can be used as required in actual development.
export default {
    data() {
        return {
            text: 'uni-app'}},onLoad: function (options) {
        setTimeout(function () {
            console.log('start pulldown');
        }, 1000);
        uni.startPullDownRefresh();
    },
    onPullDownRefresh() {
        console.log('refresh');
        setTimeout(function () {
            uni.stopPullDownRefresh();
        }, 1000); }}Copy the code

19. Pull-up loading

Page life cycle

onReachBottom

An event to scroll to the bottom of a page (not to the bottom of a scroll view), usually used to pull down data from the next page.

Json to define the trigger distance onReachBottomDistance at the bottom of a specific page. For example, if set to 50, the onReachBottom event will be triggered when the page is rolled 50px away from the bottom.

The sample

pages.json

{
    "pages": [{"path": "pages/index/index"."style": {
                "navigationBarTitleText": "uni-app"."enablePullDownRefresh": true."onReachBottomDistance": 200}}]."globalStyle": {
        "navigationBarTextStyle": "white"."navigationBarBackgroundColor": "#0faeff"."backgroundColor": "#fbf9fe"}}Copy the code

index.vue

// As an example only, delay can be used as required in actual development.
export default {
    data() {
        return {
            text: 'uni-app'}},onReachBottom() {
        console.log('Page hit bottom'); }}Copy the code

Uni-app from Entry to Abandonment (I)

1. Basic introduction

2. Environment construction

4. GlobalStyle Global appearance configuration

5. Create a page and configure the page

6. Configure the basic Tabbar

8. Condition Starts the mode

9. Basic use of the text component

10. Basic use of VIEW components

11. Use of button component

12. Basic use of image component

13. Learning styles in UNI and how to use SCSS and font ICONS

14. Basic data binding

Use of V-bind and V-for

16. How to register events and pass parameters and get event objects

17. Learning life cycle functions

18. Drop-down Refresh

19. Pull-up loading

Related Posts

Node batch grab and download little sister photos 👧

Threads, processes, and interprocess communication

React Navigation