文章目录
- rpx响应式单位
- @import导入css样式及scss变量用法与static目录
- pages.json页面路由
- vite.config中安装插件unplugin-auto-import自动导入vue和uniapp
- uni-api交互反馈
- 动态设置页面导航栏样式
- 动态设置TabBar样式
- [下拉刷新 onPullDownRefresh](#下拉刷新 onPullDownRefresh)
- 页面和路由
- StorageSync数据缓存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:
开始测试：
