Getting started with uni-app and learning how to use it

note taking course

Tool preparation

Download HBuilderX  Click to download HBuilderX

Download WeChat Developer Tools  Click to download WeChat Developer Tools

Refer to the official website of uni-app for use 

New project run

File --- New --- Project

Run to Google Chrome H5

Run------Google Chrome Open---Open successfully (you may need to install the plug-in for the first time, and compile it for the second time after installing it yourself, it will be successful)

Run to WeChat developer tools

Run ------- The developer tool opens and there will be the following two problems:

For the first time, you will need to fill in the developer tool path (run--run to the applet--run settings--fill in the WeChat development tool path)

Open the running port in the developer tool (Settings--Security Settings--Open the server port)

Mac uses HBuilderX to run uni-app reference for the first time

run to phone

First connect the phone with the data cable

Click to run, run to the mobile phone, select your own device, the mobile phone agrees to install, and the compilation is successful.

All run successfully:

                                

Project directory and file role

Summary: Development specification == "is a combination of Vue and WeChat applets

Global configuration page.json

Refer to uni-app official website

More configuration reference official website

new page

Create a new file under the pages folder:

eg: New message-->message.vue

The pages:[{},{}] in page.json indicate that each item has a path and style to configure a special page, as follows: For more attributes, refer to the official website

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
		    "path" : "pages/message/message",
		    "style" :                                                                                    
		    {
		        "navigationBarTitleText": "消息",
		        "enablePullDownRefresh": true,
				"navigationBarBackgroundColor": "#4dd4d4"
		    }
		    
		},
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页"
			}
		}
	    
    ],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "云上小店",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"uniIdRouter": {}
}

 configure tabbar

 Reference Code:

"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": "组件"
	}, {
		"pagePath": "pages/API/index",
		"iconPath": "static/image/icon_API.png",
		"selectedIconPath": "static/image/icon_API_HL.png",
		"text": "接口"
	}]
}

condition startup configuration

Configure condition in page.json

Run the applet and select from the drop-down menu to directly open the details page: 

Use of uni-app components

Components: the basic structure of building pages   uni-app component reference

Common components

View is equivalent to div in HTML  to understand

Whether the text text component selectable text is optional

button button component   to understand

 image component  to understand

 uni-app style 

 uni-app data binding  

Just like vue, just define data directly in data, use v:bind abbreviation: bind

 v-bind uses the same binding properties as in vue

 v-for is the same as looping array data as in vue

 uni-app binding event

Same as in vue v-on:click="func()" or @click="func()"

Event object: If no parameter is passed, the first one is e by default or the event object is passed through $event

uni-app life cycle

application lifecycle

onLaunch: call once for initialization onShow: call onHide multiple times onError  

Test call:

page life cycle

onLoad fires once onShow fires multiple times onHide fires multiple times

 Pull down to refresh

See  pull down to refresh for details

 Trigger pull-to-refresh 

inside the pages  

enablePullDownRefresh :true 

Called in the page:

uni.startPullDownRefresh() //Enable pull-down refresh

uni.stopPullDownRefresh() //Stop pull-down refresh

 pull up load

Generally used to bottom out and load data

Set bottoming distance

onReachBottomDistance:200 200 from the bottom to preload data

 The page calls onReachBottom(){}

 network request

uni.request   network request

 data cache  

data cache

uni.setStorage 

Asynchronous interface example:

uni.setStorage({
	key: 'storage_key',
	data: 'hello',
	success: function () {
		console.log('success');
	}
});

uni.removeStorage 

Asynchronous interface example:

uni.removeStorage({
	key: 'storage_key',
	success: function (res) {
		console.log('success');
	}
});

More reference official website documents...

Image upload and preview

Upload image uni.chooseimage   detailed explanation

Example:

uni.chooseImage({
	count: 6, //默认9
	sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
	sourceType: ['album'], //从相册选择
	success: function (res) {
		console.log(JSON.stringify(res.tempFilePaths));
	}
});

preview image uni.previewImage

Example usage:

Conditional annotations are cross-end compatible

The h5 applet has some differences in requirements or differences in uni-app itself

ifdef adapts endif

html comments

 js comment

css comments

Navigation jump and parameter passing

 Declarative navigation Use navigator   to understand

open-type="switchTab" can jump to the tabbar page

Example:

<template>
	<view>
		<view class="page-body">
			<view class="btn-area">
				<navigator url="navigate/navigate?title=navigate" hover-class="navigator-hover">
					<button type="default">跳转到新页面</button>
				</navigator>
				<navigator url="redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">
					<button type="default">在当前页打开</button>
				</navigator>
				<navigator url="/pages/tabBar/extUI/extUI" open-type="switchTab" hover-class="other-navigator-hover">
					<button type="default">跳转tab页面</button>
				</navigator>
			</view>
		</view>
	</view>
</template>
<script>
// navigate.vue页面接受参数
export default {
	onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
		console.log(option.id); //打印出上个页面传递的参数。
		console.log(option.name); //打印出上个页面传递的参数。
	}
}
</script>

Programmatic navigation  to understand

uni.navifateTo

Keep the current page, jump to a page in the application, and use it uni.navigateBackto return to the original page.

Example:

//在起始页面跳转到test.vue页面并传递参数
uni.navigateTo({
	url: 'test?id=1&name=uniapp'
});

uni-switchTab

Jump to the tabBar page and close all other non-tabBar pages.

Example:

uni.switchTab({
	url: '/pages/index/index'
});

uni-app creation component

Basically the same as creating components with vue

//页面引入
import test from './components/test'

//注册组件
components:{
   test
}

//页面使用
<test></test>

The component life cycle is basically consistent with Vue

 Component communication method

Similar to vue, father to son, attribute method

From father to son, through the way of attributes

From child to father, the way of triggering events through $emit

//调用子组件
<test :father="father" @sonClick="sonClick"></test>


//子组件接收父组件值
props:['father']


子组件
this.$emit("sonClick",'测试传父组件值');  //触发事件，传值给父组件


//父组件-------子组件传值给父组件
methods:{
sonClick(info){
  console.log(info):
}

Example of passing values ​​between sibling components (event bus in vue components)
:

//全局触发事件
uni.$emit('update',10);
//接收事件
uni.$on('update',(info)=>{
  //...逻辑
})

uni-ui component library use

Understanding the use of extension components  

Go to the plug-in market   Click to go to the plug-in market

Sample Calendar PluginCalendar   Plugin

import plugin 

Select items to import automatically

Component usage

introduce

register 

use

  <uni-calendar 
    :insert="true"
    :lunar="true" 
    :start-date="'2019-3-2'"
    :end-date="'2019-5-20'"
    @change="change"
     />