preface

Systematically explain how to make a uni-app process,

Contains a large number of current front-end essential skills, such as vUE, wechat small program, component packaging, mobile gesture packaging, data paging, Axios, moment, Flex layout, SASS, video playback, video download and so on.

1. The uni – app is introduced

1.1 What is Uni-app

Uni-app is a framework for developing all front-end applications using the vue.js syntax

You can develop all kinds of things

Also called full end development framework

2. The uni – app

2.1 Basic Knowledge

  • At the beginning of uni – app experience
  • Introduction to project Structure
  • Style and sass
  • The basic grammar
  • The event
  • component
  • The life cycle

3. Foundation first, project later

The required technology stack is

  • html
  • css
  • JavaScript
  • vue
  • Wechat small program
  • uni-app
  • uni-ui
  • uni-api
  • moment.js
  • Gestures to encapsulate

4. Scaffolding the project

  1. Global installation
npm install -g @vue/cli
Copy the code
  1. Create a project
vue create -p dcloudio/uni-preset-vue my-project
Copy the code
  1. Start project (wechat mini program)
npm run dev:mp-weixin
Copy the code
  1. Wechat small program developer tool import project

Remember to go to the root directory

4.1 Project Directory

4.2 Styles and SASS

  • Support small program RPX and H5 vw, VH
  • “NPM install sass-loader nod-sass”
  • In vUE, add the property “

Basic grammar

The basic syntax of Vue

Such as v-bind, V-if, V-show, V-for, etc

6. Use of events

v-on

7. The component

  • Simple use of components
  • Component and the cords
  • Component slot

7.1 Simple Use of Components

  • Component definition
  • Component introduction
  • Registration of components
  • Use of components

7.11 Component Definitions

  • Create a components folder under SRC to store the components
  • Create a new component *.vue in the Components directory

7.12 Importing Components

  • Import component name from ‘component path’

7.13 Registering components

  • In the instance on the page, add the attribute Components
  • The property Components is an object in which to register components

7.14 Usage of Components

  • In the TAB of the page, use the imported component “< component >
    “

7.2 Component passing parameters

  • Parents pass arguments to children by property
  • Children pass arguments to parents by firing events
  • Pass parameters using global data
    • By mounting vue on the prototype
    • Through globalData

7.21 Parent passes data to child

  • The parent page passes an array of data to the child component ul-com through the property name list
  • The child component receives data through props
< ul - com: list = "[1, 2, 3, 4]" > props: {list: Array}.Copy the code

7.22 Child passes data to parent

  • Child components pass data to parent components by triggering events
  • The parent component receives data by listening for events

writing

Methods: {handleclick(){this.$emit("textchange",' data from subcomponent '); }}Copy the code
< ul - com: list = "[1, 2, 3, 4]" @ textChange = "handleTextchange" >Copy the code
  1. Set the click event on the child component
  2. The parameters passed in the Methods setting
  3. Set a listener event at the parent-child meeting
  4. Accepts an argument in the parent’s methods

7.3 Globally Shared Data

  • Sharing data through Vue’s prototype (obtained with this)
  • Share data with globalData (get it with GetApp after definition)
  • vuex
  • The local store
Vue.prototype.baseURL="http: //www.baidu.com"

Copy the code

7.4 Component Slots

  • A label is also a type of data. To dynamically pass a label to a child component, use a slot
  • Placeholders are implemented through slot

Simply put, the parent page’s tag is dropped 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
  • The global APP uses onLaunch to indicate when the application is launched
  • Use onLoad or onShow to indicate when the page is loaded and when the page is displayed, respectively
  • Mounted components are successfully mounted