文章目录

• 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样式，代码如下：

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

uni.scss变量用法

在项目根目录中有个uni.scss文件

打开后，里面有很多内置的样式变量，可以直接拿来用的，现在拿个文字颜色过来试试，注意只需要取"$“至”:" 前的内容即可

放到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来测试一下，代码如下：

效果：

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，自定义图标。演示一下上面几种参数，代码如下：

效果：

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

提示框未消失，依然可以点击页面跳转按钮：

修改mask参数为true，在提示框未消失前，是无法点击跳转按钮的：

uni.hideToast

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

效果：

uni.showLoading

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

效果：

uni.showModal

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

效果：

uni.showModal的参数如下：

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

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

效果：

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

uni.showActionSheet

从底部向上弹出操作菜单，参数如下：

比较重要的是itemList参数了，使用时，要用数组把内容框起来，演示代码如下：

效果：

我们选择哪一项，也是通过success回调结果的，不过因为itemList是个数组，回调给我们的结果是索引值

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

动态设置页面导航栏样式

uni.setNavigationBarTitle

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

效果：

uni.setNavigationBarColor

设置页面导航条颜色。

uni.showNavigationBarLoading

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

效果：

uni.hideHomeButton

隐藏返回首页按钮：非主页面的左上角都会默认有一个返回首页按钮，使用该API可以实现隐藏

隐藏后的效果：

动态设置TabBar样式

uni.setTabBarItem

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

效果：

其他参数如图：

uni.setTabBarStyle

动态设置 tabBar 的整体样式。参数如图：

uni.hideTabBar

隐藏 tabBar。

uni.showTabBar

显示 tabBar。

uni.setTabBarBadge

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

效果：

uni.removeTabBarBadge

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

uni.showTabBarRedDot

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

效果：

uni.hideTabBarRedDot

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

下拉刷新 onPullDownRefresh

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

uni.startPullDownRefresh(OBJECT)

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

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

uni.stopPullDownRefresh()

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

效果：

页面和路由

uni.navigateTo(OBJECT)

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

uni.reLaunch(OBJECT)

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

uni.navigateBack(OBJECT)

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

效果：

StorageSync数据缓存API

uni.setStorage

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

uni.setStorageSync(KEY,DATA)

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

查看缓存的值：

uni.getStorage

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

uni.getStorageSync(KEY)

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

取到值了：

uni.getStorageInfo

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

uni.getStorageInfoSync()

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

效果：

uni.removeStorage(OBJECT)

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

uni.removeStorageSync(KEY)

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

效果：

uni.clearStorage()

清理本地数据缓存。

uni.clearStorageSync()

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

效果：

网络

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

发起网络请求。

请求成功：

把结果渲染到前端页面：

效果：

写法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

请求的参数。

method有效值

发送的类型，也就是请求方式。

演示代码：

header

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

timeout

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

调慢网速，测试fail:

开始测试：