0
0

uni-app全局文件与常用API

文章目录

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

标签： uni-app
本文转载自: https://blog.csdn.net/2301_80735340/article/details/140567388
版权归原作者 2301_80735340 所有， 如有侵权，请联系我们删除。
登录后发布评论

“uni-app全局文件与常用API”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

AI测试工具大比拼！这些爆款让你效率翻倍！

【C++】list容器及其模拟实现

删除 Docker 容器的日志文件

新一代交互模式：LUI&CUI&VUI

一文带你看懂SAP-HANA的基本架构与原理

美国人工智能国家安全备忘录核心解读（下）

【网络】NDS协议 | ICMP协议 | NAT技术

文章导航