uni-app重点基础知识

2024-03-13 13:51:51

文章目录

uni-app

uni-app

基础使用

介绍

uni-app是一个使用Vue.js开发的所有的前端的应用框架，开发者编写的一套代码，可以发布到iOS、Android、H5、以及各种小程序。

即使不跨端、uni-app同时也是更好的小程序开发框架

环境搭建

安装HbuilderX和小程序开发者工具

创建项目并运行

1、双击打开： HBuilder X

2、创建项目：选择 uni-app(U) —> 填写项目名称 —> 项目路径 —> 确认创建（创建完毕）

3、运行到浏览器：点击运行 —> 运行到浏览器 —> 选择谷歌浏览器

注意第一次打开不会成功哦！

让我们解决一下

配置微信小程序

点击运行 —> 运行到小程序模拟器 —> 选择 **微信开发者工具(W) - ** —> 弹出一个弹窗 —>

将此路径配置到弹窗里面 —> 配置完成后

配置完成后 并不会成功弹出微信小程序的模拟器，我们还需要一下操作

打开 微信小程序 —> 点击设置 —> 点击 安全设置 —> 开启 服务端口 —> 回到 **HBuilder ** —> 点击运行 —> 运行到小程序模拟器 停止一下再重新运行一次 —>就成功了完毕

项目目录

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

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

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

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

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

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

pages 所有的页面存放目录

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

components 组件存放目录

开发规范

为了实现多端兼容，综合考虑编译速度、运行性能等因素，uni-app 约定了如下开发规范：

页面文件遵循 Vue 单文件组件 (SFC) 规范
组件标签靠近小程序规范，详见uni-app 组件规范
接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni，详见uni-app接口规范
数据绑定及事件处理同 Vue.js 规范，同时补充了App及页面的生命周期
为兼容多端运行，建议使用flex布局进行开发

全局配置和页面配置

pages.json 初始样式

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	}
}

pages 是页面配置

globalStyle 是全局配置

页面配置会覆盖全局配置

全局配置（pages.json）

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#F7F7F7	导航栏背景颜色(同状态栏背景色)
navigationBarTextStyle	String	white	导航栏标题颜色及状态栏的前景颜色，仅支持black/white
navigationBarTitleText	String		导航栏标题文字内容
backgroundColor	HexColor	#ffffff	窗口背景色
navigationBarTextText	String	dark	下拉loading的样式，仅支持dark/light
enablePullDownRefresh	Boolean	false	是否开启下拉刷新
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离，单位只支持px

页面配置

创建新项目

在pages文件中新建文件

新建目录 message —> 新建文件 message.vue

在 pages.json 配置

"pages": [ //pages数组中第一项表示应用启动页，参考：ttps://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/message/message"
		}
		{
			"path": "pages/index/index"
		}		
]

注意： pages数组中第一项表示应用启动页，也就是放在数组第一个会在运行的时候被自动显示出来

设置样式

里面用到了 h5（是一个独有的特定的样式）

h5 平台下拉刷新动画，只有circle类型 / 设置 h5 只在里面中影响，不会影响微信小程序的样式

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/message/message",
			"style":{
				"navigationBarTitleText":"信息页",
				"navigationBarBackgroundColor":"#F0AD4E"
			},
			"h5":{
				"pullToRefresh":{
					"color":"#7D26CD"
				}
			}
		},
		{
			"path": "pages/index/index"
		}		
]

配置基本的tabbar

如果应用是一个多tab应用，可以通过tabBar配置项指定tab栏的表现，以及tab切换时显示的对应页。

Tips
1、当设置position为 top时，将不会显示 icon
2、 tabBar中的list是一个数组，只能配置最少2个、最多5个 tab， tab 按数组的顺序排序。

属性	类型	必填	默认值	描述	平台差异说明
color	HexColor	是		tab上的文字默认颜色
selectedColor	HexColor	是		tab上的文字选中时的颜色
backgroundColor	HexColor	是		tab的背景颜色
borderStyle	String	否	black	tabbar上面边框的演示/仅支持black/white	App 2.3.4+支持其他颜色值
list	Array	是		tab的列表，只能配置最少2个、最多5个 tab
position	String	否	bottom	可选值bottom/top	top值仅支持小程序

代码演示

{
	"pages": [
		{
			"path": "pages/message/message",
			"style":{
				"navigationBarTitleText":"信息页",
				"navigationBarBackgroundColor":"#C4E1FF"
			},
			"h5":{
				"pullToRefresh":{
					"color":"#7D26CD"
				}
			}
		},
		{
			"path": "pages/index/index"
		},
		{
			"path": "pages/contact/contact"
		}		
	],
	"globalStyle": {
		...
	},
	"tabBar":{
		"list":[
			{
				"text":"首页",
				"pagePath":"pages/index/index",
				"iconPath":"static/tabs/shouye.png",
				"selectedIconPath":"static/tabs/shouye2.png"
			},
			{
				"text":"信息",
				"pagePath":"pages/message/message",
				"iconPath":"static/tabs/xinxi.png",
				"selectedIconPath":"static/tabs/xinxi2.png"
			},
			{
				"text":"我的",
				"pagePath":"pages/contact/contact",
				"iconPath":"static/tabs/wd.png",
				"selectedIconPath":"static/tabs/wd2.png"
			}
		]
	}
}

condition启动模式配置

启动模式配置，仅在开发期间生效，用于模拟直达页面的场景，如：小程序转发后，用户点击所打开的页面

属性说明：

属性	类型	是否必填	描述
current	Number	是	当前激活的模式，list节点的索引值
list	Array	是	启动模式列表

list说明：

属性	类型	是否必填	描述
name	String	是	启动模式名称
path	String	是	启动页面路径
query	String	否	启动参数

{
	"pages": [
		{
			"path": "pages/message/message",
			"style":{
				"navigationBarTitleText":"信息页",
				"navigationBarBackgroundColor":"#C4E1FF"
			},
			"h5":{
				"pullToRefresh":{
					"color":"#7D26CD"
				}
			}
		},
		...
		{
			"path":"pages/detail/detail",
			"style":{
				"navigationBarTitleText":"详情页"
			}
		}		
	],
	"globalStyle": {
		...
	},
	"tabBar":{
		...
	},
	"condition":{
		"current":0,
		"list":[
			{
				"name":"详情页",
				"path":"pages/detail/detail",
				"query":"id=20"
			}
		]
	}
}

基础组件

text 组件的基本使用

属性名	类型	默认值	说明
selectable	Boolean	false	文本是否可选
space	String		显示连续空格
decode	Boolean	false	是否解码

space值说明

ensp —> 中文字符空格的一半大小

emsp —> 中文字符空格大小

nbsp —> 根据字体设置的空格大小

Tips
组件内只支持嵌套，不支持其它组件或自定义组件，否则会引发在不同平台的渲染差异

decode可以解析的有  < > & ' &ensp; &emsp;。
各个操作系统的空格标准并不一致。
除了文本节点以外的其他节点都无法长按选中
支持ln方式换行。
如果使用组件编译时会被转换为。

代码演示

<template>
	<view>
		<view>
			<text>小田睡着了</text>
		</view>
		<view>
			<text selectable>小田睡着了</text>
		</view>
		<view>
			<text space="ensp">小田  睡着了</text>
		</view>
		<view>
			<text space="emsp">小田  睡着了</text>
		</view>
		<view>
			<text space="nbsp" style="font-size: 10px;">小田  睡着了</text>
		</view>
		<view>
			<text>&amp</text>
		</view>
	</view>
</template>

效果展示

view组件的基本使用

代码演示1

<view>
   <view class="box" hover-class="box-active">我是一个大盒子</view>
</view>
<style>
	.box{
		width: 100px;
		height: 100px;
		background-color: #007AFF;
	}
	.box-active{
		background-color: #2C405A;
	}
</style>

点击box盒子背景颜色发生变化

代码演示2

<view>
		<view class="box2" hover-class="box2-active">
			<view class="box" hover-class="box-active">我是一个大盒子</view>
		</view>
</view>

<style>
	.box{
		width: 100px;
		height: 100px;
		background-color: #007AFF;
	}
	.box2{
		width: 200px;
		height: 200px;
		background-color: #4CD964;
	}
	.box-active{
		background-color: #2C405A;
	}
	.box2-active{
		background-color:#F0AD4E;
	}
</style>

点击 box2 盒子 box2 盒子背景颜色变化

点击 box盒子 box盒子box2盒子都发生变化

为了避免这种情况加上 hover-stop-propagation 属性

<view>
		<view class="box2" hover-class="box2-active">
			<view class="box" hover-class="box-active" hover-stop-propagation>我是一个大盒子</view>
		</view>
</view>

hover-start-time 等待一段时间开始

hover-stay-time 保持一段时间结束

<view>
		<view class="box2" hover-class="box2-active">
			<view class="box" :hover-start-time="2000" :hover-stay-time="2000" hover-class="box-active" hover-stop-propagation>我是一个大盒子</view>
		</view>
</view>

button按钮组件的基本使用

点击看这个链接 https://uniapp.dcloud.io/component/button 就可以了

image组件的基本使用

点击看这个链接 https://uniapp.dcloud.io/component/image 就可以了

uni中样式的学习及如何使用scss和字体图标

1、 rpx即响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx实际显示效果会等比放大。

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

3、支持基本常用的选择器class.id、element等

4、在uni-app中不能使用*选择器。

5、 page相当于body节点

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

7、 uni-app支持使用字体图标，使用方式与普通web项目相同，需要注意以下几点:

字体文件小于40kb.uni-app会自动将其转化为base64格式;
字体文件大于等于40kb，需开发者自己转换，否则使用将不生效;
字体文件的引用路径推荐使用以~@开头的绝对路径。

总结：

1、把字体图标的文件放在项目static文件中

2、在App.vue文件中导入

@import url("../static/fonts/iconfont.css")

3、把需要的导入的文件改一下

url('~@/static/fonts/........')

这样就可以了

scss插件安装

工具 —> 插件安装 —> 找到 scss/sass编译 然后安装

全局样式

在 uni-scss 文件中 $global-color：red

在其他文件使用：background:$global-color;

颜色就成红色了

基础的数据双向绑定

代码演示

<view>
  <view>{{msg}}</view>
  <view>{{'你好'+'世界'}}</view>
  <view>{{1+1}}</view>
  <view>{{flag? '我是真的' : '我是假的'}}</view>
</view>
<sceipt>
  export default{
      data() {
          return {
              msg:'hello',
              flag:true
          }
      }
  }
</script>

输出结果：

hello

你好世界

我是真的

v-bind和v-for的使用

v-bind

<view>
  <view>
    <image :src="imgUrl"></image>
  </view>
</view>
<sceipt>
  export default{
      data() {
          return {
              imgUrl:'http://destiny001.gitee.io/image/monkey_02.jpg',
          }
      }
  }
</script>

v-for

<view>
  <view v-for="(item,index) in arr" :key="item.id">
    序号：{{index}}，姓名：{{item.name}}，年龄：{{item.age}}
  </view>
</view>
<sceipt>
  export default{
      data() {
          return {
              arr: [
                  {
                      name:'小田',
                      age: 20,
                      id: 1
                  },
                  {
                      name:'小白',
                      age: 24,
                      id: 2
                  }，
                  {
                      name:'大田',
                      age: 30,
                      id: 3
                  }
              ]
          }
      }
  }
</script>

如何注册事件和传递参数及获取到事件对象

v-on / @

代码演示

<template>
	<view>
		<button @click="clickHandle(20)">点击我一下吧</button>
	</view>
</template>
<script>
	export default{
		methods:{
			clickHandle(num){
				console.log(num)
			}
		}
	}
</script>

如何拿到事件对象

方法一、

<template>
	<view>
		<button @click="clickHandle()">点击我一下吧</button>
	</view>
</template>
<script>
	export default{
		methods:{
			clickHandle(e){
				console.log(e)
			}
		}
	}
</script>

方法二、

<template>
	<view>
		<button @click="clickHandle(20,$event)">点击我一下吧</button>
	</view>
</template>
<script>
	export default{
		methods:{
			clickHandle(num,e){
				console.log(num,e)
			}
		}
	}
</script>

生命周期函数

生命周期的概念：一个对象从创建、运行、销毁的整个过程被称为生命周期

生命周期函数：在生命周期中每个阶段会伴随着每一个函数的触发，这些函数被称为生命周期函数

应用生命周期函数：

函数名	说明
onLaunch	当uni-app初始化完成时触发(全局只触发一次)
onShow	当uni-app启动，或从后台进入前台显示
onHide	当uni-app从前台进入后台
onError	当uni-app报错时触发

页面的生命周期

函数名	说明
onLoad	监听页面加载，其参数为上个页面传递的数据，参数类型为Object(用于页面传参)
onShow	监听页面显示，页面每次出现在屏幕上都触发，包括从下级页面返回露出当前页面
onReady	监听页面初始化渲染完成
onHide	监听页面隐藏

下拉刷新

需要在 pages.json 文件中，找到当前页面的pages节点，并在style选项中开启 enablePullDownRefresh

"enablePullDownRefresh": true

监听下拉刷新

onPullDownRefresh

<template>
	<view>
		<view>这是列表页</view>
		<view v-for="item in list">
			{{item}}
		</view>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				list:['王力宏','白敬亭','秦奋','田思雨','某人']
			}
		},
		// 触发下拉刷新
		onPullDownRefresh() {
			this.list = ['秦奋','田思雨','王力宏','白敬亭','某人']
		}
	}
</script>

当触发下拉刷新事件时，会立刻刷新列表里面的内容

我们可以设置一个定时器，当触发下拉刷新事件会，2秒后运行

// 触发下拉刷新
 onPullDownRefresh() {
  setTimeout(()=>{
    this.list = ['秦奋','田思雨','王力宏','白敬亭','某人']
  },2000)
 }

关闭下拉刷新

uni.stopPullDownRefresh()

// 触发下拉刷新
 onPullDownRefresh() {
  setTimeout(()=>{
    this.list = ['秦奋','田思雨','王力宏','白敬亭','某人']
    // 停止下拉刷新
    uni.stopPullDownRefresh()
  },2000)
 }

通过点击按钮触发下拉刷新

通过 uni.startPullDownRefresh() 开启下拉刷新

开始下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新—致。

<button type="default" @click="pullDown">下拉刷新</button>

<script>
	export default{
		data() {
			return {
				list:['王力宏','白敬亭','秦奋','田思雨','某人']
			}
		},
		// 触发下拉刷新
		onPullDownRefresh() {
			setTimeout(()=>{
				this.list = ['秦奋','田思雨','王力宏','白敬亭','某人']
				uni.stopPullDownRefresh()
			},2000)
		},
		methods: {
			pullDown() {
				uni.startPullDownRefresh()
			}
		}
	}
</script>

上拉刷新

1、配置json.js文件

"onReachBottomDistance":200

距离底部200px触发触底事件，如果不配置默认是50px

2、通过 onReachBottom() 监听上拉刷新事件

<template>
	<view>
		<view>这是列表页</view>
		<view class="content" v-for="item in list">
			{{item}}
		</view>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				list:['王力宏','白敬亭','秦奋','田思雨','某人','王力宏','白敬亭','秦奋','田思雨','某人']
			}
		},
		onReachBottom() {
			console.log('页面触底了')
			this.list = [...this.list,...['力宏','小白','大田','小田']]
		}
	}
</script>

<style>
	.content{
		height: 100px;
	}
</style>

当滚动条距离底部200 的时候，触发 onReachBottom() 事件，给list数组追加内容

网络请求

uni.request(OBJECT)

发送网络请求

在各个小程序平台运行时，网络相关的 API 在使用前需要配置域名白名单。

具体内容看：https://uniapp.dcloud.io/api/request/request

简单获取一下值，代码如下：

<template>
	<view>
		<button type="default" @click="get">发生get请求</button>
	</view>
</template>

<script>
	export default{
		methods: {
			get() {
				uni.request({
					url:"http://localhost:8082/api/getlunbo",  // 开发者服务器接口地址
					success(res) {  // 收到开发者服务器成功返回的回调函数
						console.log(res)
					}
				})
			}
		}
	}
</script>

数据缓存

<template>
	<view>
      <button type="default" @click="setStorage">存储数据</button>
      <button type="default" @click="getStorage">获取数据</button>
      <button type="default" @click="removeStorage">清除数据</button>
	</view>
</template>

<script>
	export default{
		methods: {
			setStorage() {
			    // 存储数据
				uni.setStorage({
					key:'id',  // 存储到本地的名称
					data:80,  // 存储到本地的数据
					success () {
						console.log('存储成功')
					}
				})
			},
			getStorage() {
			    //  获取数据
				uni.getStorage({
					key:'id',
					success(res) {
						console.log('获取成功',res)
					}
				})
			},
			removeStorage() {
			    //  清除数据
				uni.removeStorage({
					key:'id',
					success() {
						console.log('移除成功')
					}
				})
			}
		}
	}
</script>

以上方法是异步的，下面我们看看同步方法吧！

<template>
	<view>
		<button type="default" @click="setStorage">存储数据</button>
		<button type="default" @click="getStorage">获取数据</button>
		<button type="default" @click="removeStorage">清除数据</button>
	</view>
</template>

<script>
	export default{
		methods: {
			setStorage() {
				uni.setStorageSync('id',800)
			},
			getStorage() {
				const res = uni.getStorageSync('id')
				console.log(res)
			},
			removeStorage() {
				uni.removeStorageSync('id')
			}
		}
	}
</script>

补充：

异步清理本地数据缓存：uni.clearStorage()

同步清理本地数据缓存：uni.clearStorageSync()

以上方法是清除本地所以数据缓存，一般不使用

图片的上传和预览

<template>
	<view>
		<button type="primary" @click="chooseImg">上传图片</button>
	</view>
</template>

<script>
	export default {
		methods:{
			chooseImg() {
				uni.chooseImage({
					count:5,
					success(res) {
						console.log(res)
					}
				})
			}
		}
	}
</script>

通过以上代码的运行，发现：

在浏览器，一次上传的图片（多选）的数量不受限制，即使你设置了count值是5 ，当我们同时选中6张图片也可以获取到。

在小程序端，如果一次多选6张，只会上传5张

上传图片

<template>
	<view>
		<button type="primary" @click="chooseImg">上传图片</button>
		//  展示图片
		<image v-for="item in imgArr" :src="item"></image>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				imgArr:[]
			}
		},
		methods:{
			chooseImg() {
				uni.chooseImage({
					count:5,  // 限制图片上传数量
					success: res => {
						this.imgArr = res.tempFilePaths
					}
				})
			}
		}
	}
</script>

上传图片并预览

<template>
	<view>
		<button type="primary" @click="chooseImg">上传图片</button>
		<image v-for="item in imgArr" :src="item" @click="previewImg(item)"></image>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				imgArr:[]
			}
		},
		methods:{
			// 上传图片
			chooseImg() {
				uni.chooseImage({
					count:5,
					success: res => {
						this.imgArr = res.tempFilePaths
					}
				})
			},
			// 点击图片预览
			previewImg(current){
				// current 预览的路径
				// urls 需要预览的图片链接列表
				// loop 是否循环预览(小程序和浏览器上没有效果，只有在APP上有效果)
				uni.previewImage({
					current,
					urls:this.imgArr,
					loop:true,
				})
			}
		}
	}
</script>

条件编译跨端兼容

跨端兼容

uni-app 已将常用的组件、JS API 封装到框架中，开发者按照 uni-app 规范开发即可保证多平台兼容，大部分业务均可直接满足。

但每个平台有自己的一些特性，因此会存在一些无法跨平台的情况。

大量写 if else，会造成代码执行性能低下和管理混乱。
编译到不同的工程后二次修改，会让后续升级变的很麻烦。

条件编译

条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。

**写法：**以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。

#ifdef：if defined 仅在某平台存在
#ifndef：if not defined 除了某平台均存在
%PLATFORM%：平台名称

方法一、

<template>
	<view>
	    <!-- #ifdef H5 -->
		<view>我希望只在h5页面中看见</view>
		<!-- #endif -->
		
		<!-- #ifdef MP-WEIXIN -->
		<view>我希望只在微信小程序页面中看见</view>
		<!-- #endif -->
	</view>
</template>

方法二、

<script>
	export default {
		onLoad() {
			//  #ifdef H5
			console.log('我希望在h5中打印')
			//  #endif
			
			//  #ifdef MP-WEIXIN
			console.log('我希望在微信小程序中打印')
			//  #endif
		}
	}
</script>

方法三、

<template>
	<view>
	    <!-- #ifdef H5 -->
		<view>我希望只在h5页面中看见</view>
		<!-- #endif -->
		
		<!-- #ifdef MP-WEIXIN -->
		<view>我希望只在微信小程序页面中看见</view>
		<!-- #endif -->
	</view>
</template>

<style>
   /* h5中的样式  */
   /* #ifdef H5 */
   view{
	   color: #007AFF;
   }
   /* #endif */
 
   /* 微信小程序中的样式 */
   /* #ifdef MP-WEIXIN */
   view{
	   color: #4CD964;
   }
   /* #endif */
</style>

导航跳转

声明式导航

<template>
	<view>
		<view>导航跳转的学习</view>
		<navigator url="/pages/detail/detail">跳转至详情页</navigator>
		<!-- 跳转到tabber的页面中需要在 open-type 属性中添加 switchTab -->
		<navigator url="/pages/message/message" open-type="switchTab">跳转至信息页</navigator>
	    <!-- 跳转到详情页会销毁前一个页面，没有返回上一页的按钮 -->
		<navigator url="/pages/detail/detail" open-type="redirect">跳转至详情页</navigator>
	</view>
</template>

<script>
	export default{
		// 监听页面卸载函数
		// 当我们点击跳转带有 open-type="redirect" 的导航，会被监听到导航页面卸载了
		onUnload() {
			console.log('导航页面卸载了')
		}
	}
</script>

编程式导航

<template>
	<view>
		<view>导航跳转的学习</view>
		<view>
			<view>编程式导航</view>
			<button @click="goDetail">跳转至详情页</button>
			<button @click="goMessage">跳转至信息页</button>
			<button @click="redirectDetail()">跳转至详情页并关闭当前页面</button>
		</view>
	</view>
</template>

<script>
	export default{
		// 监听页面卸载函数
		onUnload() {
			console.log('导航页面卸载了')
		},
		methods:{
			goDetail() {
				uni.navigateTo({
					url:'/pages/detail/detail'
				})
			},
			goMessage() {
				uni.switchTab({
					url:'/pages/message/message'
				})
			},
			redirectDetail() {
				uni.redirectTo({
					url:'/pages/detail/detail'
				})
			}
		}
	}
</script>

在点击 跳转至信息页 按钮时，我们会发现，运行了 onUnload() 函数，是因为：

uni.switchTab() 跳转到tabBar页面，并且关闭其他所有非tabBar页面

传参

在 navigator.js文件进行传参

<template>
	<view>
			<view>传参</view>
			<navigator url="/pages/detail/detail?id=80&age=19">跳转至详情页</navigator>
    </view>
</template>

在detail.js文件获取

<script>
	export default{
		onLoad(options){
			console.log(options)
		}
	}
</script>

组件的创建和使用

新建一个components文件夹 —> 在文件夹中新建test.vue文件 —> 在需要用到组件的文件中导入：import test from ‘…/…/components/test.vue’ —> 在components函数中：testa:test 在当前文件中展示的时候用testa 、展示的时候要显示的哪个组件 test —> 在template标签中直接使用 ----> 完毕

代码： test.vue

<template>
	<view>
		<view>这是test组件</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			};
		}
	}
</script>

<style>
</style>

代码： index.js

<template>
	<view class="content">
	    <testa></testa>
	</view>
</template>

<script>
	import test from '../../components/test.vue'
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		},
		components:{
			// 展示的时候 用testa
			// 展示的时候 要显示的哪个组件 test
			testa:test
		}
	}
</script>

<style>
</style>

生命周期函数

生命周期钩子	描述	H5	App端	微信小程序
beforeCreate	在实例初始化之后被调用详情	√	√	√
created	在实例创建完成后被立即调用详情	√	√	√
beforeMount	在挂载开始之前被调用详情	√	√	√
mounted	挂载到实例上去之后调用详情注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用$nextTick 详情	√	√	√
beforeUpdate	数据更新时调用，发生在虚拟 DOM 打补丁之前详情	√	√	√
updated	由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子详情	√	√	√
activated	被 keep-alive 缓存的组件激活时调用详情	√	√	x
deactivated	被 keep-alive 缓存的组件停用时调用详情	√	√	x
beforeDestroy	实例销毁之前调用。在这一步，实例仍然完全可用详情	√	√	√
destroyed	Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁详情	√	√	√
errorCaptured	当捕获一个来自子孙组件的错误时被调用详情	√	√	√

组件之间的通讯方式

父传子

通过 props 传递参数

父组件 index.vue

<template>
  <view>
   <test :title="title"></test>
  </view>
</template>

<script>
  export default{
      data() {
          return {
              title: 'Hello'
          }
      },
      
  }
</script>

子组件 test.vue

<template>
  <view>
     这是父组件传递过来的数据{{title}}
  </view>
</template>

<script>
  export default{
      data() {
          return {
              num:3
          }
      },
      props:['title']
  }
</script>

子传父

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

父组件 index.vue

<template>
	<view class="content">
		<testa @myNum="getNum"></testa>
		<view>{{num}}</view>
	</view>
</template>

<script>
	import test from '../../components/test.vue'
	export default {
		data() {
			return {
				num:0
			}
		}
		methods: {
			getNum(num) {
				this.num = num
				console.log(this.num)
			}
		},
		components:{
			// 展示的时候 用testa
			// 展示的时候 要显示的哪个组件 test
			testa:test
		}
	}
</script>

<style>
</style>

子组件 test.vue

<template>
	<view>
		<view>这是test组件</view>
		<button @click="getNum">给父组件传值</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num:3
			};
		},
		methods: {
			getNum() {
				console.log('给父组件传值')
				this.$emit('myNum',this.num)
			}
		}
	}
</script>

<style>
</style>

兄弟传值

通过 uni.$on 注册一个全局监听事件，通过 uni.$emit 触发全局监听事件

创建组件a，b，引入到index.vue, 在components注册

a.vue

<template>
	<view>
		<button @click="addNum" type="default">这是a组件 我要修改b组件的值</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num:1
			};
		},
		methods:{
			addNum () {
				uni.$emit('updateNum',this.num)
			}
		}
	}
</script>

<style>
</style>

b.vue

<template>
	<view>
		这是b组件的值：{{num}}
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num:3
			};
		},
		created() {
			uni.$on('updateNum',num => {
				this.num+=num
			})
		}
	}
</script>

<style>
</style>

index.vue

<template>
	<view class="content">
		<view>
			<test-a></test-a>
			<test-b></test-b>
		</view>
	</view>
</template>

<script>
	import testA from '../../components/a.vue'
	import testB from '../../components/b.vue'
	export default {
		data() {
			return {
			}
		},
		components:{
			'test-a':testA,
			'test-b':testB
		}
	}
</script>

<style>
</style>

码农公寓

文章目录

uni-app

基础使用

介绍

环境搭建

创建项目并运行

配置微信小程序

项目目录

开发规范

全局配置和页面配置

pages.json 初始样式

pages 是页面配置

globalStyle 是全局配置

全局配置（pages.json）

页面配置

创建新项目

配置基本的tabbar

condition启动模式配置

基础组件

text 组件的基本使用

view组件的基本使用

button按钮组件的基本使用

image组件的基本使用

uni中样式的学习及如何使用scss和字体图标

基础的数据双向绑定

v-bind和v-for的使用

v-bind

v-for

如何注册事件和传递参数及获取到事件对象

如何拿到事件对象

方法一、

方法二、

生命周期函数

下拉刷新

监听下拉刷新

关闭下拉刷新

通过点击按钮触发下拉刷新

上拉刷新

网络请求

uni.request(OBJECT)

数据缓存

图片的上传和预览

上传图片

上传图片并预览

条件编译跨端兼容

跨端兼容

条件编译

方法一、

方法二、

方法三、

导航跳转

声明式导航

编程式导航

传参

组件的创建和使用

生命周期函数

组件之间的通讯方式

父传子

子传父

兄弟传值

相关文章