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:

开始测试：