Uni-App 笔记

介绍

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

利用HbuilderX初始化项目

1. 点击 HbuilderX 菜单栏 文件 > 新建 > 项目
2. 选择uni-app,填写项目名称，项目创建的目录

运行项目

在菜单栏中点击运行，运行到浏览器，选择浏览器即可运行

在微信开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具，即可在微信开发者工具里面体验uni-app

在微信开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到手机或模拟器 -> 选择调式的手机

介绍项目目录和文件作用

pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等

manifest.json 文件是应用的配置文件，用于指定应用的名称、图标、权限等。

App.vue是我们的跟组件，所有页面都是在App.vue下进行切换的，是页面入口文件，可以调用应用的生命周期函数。

main.js是我们的项目入口文件，主要作用是初始化vue实例并使用需要的插件。

uni.scss文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置。

unpackage就是打包目录，在这里有各个平台的打包文件

pages所有的页面存放目录

static静态资源目录，例如图片等

components组件存放目录

通过pages来配置页面

pages数组数组中第一项表示应用启动页

"pages": [ 、
    {
        "path":"pages/message/message"
    },
    {
        "path": "pages/index/index",
        "style": {
            "navigationBarTitleText": "uni-app"
        }
    }
]

页面样式与布局

uni-app支持的通用css单位包括px、upx、vh。
upx 是相对于基准宽度的单位，可以根据屏幕宽度进行自适应。uni-app 规定屏幕基准宽度750upx。

upx2px

因为upx是编译器处理的，动态绑定upx不生效
可使用 uni.upx2px(Number) 转换为 px 后再赋值。

// 例如
return uni.upx2px(750 / 2) + 'px';

样式导入

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

内联样式

1. style：静态的样式统一写到 class 中。
<view :style="{color:color}" />

2. class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。
<view class="normal_view" />

3. 选择器
    1). .class
    2). #id
    3). element 选择所有 view 组件

4. 全局样式和局部样式
定义在 App.vue 中的样式为全局样式，作用于每一个页面。在 pages 目录下 的 vue 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 App.vue 中相同的选择器。

背景图片

uni-app 支持使用在 css 里设置背景图片，使用方式与普通 web 项目相同，需要注意以下几点：
1. 支持 base64 格式图片。
2. 支持网络路径图片。
3. 使用本地路径背景图片需注意：
	1). 图片小于 40kb，uni-app 会自动将其转化为 base64 格式；
    2). 图片大于等于 40kb， 需开发者自己将其转换为base64格式使用，或将其挪到服务器上，从网络地址引用。
    3) .本地背景图片的引用路径仅支持以 ~@ 开头的绝对路径（不支持相对路径）。
	// 例如
	 .test2 {
         background-image: url('~@/static/logo.png');
     }

template 和 block

uni-app 支持在 template 模板中嵌套 <template/> 和 <block/>，用来进行 列表渲染 和 条件渲染。

<template/> 和 <block/> 并不是一个组件，它们仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

uni-app基本语法

uni-app中的数据绑定

在页面中需要定义数据，和我们之前的vue一摸一样，直接在data中定义数据即可
export default {
  data () {
    return {
      msg: 'hello-uni-app!!!'
    }
  }
}

插值表达式的使用

1. 利用插值表达式渲染基本数据
<view>{{msg}}</view>

2. 在插值表达式中使用三元运算
<view>{{ flag ? '我是真的':'我是假的' }}</view>

3. 基本运算
<view>{{1+1}}</view>

v-bind动态绑定属性

// 在data中定义了一张图片，我们希望把这张图片渲染到页面上
export default {
  data () {
    return {
      img: 'https://img.qiyuandi.com/images/5/jlyxug3byfxemrc4.jpg'
    }
  }
}

// 利用v-bind进行渲染
<image v-bind:src="img"></image>

// 还可以缩写成:
<image :src="img"></image>

v-for的使用

// data中定以一个数组，最终将数组渲染到页面上
data () {
  return {
    arr: [
      { name: '刘能', age: 29 },
      { name: '赵四', age: 39 },
      { name: '宋小宝', age: 49 },
      { name: '小沈阳', age: 59 }
    ]
  }
}

// 利用v-for进行循环
<view v-for="(item,index) in arr" :key="index">名字：{{item.name}}---年龄：{{item.age}}</view>

uni中的事件

事件绑定

// 在uni中事件绑定和vue中是一样的，通过v-on进行事件的绑定，也可以简写为@
<button @click="tapHandle">点我啊</button>

// 事件函数定义在methods中
methods: {
  tapHandle () {
    console.log('真的点我了')
  }
}

事件传参

/** 默认如果没有传递参数，事件函数第一个形参为事件对象 */
// template
<button @click="tapHandle">点我啊</button>
// script
methods: {
  tapHandle (e) {
    console.log(e)
  }
}

/** 如果给事件函数传递参数了，则对应的事件函数形参接收的则是传递过来的数据 */
// template
<button @click="tapHandle(1)">点我啊</button>
// script
methods: {
  tapHandle (num) {
    console.log(num)
  }
}

/** 如果获取事件对象也想传递参数 */
// template
<button @click="tapHandle(1,$event)">点我啊</button>
// script
methods: {
  tapHandle (num,e) {
    console.log(num,e)
  }
}

uni的生命周期

应用的生命周期

生命周期的概念：一个对象从创建、运行、销毁的整个过程被成为生命周期。
生命周期函数：在生命周期中每个阶段会伴随着每一个函数的触发，这些函数被称为生命周期函数
uni-app 支持如下应用生命周期函数：
1. onLaunch() --- 当uni-app 初始化完成时触发（全局只触发一次）
2. onShow() ---	当 uni-app 启动，或从后台进入前台显示
3. onHide() ---	当 uni-app 从前台进入后台
4. onError() --- 当 uni-app 报错时触发

页面的生命周期

uni-app 支持如下页面生命周期函数：
1. onLoad --- 监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参），参考示例		
2. onShow --- 监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面		
3. onReady --- 监听页面初次渲染完成。		
4. onHide --- 监听页面隐藏		
5. onUnload --- 监听页面卸载

网络请求

在uni中可以调用uni.request方法进行请求网络请求
需要注意的是：在小程序中网络相关的 API 在使用前需要配置域名白名单。

发送GET请求

<template>
	<view>
		<button @click="sendGet">发送请求</button>
	</view>
</template>
<script>
	export default {
		methods: {
			sendGet () {
				uni.request({
					url: 'http://localhost:8082/api/getlunbo',
					success(res) {
						console.log(res)
					}
				})
			}
		}
	}
</script>

发送POST请求

<template>
	<view>
		<button @click="sendGet">发送请求</button>
	</view>
</template>
<script>
	export default {
		methods: {
			sendGet () {
				uni.request({
					url: 'http://localhost:8082/api/getlunbo',
                    method: 'POST',
					success(res) {
						console.log(res)
					}
				})
			}
		}
	}
</script>

uni-app中组件的创建

在uni-app中，可以通过创建一个后缀名为vue的文件，即创建一个组件成功，其他组件可以将该组件通过impot的方式导入，在通过components进行注册即可

// 创建login组件，在component中创建login目录，然后新建login.vue文件
<template>
	<view>
		这是一个自定义组件
	</view>
</template>

<script>
</script>

<style>
</style>
    
// 在其他组件中导入该组件并注册
import login from "@/components/login/login.vue"

// 注册组件
components: {login}

// 使用组件
<login></login>

组件的生命周期函数

组件的生命周期和vue的一样

组件的通讯

父组件给子组件传值

// 通过props来接受外界传递到组件内部的值
<template>
	<view>
		这是一个自定义组件 {{msg}}
	</view>
</template>

<script>
	export default {
		props: ['msg']
	}
</script>

<style>
</style>

// 其他组件在使用login组件的时候传递值
<template>
	<view>
		<test :msg="msg"></test>
	</view>
</template>

<script>
	import test from "@/components/test/test.vue"
	export default {
		data () {
			return {
				msg: 'hello'
			}
		},
		
		components: {test}
	}
</script>

子组件给父组件传值

// 通过$emit触发事件进行传递参数

<template>
	<view>
		<button type="primary" @click="sendMsg">给父组件传值</button>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				status: '打篮球'
			}
		},
		methods: {
			sendMsg () {
				this.$emit('myEvent',this.status)
			}
		}
	}
</script>

// 父组件定义自定义事件并接收参数
<template>
	<view>
		<test @myEvent="getMsg"></test>
	</view>
</template>
<script>
	import test from "@/components/test/test.vue"
	export default {
		methods: {
			getMsg (res) {
				console.log(res)
			}
		},
		
		components: {test}
	}
</script>

兄弟组件通讯

<!-- 兄弟组件通讯使用uni.$emit与uni-$on的方式进行操作 -->

<!-- 例如：A组件 与 B组件是兄弟组件 - 演示 A组件向B组件传递信息，B组件接收 -->
<!-- A组件 --> 
<template>
	<view>
		<button @click="handleClickBtn">点击发送信息</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: '法外狂徒-张三'
			};
		},
		methods: {
			handleClickBtn() {
				uni.$emit('name', this.name);
			}
		}
	}
</script>

<!-- B组件 --> 
<template>
    <view>获取到的内容：{{name}}</view>
</template>

<script>
	export default {
		data() {
			return {
				name: ''
			};
		},
		created() {
			uni.$on('name', value => {
				this.name = value;
			});
		}
	}
</script>