关于Uni-app的学习

最新推荐文章于 2022-06-23 11:16:15 发布

QNAN-

最新推荐文章于 2022-06-23 11:16:15 发布

阅读量212

点赞数

文章标签： uni-app vue.js

本文链接：https://blog.csdn.net/QNANWang/article/details/115029883

版权

视频学习：https://www.bilibili.com/video/BV1BJ411W7pX

一、介绍项目目录和文件作用

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布局进行开发

二、全局配置和页面配置

在这里插入图片描述
配置tabBar

"tabBar": {
		"list": [
			{
				"text": "首页",
				"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"
			}
		]
	}

三、Uni中的生命周期函数

在这里插入图片描述

下拉刷新：

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

{
  "path":"pages/list/list",
    "style":{
      "enablePullDownRefresh": true
    }
}

通过调用uni.startPullDownRefresh方法来开启下拉刷新

uni.startPullDownRefresh()

四、网络请求

（一）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',
					data:{
						//需要传入的数据
					}
					success(res) {
						console.log(res)
					}
				})
			}
		}
	}
</script>

五、数据存储

番外：同步和异步的区别
同步：

同步就是指一个进程在执行某个请求时，若该请求需要一段时间返回数据，那么这个进程就会一直等下去，直到成功返回数据后再进行下一步操作；

异步：

异步相反，不需要等待，不管其他进程的状态，继续执行下一步操作，当有数据返回时，就会通知这个进程处理，这样就能提高执行的效率

uni.setStorage将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。

<template>
	<view>
		<button type="primary" @click="setStor">存储数据</button>
	</view>
</template>

<script>
	export default {
		methods: {
			setStor () {
				uni.setStorage({
				 	key: 'id',
				 	data: 100,
				 	success () {
				 		console.log('存储成功')
				 	}
				 })
			}
		}
	}
</script>

<style>
</style>

uni.setStorageSync将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。

<template>
	<view>
		<button type="primary" @click="setStor">存储数据</button>
	</view>
</template>

<script>
	export default {
		methods: {
			setStor () {
				uni.setStorageSync('id',100)
			}
		}
	}
</script>

<style>
</style>

uni.getStorage从本地缓存中异步获取指定 key 对应的内容。

<template>
	<view>
		<button type="primary" @click="getStorage">获取数据</button>
	</view>
</template>
<script>
	export default {
		data () {
			return {
				id: ''
			}
		},
		methods: {
			getStorage () {
				uni.getStorage({
					key: 'id',
					success:  res=>{
						this.id = res.data
					}
				})
			}
		}
	}
</script>

uni.getStorageSync从本地缓存中同步获取指定 key 对应的内容。

<template>
	<view>
		<button type="primary" @click="getStorage">获取数据</button>
	</view>
</template>
<script>
	export default {
		methods: {
			getStorage () {
				const id = uni.getStorageSync('id')
				console.log(id)
			}
		}
	}
</script>

uni.removeStorage从本地缓存中异步移除指定 key。

<template>
	<view>
		<button type="primary" @click="removeStorage">删除数据</button>
	</view>
</template>
<script>
	export default {
		methods: {
			removeStorage () {
				uni.removeStorage({
					key: 'id',
					success: function () {
						console.log('删除成功')
					}
				})
			}
		}
	}
</script>

uni.removeStorageSync从本地缓存中同步移除指定 key。

<template>
	<view>
		<button type="primary" @click="removeStorage">删除数据</button>
	</view>
</template>
<script>
	export default {
		methods: {
			removeStorage () {
				uni.removeStorageSync('id')
			}
		}
	}
</script>

应用：（真实案例）
获取Token并登陆：
使用页面中：

async login(){
				const res=await this.$myRequest({
					url:'/user/login',
					methods:'POST',
					data:{
						  "password": "123321",
						  "username": "admin"
						},	
				})
				// console.log(res.data.data.token,'login')
				uni.setStorageSync('token', res.data.data.token);			
				// uni.getStorageSync('token')						
			}

函数封装：
utils中创建api.js

const BASE_URL='http://12.112.345.154:8001'
export const myRequest =(options)=>{
	return new Promise((resolve,reject)=>{
		uni.request({
			url:BASE_URL+options.url,
			method:options.methods||'GET',
			data:options.data||{},
			header: {Authorization:uni.getStorageSync('token')},
			success:(res)=> {
				if(res.data.status!==200){
					return uni.showToast({
						title:'获取数据失败'
					})
				}
				resolve(res)
			},
			fail:(err)=>{
				uni.showToast({
					title:'请求接口失败'
				})
				reject(err);
			}
		})
		})
}

全局导入（main.js）中：

import { myRequest } from './utils/api.js'
Vue.prototype.$myRequest = myRequest

六、上传图片、预览图片

uni.chooseImage从本地相册选择图片或使用相机拍照。

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

<script>
	export default {
		data () {
			return {
				imgArr: []
			}
		},
		methods: {
			chooseImg () {
				uni.chooseImage({
					count: 9,
					success: res=>{
						this.imgArr = res.tempFilePaths
					}
				})
			}
		}
	}
</script>

预览图片

<view>
	<image v-for="item in imgArr" :src="item" @click="previewImg(item)" :key="item"></image>
</view>
方法：previewImg (current) {
  uni.previewImage({
    urls: this.imgArr,
    current
  })
}

七、关于注释(条件注释实现跨段兼容)

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

写法：以 #ifdef 加平台标识开头，以 #endif 结尾。
在这里插入图片描述

<!-- #ifdef H5 -->
<view>
  h5页面会显示
</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view>
  微信小程序会显示
</view>
<!-- #endif -->
<!-- #ifdef APP-PLUS -->
<view>
  app会显示
</view>
<!-- #endif -->

八、路由跳转

在这里插入图片描述

一、tabBar跳转在`pages.json`中设置

二、利用`navigator`进行跳转

（1）跳转到普通页面

<navigator url="/pages/about/about" hover-class="navigator-hover">
  <button type="default">跳转到关于页面</button>
</navigator>

（2）跳转到TabBar页面

<navigator url="/pages/message/message" open-type="switchTab">
  <button type="default">跳转到message页面</button>
</navigator>

三、利用`navigateTo`进行导航跳转（编程式导航跳转）

保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。

<button type="primary" @click="goAbout">跳转到关于页面</button>

goAbout () {
  uni.navigateTo({
    url: '/pages/about/about',
  })
}

四、通过switchTab跳转到tabbar页面

<button type="primary" @click="goMessage">跳转到message页面</button>

goMessage () {
  uni.switchTab({
    url: '/pages/message/message'
  })
}

五、`redirectTo`进行跳转

关闭当前页面，跳转到应用内的某个页面。

uni.redirectTo({
    url: 'test?id=1'
});

六、导航跳转传递参数

在导航进行跳转到下一个页面的同时，可以给下一个页面传递相应的参数，接收参数的页面可以通过onLoad生命周期进行接收。

传递参数的页面
goAbout () {
  uni.navigateTo({
    url: '/pages/about/about?id=80',
  });
}

接收参数的页面
<script>
	export default {
		onLoad (options) {
			console.log(options)
		}
	}
</script>

Tips：

navigateTo, redirectTo 只能打开非 tabBar 页面。
switchTab 只能打开 tabBar 页面。
reLaunch 可以打开任意页面。
页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
不能在 App.vue 里面进行页面跳转。

九、组件

一、组件的创建

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

创建login组件，在component中创建login目录，然后新建login.vue文件

<template>    
	<view>这是一个自定义组件</view>
</template>
<script></script>
<style></style>

在其他组件中导入该组件并注册

import login from "@/components/test/test.vue"

注册组件

components: {test}

使用组件

<test></test>

在这里插入图片描述

二、组件的通讯

（一）父传子

通过props来接受外界传递到组件内部的值
父传子: 通过: ,子组件通过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触发事件进行传递参数
子传父通过调用方法传递 this.$emit(‘myEvent’,this.num)

子组件
<template>
	<view>
		这是一个自定义组件 {{msg}}
		<button type="primary" @click="sendMsg">给父组件传值</button>
	</view>
</template>

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

父组件定义自定义事件并接收参数

父组件
<template>
	<view>
		<test :msg="msg" @myEvent="getMsg"></test>
	</view>
</template>
<script>
	import test from "@/components/test/test.vue"
	export default {
		data () {
			return {
				msg: 'hello'
			}
		},
		methods: {
			getMsg (res) {
				console.log(res)
			}
		},
		
		components: {test}
	}
</script>

十、日历的使用

官方文档：https://ext.dcloud.net.cn/plugin?id=56

首先，要在组件库中下载
引用

QNAN-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于Uni-app的学习

视频学习：https://www.bilibili.com/video/BV1BJ411W7pX一、介绍项目目录和文件作用pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等manifest.json 文件是应用的配置文件，用于指定应用的名称、图标、权限等。App.vue是我们的跟组件，所有页面都是在App.vue下进行切换的，是页面入口文件，可以调用应用的生命周期函数。main.js是我们的项目入口文件，主要作用是
复制链接

扫一扫