uni-app全局文件与常用API

文章目录

rpx响应式单位
@import导入css样式及scss变量用法与static目录
- import导入css样式
- uni.scss变量用法
pages.json页面路由
- globalStyle的属性
- pages设置页面路径及窗口表现
- tabBar设置底部菜单选项及iconfont图标
vite.config中安装插件unplugin-auto-import自动导入vue和uniapp
uni-api交互反馈
- uni.showToast
- uni.hideToast
- uni.showLoading
- uni.showModal
- uni.showActionSheet
动态设置页面导航栏样式
- uni.setNavigationBarTitle
- uni.setNavigationBarColor
- uni.showNavigationBarLoading
- uni.hideHomeButton
动态设置TabBar样式
- uni.setTabBarItem
- uni.setTabBarStyle
- uni.hideTabBar
- uni.showTabBar
- uni.setTabBarBadge
- uni.removeTabBarBadge
- uni.showTabBarRedDot
- uni.hideTabBarRedDot
下拉刷新 onPullDownRefresh
- uni.startPullDownRefresh(OBJECT)
- uni.stopPullDownRefresh()
页面和路由
- uni.navigateTo(OBJECT)
- uni.reLaunch(OBJECT)
- uni.navigateBack(OBJECT)
StorageSync数据缓存API
- uni.setStorage
- uni.setStorageSync(KEY,DATA)
- uni.getStorage
- uni.getStorageSync(KEY)
- uni.getStorageInfo
- uni.getStorageInfoSync()
- uni.removeStorage(OBJECT)
- uni.removeStorageSync(KEY)
- uni.clearStorage()
- uni.clearStorageSync()
网络
- uni.request发起网路请求3种回调结果调用
- uni.request参数
- - data
  - method有效值
  - header
  - timeout

rpx响应式单位

rpx 即响应式 px，一种根据屏幕宽度自适应的动态单位。以 750 宽的屏幕为基准，750rpx 恰好为屏幕宽度。也就是说，在拿到设计稿后，要把稿件宽度等比缩放为750，再测量各区域的大小。在MasterGo，即时设计中都有相应的功能。

@import导入css样式及scss变量用法与static目录

import导入css样式

之前都是在页面中定义CSS，现在再介绍两种写入css样式的方法。
一种是在主组件app.vue中定义页面的公共css，这样定义可以作用于整个程序，但它的权重是最低的。
在这里插入图片描述
还有一种方法是，把这些css都放到一个公共的目录common中去：
先创建common目录：选中项目-新建-目录

新建好后，可以在里面创建.css文件，就可以在里面设置CSS样式了，最后，去app.vue的style中导入这个css样式，代码如下：

<style lang="scss">
	@import "@/common/css/style.css";
</style>

效果跟在公共css中写入是一样的，这种写法使整个程序更有条理些。

uni.scss变量用法

在项目根目录中有个uni.scss文件
在这里插入图片描述
打开后，里面有很多内置的样式变量，可以直接拿来用的，现在拿个文字颜色过来试试，注意只需要取"$“至”:" 前的内容即可

放到Style中，就可以正常使用了：

<style lang="scss" scoped>
	.layout{
		font-size: 70rpx;
		color: $uni-color-primary;
	}
</style>

我们也可以在uni.scss中自己自定义样式的，模仿它的格式，比如像这样，记住要以$符号开头：

$custom-color-1:blue;
$custom-color-2:yellow;

这里要注意的是，uni.scss是预编译的，在我们自定义后，需要重启一下，才可以使用自定义的样式。

可以给自定义的样式单独创建一个scss文件，然后再去在uni.scss中引入：

@import"@/common/scss/self.scss" ;

pages.json页面路由

globalStyle的属性

pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。打开pages.json，这是globalStyle区域的代码，在其中也是可以配置单个页面的，单个页面的权重是大于globalStyle，下面是备注过的代码：

{
	"pages": [ 
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "white",//导航栏标题颜色，仅支持black/white
		"navigationBarTitleText": "uni-app",//导航栏文字内容
		"navigationBarBackgroundColor": "#2B9939",// 导航栏背景颜色
		navigationStyle:"custom"//导航栏样式，仅支持 default/custom。custom即取消默认的原生导航栏
		"enablePullDownRefresh":true,//是否开启下拉刷新
		"backgroundColor": "#F8F8F8"//下拉显示出来的窗口背景色，仅微信小程序支持
		"backgroundTextStyle":"light"//下拉 loading 的样式，仅支持 dark / light
		"onReachBottomDistance":250//页面上拉触底事件触发时距页面底部距离，单位只支持px
	},
	
	"uniIdRouter": {}
}

其中onReachBottomDistance属性要配合生命周期onReachBottom使用的，该属性表示页面触底事件触发时距页面底部距离，默认值是50。现在在页面中写上onReachBottom来测试一下，代码如下：

<template>
	<view class="layout">
		<view class="box" v-for="item in 100">
			{{item}}
		</view>
	</view>
</template>

<script setup>
import {onReachBottom} from "@dcloudio/uni-app"	
onReachBottom(()=>{
	console.log("到底了");
})
</script>

<style lang="scss" scoped>
	.layout{
		font-size: 70rpx;
		color: $custom-color-2;
	}
</style>

效果：
在这里插入图片描述

pages设置页面路径及窗口表现

通过pages，可以对单个页面进行设置：uni-app 通过 pages 节点配置应用由哪些页面组成，pages 节点接收一个数组，数组每个项都是一个对象，代表着每个页面，其属性值如下：
在这里插入图片描述
pages中Style配置项跟刚刚讲过的globalStyle一样，在这里就不多说了，它的权重是要高于 globalStyle的。

tabBar设置底部菜单选项及iconfont图标

tabBar设置的就是小程序底部的菜单栏，一般来说list属性是必须的，List设置的是tab 的列表，最少2个，最多5个 tab，list是在数组中的，每个对象用大括号括起来，包括tabBar中的各种常用属性，都已做好备注在代码中了：

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "页面"
			}
		},
		{
			"path" : "pages/user/user",
			"style" : 
			{
				"navigationBarTitleText" : "user"
			}
		},
		{
			"path" : "pages/classify/classify",
			"style" : 
			{
				"navigationBarTitleText" : ""
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",//导航栏标题颜色，仅支持black/white
		"navigationBarTitleText": "默认页面",//导航栏文字内容
		"navigationBarBackgroundColor": "#2B9939",// 导航栏背景颜色
		"navigationStyle":"default",//导航栏样式，仅支持 default/custom。custom即取消默认的原生导航栏
		"enablePullDownRefresh":true,//是否开启下拉刷新
		"backgroundColor": "#CAF0DF",//下拉显示出来的窗口的背景色
		"backgroundTextStyle":"light",//下拉 loading 的样式，仅支持 dark / light
		"onReachBottomDistance":250
	},
	"tabBar": {
		"color": "#8b2671",//文字颜色
		"selectedColor": "#e9ccd3",//选中后文字颜色
		"list": [
			{
				"pagePath": "pages/index/index",//页面路径
				"text": "首页",//导航文字内容
				"iconPath": "static/tabBar/home.png",//未选中时的图片
				"selectedIconPath": "static/tabBar/home-h.png"//选中时的图片
			},{
				"pagePath": "pages/classify/classify",
				"text": "分类",
				"iconPath": "static/tabBar/classify.png",
				"selectedIconPath": "static/tabBar/classify-h.png"
			},{
				"pagePath": "pages/user/user",
				"text": "我的",
				"iconPath": "static/tabBar/user.png",
				"selectedIconPath": "static/tabBar/user-h.png"
			}
			
		]
	},
	"uniIdRouter": {}
}

效果：
在这里插入图片描述

vite.config中安装插件unplugin-auto-import自动导入vue和uniapp

之前使用生命周期钩子和ref时，每次都要写导入代码，安装一个插件，这样就可以免去导入的步骤了。

首先，安装 Node.js，然后右键项目－使用命令行窗口打开目录：
在这里插入图片描述
然后输入以下代码，按下回车。

npm install unplugin-auto-import

安装成功后，会出现一个node_modules文件夹。
在这里插入图片描述

继续进行设置，在根目录下创建一个vite.config.js文件夹，并拷贝以下代码：

import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import AutoImport from 'unplugin-auto-import/vite'
 
export default defineConfig({
    plugins: [
        uni(),        
        // 自动导入配置
        AutoImport({
            imports:[
                // 预设
                'vue',
                'uni-app'                
            ]
        })
    ]    
})

设置完毕，现在把导入的vue和uniapp去掉，也可以正常使用了。

uni-api交互反馈

uni.showToast

显示消息提示框，参数如下：
在这里插入图片描述
常用的一般有title，即提示框的提示内容；
icon，提示框图标，默认是success，有以下值：

image，自定义图标。演示一下上面几种参数，代码如下：

<template>
	<view class="layout">
		<view class="box" v-for="item in 100">
			{{item}}
		</view>
	</view>
</template>

<script setup>
uni.showToast({
	title:"操作失败",
	icon:"error"    ,//单行显示，去掉图标就可以多行显示了
	image:"../../static/tabBar/user.png"
})
</script>

<style lang="scss" scoped>
	.layout{
		font-size: 70rpx;
		color: $custom-color-2;
	}
</style>

效果：
在这里插入图片描述
mask参数，即消息提示框未消失时，无法点击页面的其他操作。先设置mask参数为false，设置一个页面跳转，注意navigator默认只能跳转到非TabBar界面，要是想跳转到TabBar界面，要使用reLaunch属性，代码如下：

<template>
	<view class="layout">
		<navigator open-type="reLaunch" url="/pages/user/user">用户</navigator> 
		<view class="box" v-for="item in 100">
			{{item}}
		</view>
	</view>
</template>

<script setup>
uni.showToast({
	title:"操作失败",
	icon:'error',//单行显示，去掉图标就可以多行显示了
	image:"../../static/tabBar/user.png",
	mask:false
})
</script>

<style lang="scss" scoped>
	.layout{
		font-size: 70rpx;
	}
</style>

提示框未消失，依然可以点击页面跳转按钮：
在这里插入图片描述
修改mask参数为true，在提示框未消失前，是无法点击跳转按钮的：

uni.hideToast

隐藏消息提示框，我们用个按钮来演示一下uni.hideToast，代码如下：

<template>
	<view class="layout">
		<navigator open-type="reLaunch" url="/pages/user/user">用户</navigator>
		<button @click="show">显示</button>
		<button @click="hide">隐藏</button>
		<view class="box" v-for="item in 100">
			{{item}}
		</view>
	</view>
</template>

<script setup>
	function show(){
		uni.showToast({
			title:"操作失败",
			duration:3000,  //提示的延迟时间，单位毫秒，默认：1500
		})
	}
	function hide(){
		uni.hideToast()
	}

</script>

<style lang="scss" scoped>
	.layout{
		font-size: 70rpx;
	}
</style>

效果：
在这里插入图片描述

uni.showLoading

显示 loading 提示框, 需主动调用 uni.hideLoading 才能关闭提示框。这里我们设置2秒后关闭Loading提示框
演示代码如下：

<template>
	<view class="">
		个人中心
	</view>
</template>

<script setup>
	uni.showLoading({
		title:"加载中...",
		mask:true
	})
	setTimeout(()=>{
		uni.hideLoading()
	},2000)
</script>

<style lang="scss" scoped>
	       
</style>

效果：
在这里插入图片描述

uni.showModal

显示模态弹窗，可以只有一个确定按钮，也可以同时有确定和取消按钮。比如说用户要删除某个东西，这时就可以弹窗询问是否要删除。演示代码如下：

<template>
	<view class="">
		分类页面
		<button @click="remove">删除</button>
	</view>
</template>

<script setup>
	function remove(){
		uni.showModal({
			title:"是否删除？"
		})
	}
</script>

<style lang="scss" scoped>
	       
</style>

效果：
在这里插入图片描述
uni.showModal的参数如下：

取消按钮、确认按钮的文字颜色，提示的内容标题都可以自定义。

现在演示一下后三个参数，以success为例，它会给我们一个回调函数，拿到这个回调函数我们可以让它返回一个提示弹窗：“删除成功”，代码如下：

<template>
	<view class="">
		分类页面
		<button @click="remove">删除</button>
	</view>
</template>

<script setup>
	function remove(){
		uni.showModal({
			title:"是否删除？",
			// content:"删除后不会恢复",
			confirmColor:"#8b2671",
			confirmText:"Yes",
			editable:true,//显示输入框
			success:res=>{
				if(res.confirm){
					uni.showToast({
						title:"删除成功"
					})
				}
			}
		})
	}
</script>

<style lang="scss" scoped>
	       
</style>

效果：

这段代码中我们开始了输入框，在输入框中输入内容，点击确定后，可以回调输入的内容，拿到后我们可以做些输入判断、校验之类的操作。

uni.showActionSheet

从底部向上弹出操作菜单，参数如下：
在这里插入图片描述
比较重要的是itemList参数了，使用时，要用数组把内容框起来，演示代码如下：

<template>
	<view class="">
		分类页面
		
		<button @click="select">学历</button>
	</view>
</template>

<script setup>
	
	function select(){
		uni.showActionSheet({
			title:"请选择学历",//菜单标题
			itemList:["高中","大专","本科","研究生"],//选择项
			itemColor:"#ef475d",//按钮的文字颜色
		})
	}
</script>

<style lang="scss" scoped>
	       
</style>

效果：
在这里插入图片描述
我们选择哪一项，也是通过success回调结果的，不过因为itemList是个数组，回调给我们的结果是索引值

要是想回调结果是实际内容，需要把数组设置为变量，代码如下：

<template>
	<view class="">
		分类页面
		<button @click="select">学历</button>
	</view>
</template>

<script setup>
	let arrs = ["高中","大专","本科","研究生"];
	function select(){
		uni.showActionSheet({
			title:"请选择学历",//菜单标题
			itemList:arrs,
			success:res=>{
				console.log(res)
				console.log(arrs[res.tapIndex]);
			}
		})
	}
</script>

<style lang="scss" scoped>
	       
</style>

动态设置页面导航栏样式

uni.setNavigationBarTitle

动态设置当前页面的标题。
演示一下，这里用定时器定时，让其2秒钟后改变标题：

<template>
	<view class="">
		分类页面
		<button @click="select">学历</button>
	</view>
</template>

<script setup>
	setTimeout(()=>{
		uni.setNavigationBarTitle({
			title:"动态标题"
		})
	},2000)
	
	let arrs = ["高中","大专","本科","研究生"];
	function select(){
		uni.showActionSheet({
			title:"请选择学历",//菜单标题
			itemList:arrs,
			success:res=>{
				console.log(res)
				console.log(arrs[res.tapIndex]);
			}
		})
	}
</script>

<style lang="scss" scoped>
	       
</style>

效果：
在这里插入图片描述

uni.setNavigationBarColor

设置页面导航条颜色。
在这里插入图片描述

uni.showNavigationBarLoading

在当前页面显示导航条加载动画。它有点类似于uni.showLoading，如果想让它结束，再写上个uni.hideNavigationBarLoading就行了，演示代码：

<template>
	<view class="">
		分类页面
		<button @click="select">学历</button>
	</view>
</template>

<script setup>
	setTimeout(()=>{
		uni.hideNavigationBarLoading({
			
		})
	},2000)
	uni.showNavigationBarLoading({})
	
	let arrs = ["高中","大专","本科","研究生"];
	function select(){
		uni.showActionSheet({
			title:"请选择学历",//菜单标题
			itemList:arrs,
			success:res=>{
				console.log(res)
				console.log(arrs[res.tapIndex]);
			}
		})
	}
</script>

<style lang="scss" scoped>
	       
</style>

效果：
在这里插入图片描述

uni.hideHomeButton

隐藏返回首页按钮：非主页面的左上角都会默认有一个返回首页按钮，使用该API可以实现隐藏
在这里插入图片描述
隐藏后的效果：

动态设置TabBar样式

uni.setTabBarItem

动态设置 tabBar 某一项的内容。建议是在app.vue中设置，这样会应用于所有页面，演示代码如下：

<script>
	export default {
		onLaunch: function() {
			uni.setTabBarItem({
				index:1,
				text:"自定义"
			})
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style lang="scss">
	@import "@/common/css/style.css"
</style>

效果：
在这里插入图片描述
其他参数如图：

uni.setTabBarStyle

动态设置 tabBar 的整体样式。参数如图：
在这里插入图片描述

uni.hideTabBar

隐藏 tabBar。

uni.showTabBar

显示 tabBar。

uni.setTabBarBadge

为 tabBar 某一项的右上角添加文本。一般都是添加数字，文字太多的话显示不出来，代码如下：

<script>
	export default {
		onLaunch: function() {
			uni.setTabBarBadge({
				index:1,
				text:"99+"
			})
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style lang="scss">
	@import "@/common/css/style.css"
</style>

效果：
在这里插入图片描述

uni.removeTabBarBadge

移除 tabBar 某一项右上角的文本。

uni.showTabBarRedDot

显示 tabBar 某一项的右上角的红点。跟刚刚在tabBar右上角显示增加文本一样，这里是在右上角显示红点，代码如下：

<script>
	export default {
		onLaunch: function() {
			uni.setTabBarBadge({
				index:1,
				text:"99+"
			})
			uni.showTabBarRedDot({
				index:2,
			})
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style lang="scss">
	@import "@/common/css/style.css"
</style>

效果：
在这里插入图片描述

uni.hideTabBarRedDot

隐藏 tabBar 某一项的右上角的红点。刚刚我们设置了红点，现在可以在相应的页面中使用uni.hideTabBarRedDot去隐藏红点，代码如下：

<template>
	<view class="">
		个人中心
	</view>
</template>

<script setup>
	onShow(()=>{
		uni.hideTabBarRedDot({
			index:2
		})
	})
	uni.showLoading({
		title:"加载中...",
		mask:true
	})
</script>

<style lang="scss" scoped>
	       
</style>

下拉刷新 onPullDownRefresh

下拉刷新操作，需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh。

uni.startPullDownRefresh(OBJECT)

开始下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。在这里我们可以用个定时器，设定一秒钟后开始刷新。

setTimeout(()=>{
		uni.startPullDownRefresh()
	},1000)

uni.stopPullDownRefresh()

停止当前页面下拉刷新。代码如下：

<template>
	<view class="content">
		<button @click="stop">停止</button>
	</view>
</template>

<script>
	setTimeout(()=>{
		uni.startPullDownRefresh()
	},1000)
	function stop(){
		uni.stopPullDownRefresh()
	}
</script>

<style>
	
</style>

效果：
在这里插入图片描述

页面和路由

uni.navigateTo(OBJECT)

保留当前页面，跳转到应用内的某个页面。使用uni.navigateBack可以返回到原页面。
其实跟navigator一样的作用，新建demo1和demo2两个页面，点击后从demo1跳转到demo2，代码如下：

<template>
	<view class="">
		<view @click="goDemo2">跳转到demo2</view>
	</view>
</template>

<script setup>
	function goDemo2(){
		uni.navigateTo({
			url:"/pages/demo2/demo2"
		})
	}
</script>

<style lang="scss" scoped>
	       
</style>

uni.reLaunch(OBJECT)

关闭所有页面，打开到应用内的某个页面。
刚刚navigateTo参数是没法跳转到TabBar页面的，但reLaunch可以，演示代码:

<template>
	<view class="">
		<view @click="goDemo2">跳转到classify</view>
	</view>
</template>

<script setup>
	function goDemo2(){
		uni.reLaunch({
			url:"/pages/classify/classify"
		})
	}
</script>

<style lang="scss" scoped>
	       
</style>

uni.navigateBack(OBJECT)

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。代码如下：

<template>
	<view class="">
		<button @click="goDemo1">返回Demo1</button>
	</view>
</template>

<script setup>
	function goDemo1(){
		uni.navigateBack()
	}
	console.log(getCurrentPages())
</script>

<style lang="scss" scoped>
	       
</style>

效果：
在这里插入图片描述

StorageSync数据缓存API

uni.setStorage

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

uni.setStorageSync(KEY,DATA)

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

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

<script setup>
	uni.setStorageSync('key1','hello moto')
	uni.setStorageSync('key2','王二麻子')
	uni.setStorageSync("arrs",["one","two","three"]);
</script>

<style scoped>
	
</style>

查看缓存的值：

uni.getStorage

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

uni.getStorageSync(KEY)

从本地缓存中同步获取指定 key 对应的内容。使用这个参数取key1的值，代码如下：

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

<script setup>
	uni.setStorageSync('key1','hello moto')
	uni.setStorageSync('key2','王二麻子')
	uni.setStorageSync("arrs",["one","two","three"]);
	
	let myName = uni.getStorageSync("key1")
	console.log(myName);
</script>

<style scoped>
	
</style>

取到值了：
在这里插入图片描述

uni.getStorageInfo

异步获取当前 storage 的相关信息。

uni.getStorageInfoSync()

同步获取当前 storage 的相关信息。简单来说，就是读取当前所有的key，演示代码：

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

<script setup>
	uni.setStorageSync('key1','hello moto')
	uni.setStorageSync('key2','王二麻子')
	uni.setStorageSync("arrs",["one","two","three"]);
	
	let myName = uni.getStorageSync("key1")
	console.log(myName);
	
	const res = uni.getStorageInfoSync();
	console.log(res);
</script>

<style scoped>
	
</style>

效果：
在这里插入图片描述

uni.removeStorage(OBJECT)

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

uni.removeStorageSync(KEY)

从本地缓存中同步移除指定 key。写个简单的代码演示一下：

<template>
	<view class="content">
		<button @click="remove">删除key2</button>
	</view>
</template>

<script setup>
	uni.setStorageSync('key1','hello moto')
	uni.setStorageSync('key2','王二麻子')
	uni.setStorageSync("arrs",["one","two","three"]);
	
	let myName = uni.getStorageSync("key1")
	console.log(myName);
	
	const res = uni.getStorageInfoSync();
	console.log(res);
	function remove(){
		uni.removeStorageSync("key2")
	}
</script>

<style scoped>
	
</style>

效果：
在这里插入图片描述

uni.clearStorage()

清理本地数据缓存。

uni.clearStorageSync()

同步清理本地数据缓存。演示代码如下：

<template>
	<view class="content">
		<button @click="remove">删除key2</button>
		<button @click="clear" type="warn">清除所有缓存</button>
	</view>
</template>

<script setup>
	uni.setStorageSync('key1','hello moto')
	uni.setStorageSync('key2','王二麻子')
	uni.setStorageSync("arrs",["one","two","three"]);
	
	let myName = uni.getStorageSync("key1")
	console.log(myName);
	
	const res = uni.getStorageInfoSync();
	console.log(res);
	function remove(){
		uni.removeStorageSync("key2")
	}
	function clear(){
		uni.clearStorageSync()
	}
</script>

<style scoped>
	
</style>

效果：
在这里插入图片描述

网络

uni.request发起网路请求3种回调结果调用

发起网络请求。

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

<script setup>
	function request(){
		uni.request({
			url:"https://jsonplaceholder.typicode.com/posts",
			success:res=>{
				console.log(res);
			}
		})
	}
	request();
</script>

<style lang="scss" scoped>
	       
</style>

请求成功：
在这里插入图片描述
把结果渲染到前端页面：

<template>
	<view class="layout">
		<view class="row" v-for="item in arrs" :key="item.id">
			<view class="title">{{item.title}}</view>
			<view class="content">{{item.body}}</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
	let arrs = ref([])
	function request(){
		uni.request({
			url:"https://jsonplaceholder.typicode.com/posts",
			success:res=>{
				console.log(res);
				arrs.value = res.data
			}
		})
	}
	request();
</script>

<style lang="scss" scoped>
	.layout{
		padding: 30rpx;
		.row{
			border-bottom: 1px solid #cfcfcf;
			padding: 20rpx 0;
			.title{
				font-size: 36rpx;
			}
			.content{
				font-size: 28rpx;
				color: #666;
			}
		}
	}    
</style>

效果：
在这里插入图片描述
写法2：

	function request(){
		uni.request({
			url:"https://jsonplaceholder.typicode.com/posts",
		}).then(res=>{
			console.log(res);
		})
	}
	request();

写法3：

async function request(){
		let res = await uni.request({
			url:"https://jsonplaceholder.typicode.com/posts"
		})
		console.log(res);
	}
	request();

uni.request参数

data

请求的参数。

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

<script setup>
	function request(){
		uni.request({
			url:"https://jsonplaceholder.typicode.com/posts",
			data:{
				id:5,
			},
		}).then(res=>{
			console.log(res);
		})
	}
	request();
	
</script>

<style lang="scss" scoped>
	       
</style>

method有效值

发送的类型，也就是请求方式。
在这里插入图片描述
演示代码：

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

<script setup>
	function request(){
		uni.request({
			url:"https://jsonplaceholder.typicode.com/posts",
			data:{
				id:5,
			},
			method:"GET",
		}).then(res=>{
			console.log(res);
		})
	}
	request();
	
</script>

<style lang="scss" scoped>
	       
</style>

header

设置请求的 header，header 中不能设置 Referer。header也就是头部信息，是带给我们后端的。

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

<script setup>
	function request(){
		uni.request({
			url:"https://jsonplaceholder.typicode.com/posts?id=3",
			data:{
				id:5,
			},
			header:{
				token:"asfsaf"
				“content-type”:"application/json"
			},
			method:"GET",
		}).then(res=>{
			console.log(res);
		})
	}
	request();
	
</script>

<style lang="scss" scoped>
	       
</style>

timeout

超时时间，单位为ms。我们定义一个fail，如果超时了，就会返回fail，并提示“超时”，这里超时时间设置为1秒，再定义一个showLoading，然后设置complete，写入hideLoading，也就是说，无论成功失败，showLoading，都会隐藏，代码如下：

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

<script setup>
	
	function request(){
		uni.showLoading()
		uni.request({
			url:"https://jsonplaceholder.typicode.com/posts",
			data:{
				id:5
			},
			header:{
				token:"adfadsfadsf",
				"content-type":"application/x-www-form-urlencoded"
			},
			method:"post",
			timeout:1000,
			success:res=>{
				console.log(res);			 
			},
			fail:err=>{
				console.log("超时");
				console.log(err);
			},
			complete:()=>{
				uni.hideLoading()
			}
		})
		
	}
	
	request();
	
</script>

<style lang="scss" scoped>
	       
</style>

调慢网速，测试fail:
在这里插入图片描述
开始测试：