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:
在这里插入图片描述
开始测试:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/50238.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

探索Perl的奇妙世界:入门学习与实战指南

一、Perl语言概述 1.1 Perl的起源与发展 Perl&#xff08;Practical Extraction and Reporting Language&#xff09;是一种高级、解释型、动态编程语言&#xff0c;由Larry Wall于1987年发明。Perl的初衷是作为一种文本处理工具&#xff0c;帮助系统管理员在Unix系统中处理报…

Godot游戏制作 04平台设计

新建创景&#xff0c;添加AnimatableBody2D节点。 添加Sprite2D节点 拖动图片 剪裁图片&#xff0c;吸附模式&#xff1a;像素吸附 添加CollisionShape2D&#xff0c;设置实际形状为矩形 重命名AnimatableBody2D节点为Platform&#xff0c;保存场景&#xff0c;拖动platform场景…

数据库(MySQL)-视图、存储过程、触发器

一、视图 视图的定义、作用 视图是从一个或者几个基本表&#xff08;或视图&#xff09;导出的表。它与基本表不同&#xff0c;是一个虚表。但是视图只能用来查看表&#xff0c;不能做增删改查。 视图的作用&#xff1a;①简化查询 ②重写格式化数据 ③频繁访问数据库 ④过…

Photos框架 - 自定义媒体资源选择器(数据部分)

引言 在iOS开发中&#xff0c;系统已经为我们提供了多种便捷的媒体资源选择方式&#xff0c;如UIImagePickerController和PHPickerViewController。这些方式不仅使用方便、界面友好&#xff0c;而且我们完全不需要担心性能和稳定性问题&#xff0c;因为它们是由系统提供的&…

计算机毕业设计django+hadoop+scrapy租房可视化 租房推荐系统 租房大屏可视化 租房爬虫 spark 58同城租房爬虫 房源推荐系统

python scrapy bootstrap jquery css javascript html 租房信息数据展示 租房地址数量分布 租房类型统计 租房价格统计分析 租房面积分析 房屋朝向分析 房屋户型平均价格统计分析 房屋楼层统计分析 房屋楼层与价格统计分析 房屋地址与价格统计分析 房屋相关信息词云展示 租房…

字符指针专题

有任何不懂的问题可以评论区留言&#xff0c;能力范围内都会一一回答 #define _CRT_SECURE_NO_WARNING #include <stdio.h> int main(void) {char a w;char* b &a;*b q;printf("%c\n",*b);return 0; } 这是字符指针的普通用法&#xff0c;和一般指针无…

在服务器上同时训练多个深度学习模型【nohup、后台、重定向】

在服务器上同时训练多个深度学习模型 在服务器上跑深度学习或其他程序时&#xff0c;如果程序没有提供命令行参数设置&#xff0c;我们常常需要多次修改代码后重新部署。本文将介绍如何通过命令行工具和编辑器查看代码特定行的方法&#xff0c;并展示如何同时训练多个基于不同…

.NET程序集编辑器/调试器 dnSpy 使用介绍

原文链接&#xff1a;https://www.cnblogs.com/zhaotianff/p/17352882.html dnSpy dnSpy是一个.NET程序集调试器和编辑器。它可以用它来编辑和调试程序集&#xff0c;即使在没有源码的情况下。 主要功能&#xff1a; 调试.NET和Unity程序集 编辑.NET和Unity程序集 项目地…

【解决方案】华普微汽车智能钥匙解决方案

一、方案概述 1.什么是被动式无钥匙进入 "被动式无钥匙进入"&#xff08;Passive Keyless Entry&#xff09;是一种用于车辆、建筑物或其他设施的访问控制系统。它利用无线射频技术自动判断用户是否接近&#xff0c;并进行身份识别以执行开锁或落锁动作&#xff0c…

【23】Android高级知识之Window(四) - ThreadedRenderer

一、概述 在上一篇文章中已经讲了setView整个流程中&#xff0c;最开始的addToDisplay和WMS跨进程通信的整个过程做了什么。继文章Android基础知识之Window(二)&#xff0c;这算是另外一个分支了&#xff0c;接着讲分析在performTraversals的三个操作中&#xff0c;最后触发pe…

基于Golang+Vue3快速搭建的博客系统

WANLI 博客系统 项目介绍 基于vue3和gin框架开发的前后端分离个人博客系统&#xff0c;包含md格式的文本编辑展示&#xff0c;点赞评论收藏&#xff0c;新闻热点&#xff0c;匿名聊天室&#xff0c;文章搜索等功能。 项目在线访问&#xff1a;http://bloggo.chat/ 或 http:/…

【Web】LitCTF 2024 题解(全)

目录 浏览器也能套娃&#xff1f; 一个....池子&#xff1f; 高亮主题(划掉)背景查看器 百万美元的诱惑 SAS - Serializing Authentication exx 浏览器也能套娃&#xff1f; 随便试一试&#xff0c;一眼ssrf file:///flag直接读本地文件 一个....池子&#xff1f; {…

OAK相机支持的图像传感器有哪些?

相机支持的传感器 在 RVC2 上&#xff0c;固件必须具有传感器配置才能支持给定的相机传感器。目前&#xff0c;我们支持下面列出的相机传感器的开箱即用&#xff08;固件中&#xff09;传感器配置。 名称 分辨率 传感器类型 尺寸 最大 帧率 IMX378 40563040 彩色 1/2.…

从0到1:理发店预约剪发小程序开发笔记(上)

背景 理发师可以在小程序上设置自己的可预约时间&#xff0c;价格&#xff0c;自我介绍&#xff0c;顾客可以根据理发师的日程安排选择合适的时间进行预约和支付。这样可以提高预约的效率&#xff0c;减少沟通成本&#xff0c;方便双方的安排。 功能规划 首页展示&#xff1…

基于多种机器学习的豆瓣电影评分预测与多维度可视化【可加系统】

有需要本项目的代码或文档以及全部资源&#xff0c;或者部署调试可以私信博主 在本研究中&#xff0c;我们采用Python编程语言&#xff0c;利用爬虫技术实时获取豆瓣电影最新数据。通过分析豆瓣网站的结构&#xff0c;我们设计了一套有效的策略来爬取电影相关的JSON格式数据。…

第1章 初识 C 语言

目录 1.1 C 语言的起源 1.2 选择 C 语言的理由 1.2.1 设计特性 1.2.2 高效性 1.2.3 可移植性 1.2.4 强大而灵活 1.2.5 面向程序员 1.2.6 缺点 1.3 C 语言的应用范围 1.4 计算机能做什么 1.5 高级计算机语言和编译器 1.6 语言标准 1.6.1 第 1 个 ANSI/ISO C 标准 …

手写模拟Spring底层原理-简易实现版

通过手写模拟Spring 了解Spring的底层源码启动过程了解BeanDefinition、BeanPostProcessor的概念了解Spring解析配置类等底层源码工作流程了解依赖注入&#xff0c;Aware回调等底层源码工作流程了解Spring AOP的底层源码工作流程 这里实现一个简化版的 Spring 框架的核心功能&a…

GraphRAG深入解析

GraphRAG深入解析 GraphRAG 深入解析概述索引查询 索引过程深入解析步骤 1&#xff1a;处理文本块步骤 2&#xff1a;图提取步骤 3&#xff1a;图增强步骤 4&#xff1a;社区总结步骤 5&#xff1a;文件处理步骤 6&#xff1a;网络可视化 查询过程深入解析本地搜索问题生成全局…

苹果安卓分发的秘密:如何选择正确的渠道(苹果安卓分发)

苹果安卓分发的重要性 随着移动互联网的普及&#xff0c;移动应用程序的开发和分发变得越来越重要。苹果安卓分发是移动应用程序开发者的首要任务之一&#xff0c;因为它直接关系到应用程序的推广和收益。 苹果安卓分发并不是一件简单的事情。开发者需要选择正确的渠道&#…

Pytorch使用教学5-视图view与reshape的区别

有同学后台留言问为什么view有时可对张量进行形变操作&#xff0c;有时就会报错&#xff1f;另外它和reshape功能好像一致&#xff0c;有什么区别呢&#xff1f;本文就带你了解PyTorch中视图的概念。 在PyTorch中对张量进行形变操作时&#xff0c;很多同学也会使用view方法&am…