UniAPP从入门到精通

---

前言

移动平台UniAPP学习记录

---

学习任务

1. 框架
2. 组件
3. 数据结构
4. 数据传递
5. 项目实战

一、uni-app是什么？

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

二、基础

基础数据绑定、引用

• .vue文件中，**{{msg}}**直接引用script里定义的参数，叫做文本插值
• 这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。每个绑定都只能包含单个表达式
• v-bind动态地绑定一个或多个属性，缩写：，让src后的字符能引用script里定义的参数

<template>
	<view>
		<view> 
			数据学习
		</view>
		<view>{{msg}}</view><!-- 支持引用 -->
		<view>{{1?'对':'错'}}</view><!-- 支持判断 -->
		<view>{{1+1}}</view><!-- 支持运算 -->
		<image v-bind:src="imgUrl"></image>
		<!-- 缩写 -->
		<image :src="imgUrl"></image>
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				msg:'hello',
				imgUrl :'sdadadasda'
			}
		},
		methods: {
			
		}
	}
</script>

<style>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<template>
  <view>
      <view v-for="(item,index) in 10">
      <!-- 通过%运算符求余数，实现隔行换色的效果 -->
      <view :class="'list-' + index%2">{{index%2}}</view>
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return { }
    }
  }
</script>
<style>
  .list-0{
    background-color: #aaaaff;
  }
  .list-1{
    background-color: #ffaa7f;
  }
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

指令

指令是带有 v- 前缀的特殊属性。

• 指令属性的值预期是单个 JavaScript 表达式 (v-for 是例外情况)。
• 指令的作用是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
• 一些指令能够接收一个“参数”，在指令名称之后以冒号（ : ）表示。

data属性

data 必须声明为返回一个初始数据对象的函数（注意函数内返回的数据对象不要直接引用函数外的对象）；否则页面关闭时，数据不会自动销毁，再次打开该页面时，会显示上次数据。

	//正确用法，使用函数返回对象
	data() {
		return {
			title: 'Hello'
		}
	}

	//错误写法，会导致再次打开页面时，显示上次数据
	data: {
		title: 'Hello'
	}

	//错误写法，同样会导致多个组件实例对象数据相互影响
	const obj = {
		title: 'Hello'
	}
	data() {
		return {
			obj
		}
	}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

计算属性computed

• 在模板中复用表达式，或者任何复杂的逻辑计算，都可以写在计算属性中以供重复调用
• 绑定方法和普通属性相同，直接使用**{{属性名}}**即可
• 计算属性是基于它们的响应式依赖进行缓存的,简单地说就是只要计算的结果（参数）没有变，多次调用计算属性不会重复执行和计算，会直接返回缓存中的计算结果（区别于方法，会每次执行）
• 每一个计算属性都包含一个 getter 和一个 setter ，默认是利用 getter 来读取。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。

计算属性的 getter

	<template>
		<view>
			<view>Original message: "{{ message }}"</view>
			<view>Computed reversed message: "{{ reversedMessage }}"</view>
		</view>
	</template>
	<script>
		export default {
			data() {
				return {
					message: 'Hello'
				}
			},
			computed: {
				// 计算属性的 getter
				reversedMessage(){
				  return this.message.split('').reverse().join('')
				}
			}
		}
	</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

结果：

	Original message: "Hello"
	Computed reversed message: "olleH"
1
2

计算属性的 setter

	<template>
		<view>
			<view>{{ fullName }}</view>
		</view>
	</template>
	<script>
		export default {
			data() {
				return {
					firstName: 'Foo',
					lastName: 'Bar'
				}
			},
			computed: {
				fullName: {
					// getter
					get(){
						return this.firstName + ' ' + this.lastName
					},
					// setter
					set(newValue){
						var names = newValue.split(' ')
						this.firstName = names[0]
						this.lastName = names[names.length - 1]
					}
				}
			}
		}
	</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

运行 fullName = ‘John Doe’ 时，setter 会被调用，firstName 和 lastName 也会相应地被更新。

侦听器watch

Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch 。然而，通常更好的做法是使用计算属性而不是命令式的 watch 回调。

• 类型：{ [key: string]: string | Function | Object | Array }
• 一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch() ，遍历 watch 对象的每一个 property 。
• 示例：

<template>
	<view>
		<input type="text" v-model="word">
	</view>
</template>
<script>
	export default {
		data() {
			return {
				word: 'word'
			}
		},
		watch: {
			// 使用watch来响应数据的变化
			word(newVal, oldVal) {
				console.log('最新值是：'+newVal,"原来的值是："+ oldVal);
			}
		},
	}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<script>
	export default {
		data() {
			return {
				a: 1,
				b: 2,
				c: 3,
				d: 4,
				e: {
					f: {
						g: 5
					}
				}
			}
		},
		watch: {
			a: function(val, oldVal) {
				console.log('new: %s, old: %s', val, oldVal)
			},
			// 方法名
			b: 'someMethod',
			// 该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深
			c: {
				handler: function(val, oldVal) { /* ... */ },
				deep: true
			},
			// 该回调将会在侦听开始之后被立即调用
			d: {
				handler: 'someMethod',
				immediate: true
			},
			// 你可以传入回调数组，它们会被逐一调用
			e: [
				'handle1',
				function handle2(val, oldVal) { /* ... */ },
				{
					handler: function handle3(val, oldVal) { /* ... */ },
					/* ... */
				}
			],
			// watch vm.e.f's value: {g: 5}
			'e.f': function(val, oldVal) { /* ... */ }
		}
	}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

Class 与 Style 绑定

对象语法

可以传给 v-bind:class 一个对象，实现动态地切换 class。
也可以在对象中传入更多字段来动态切换多个 class。此外，v-bind:class 指令也可以与普通的 class 共存。

	<template>
		<view>
			<!-- class -->
			<view class="static" :class="{ active: isActive}">111</view>
			<view class="static" :class="{ active: isActive, 'text-danger': hasError }">222</view>
			<!-- style -->
			<view v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">333</view>
		</view>
	</template>
	<script>
		export default {
			data() {
				return {
					isActive: true,
					hasError: false,
					activeColor:"green",
					fontSize:50
				}
			}
		}
	</script>
	<style>
	.static{
		color: #2C405A;
	}
	.active{
		background-color: #007AFF;
	}
	.text-danger{
		color: #DD524D;
	}
	</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

渲染结果

	<view class="static active"></view>

1
2

数组语法

可以把一个数组传给 v-bind:class，以应用一个 class 列表。

<template>
	<view>
		<!-- class -->
		<view class="static" :class="[activeClass,errorClass]">111</view>
		<view class="static" v-bind:class="[isActive ? activeClass : '', errorClass]">222</view><!-- 三元表达式 -->
		<view class="static" v-bind:class="[{ active: isActive }, errorClass]">333</view>
		<!-- style -->
		<view v-bind:style="[{ color: activeColor, fontSize: fontSize + 'px' }]">444</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				isActive: true,
				activeClass: 'active',
				errorClass: 'text-danger',
				activeColor:"green",
				fontSize:50
			}
		}
	}
</script>
<style>
	.static{
		font-size:30rpx;
	}
	.active{
		background-color: #007AFF;
	}
	.text-danger{
		font-size:60rpx;
		color:#DD524D;
	}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

注意：以:style=""这样的方式设置px像素值，其值为实际像素，不会被编译器转换。

此外还可以用 computed 方法生成 class 或者 style 字符串，插入到页面中，举例说明：

  <template>
      <!-- 支持 -->
      <view class="container" :class="computedClassStr"></view>
      <view class="container" :class="{active: isActive}"></view>
      <!-- 不支持 -->
      <view class="container" :class="computedClassObject"></view>
  </template>
  <script>
      export default {
          data () {
              return {
                  isActive: true
              }
          },
          computed: {
              computedClassStr () {
                  return this.isActive ? 'active' : ''
              },
              computedClassObject () {
                  return { active: this.isActive }
              }
          }
      }
  </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

条件渲染

v-if和v-else

三、组件

页面组件pages

导航栏组件tabBar

	"tabBar": {
		"color": "#7A7E83",
		"selectedColor": "#3cc51f",
		"borderStyle": "black",
		"backgroundColor": "#ffffff",
		//"position": "top",
		"list": [{
			"pagePath": "pages/index/index",
			"iconPath": "static/tabs/home.png",
			"selectedIconPath": "static/tabs/home-active.png",
			"text": "主页"
		}, {
			"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",
			"text": "联系"
		}]
	}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

遇到问题及其解决方案

---

心得总结