How to make a uni-app project? Process explanation

How to make a uni-app project? This article will give you a systematic explanation of the process of making a uni-app. I hope it will be helpful to you!

The process of making a uni-app:

Contains a large number of current front-end essential skills, such as vue, WeChat applet , component encapsulation, mobile gesture encapsulation, data paging, axios, moment, flex layout, sass, video playback, video download and other functions. [Related recommendations: "uniapp tutorial"]

1. Introduction to uni-app

1.1 What is uni- app

uni-app is a framework that uses vue.js syntax to develop all front-end applications

can develop various things

It is also called full-end Development framework

2. uni-app basics

2.1 Basic knowledge

• First experience of uni-app
• Project structure introduction
• Style and sass
• Basic syntax
• Events
• Components
• Lifecycle

3. Basics first, then projects

The required technology stack is

• html
• css
• JavaScript
• vue
• WeChat applet
• uni-app
• uni-ui
• uni-api
• moment.js
• gesture encapsulation

4. Use scaffolding to build the project

1. Global Install

npm install -g @vue/cli

2. Create project

vue create -p dcloudio/uni-preset-vue my-project

3. Start project (WeChat applet)

npm run dev:mp-weixin

4. WeChat applet developer tool import project

Remember to enter the root directory

4.1 Project directory

# #4.2 Style and sass

supports rpx of mini programs and vw and vh of h5
• has built-in sass configuration, you only need to install the corresponding dependencies Just "npm install sass-loader node-sass "
• In the vue component, add the attribute "

5. Basic syntax

Basic syntax of Vue

Such as v-bind, v-if, v-show, v-for and so on

6. Use of events

v-on

7. Components

Simple use of components
Component passing parameters
• Component slot

7.1 Simple use of components

Definition of component
• Introduction of component
• Registration of component
• Use of component

7.11 Definition of component

Create a new folder components in the src directory to store components
• Create a new component *.vue directly in the components directory

7.12 Component Introduction

Introduce components into the page "import component name from'component path'"

7.13 Registration of components

In the instance on the page, add the new attribute components
• The attribute components is an object, put the component in and register it

7.14 Component Use

In the tag of the page, directly use the introduced component ""

7.2 Component passing parameters

The parent passes parameters to the child through
• attributes
The child passes parameters to the parent through
• How to trigger events
Use global data to pass parameters
• By mounting the prototype of
  • vue
  By
  • globalData Way

7.21 Parent passes data to child

Parent page to child component
• ul- com passed an array data through the attribute namelist
The subcomponent received the data through
• props

<ul-com : list="[1,2,3,4]">

props: {
list: Array
},

7.22 The child passes data to the parent

The child component passes data to the parent component by
• triggering the event
The parent component listens through
• Event way to receive data

Writing method

methods: {
    handleclick(){
    this.$emit("textchange",'来自子组件的数据');}
}

<ul-com :list="[1,2,3,4]"
@textChange="handleTextchange">

• Set the click event on the child component

• Set the passed parameters in methods

• Set a listening event in the parent and son

• Accept a parameter in the parent's methods

7.3 Global shared data

Share data through Vue’s prototype (obtained with this)
• Share data through globalData (definition Then use getapp to obtain)
• vuex
• Local storage

• Vue.prototype.baseURL="http: //www.baidu.com"

7.4 Component slot

• Tags are actually a type of data. If you want to dynamically transfer tags to sub-components, you can use slots
• to implement placeholders through slots

To put it simply, throw the tag of the parent page to the child page

8. Life cycle

8.1 Introduction

• The life cycle of the uni-app framework combines the life cycle of vue and WeChat applet
• Used in the global APPonLaunch means when the application starts
• is used in the page onLoad or onShow means when the page is loaded and when the page is displayed respectively
• is used in the component mountedWhen the component is mounted

This article is reproduced from: https://juejin.cn/post/6996561691639037983

More For programming-related knowledge, please visit: Introduction to Programming! !

The above is the detailed content of How to make a uni-app project? Process explanation. For more information, please follow other related articles on the PHP Chinese website!