前言
移动平台UniAPP学习记录
学习任务
- 框架
- 组件
- 数据结构
- 数据传递
- 项目实战
一、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>
<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>
指令
指令是带有 v- 前缀的特殊属性。
- 指令属性的值预期是单个 JavaScript 表达式 (v-for 是例外情况)。
- 指令的作用是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
- 一些指令能够接收一个“参数”，在指令名称之后以冒号（ : ）表示。
data属性
data 必须声明为返回一个初始数据对象的函数（注意函数内返回的数据对象不要直接引用函数外的对象）；否则页面关闭时，数据不会自动销毁，再次打开该页面时，会显示上次数据。
//正确用法，使用函数返回对象
data() {
return {
title: 'Hello'
}
}
//错误写法，会导致再次打开页面时，显示上次数据
data: {
title: 'Hello'
}
//错误写法，同样会导致多个组件实例对象数据相互影响
const obj = {
title: 'Hello'
}
data() {
return {
obj
}
}
计算属性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>
结果：
Original message: "Hello"
Computed reversed message: "olleH"
计算属性的 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>
运行 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>
<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>
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>
渲染结果
<view class="static active"></view>
数组语法
可以把一个数组传给 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>
注意：以: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>
条件渲染
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": "联系"
}]
}
遇到问题及其解决方案
心得总结
