uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

1.下载Hbuilder

HBuilderX-高效极客技巧 (dcloud.io)

2.uni-app官方文档

uni-app官网 (dcloud.net.cn)

3.unplugin-auto-import自动导入插件

npm i unplugin-auto-import

创建vite.config.js文件

import uni from '@dcloudio/vite-plugin-uni';
import {defineConfig} from 'vite'
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
	plugins:[
		uni(),
		AutoImport({
			imports:[
				'vue',
				'uni-app'
			] 
		})
	]
})

4.内置组件

1.view

视图容器。

它类似于传统html中的div，用于包裹各种元素内容。

如果使用nvue，则需注意，包裹文字应该使用<text>组件。

2.scroll-view

可滚动视图区域。用于区域滚动。

需注意在webview渲染的页面中，区域滚动的性能不及页面滚动。

属性说明

属性名 类型 默认值 说明 平台差异说明
scroll-x Boolean false 允许横向滚动
scroll-y Boolean false 允许纵向滚动
upper-threshold Number/String 50 距顶部/左边多远时（单位px），触发 scrolltoupper 事件
lower-threshold Number/String 50 距底部/右边多远时（单位px），触发 scrolltolower 事件
scroll-top Number/String 设置竖向滚动条位置
scroll-left Number/String 设置横向滚动条位置
scroll-into-view String 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
scroll-with-animation Boolean false 在设置滚动条位置时使用动画过渡
enable-back-to-top Boolean false iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向 app-nvue，微信小程序
show-scrollbar Boolean false 控制是否出现滚动条 App-nvue 2.1.5+
refresher-enabled Boolean false 开启自定义下拉刷新 H5、app-vue 2.5.12+,微信小程序基础库2.10.1+
refresher-threshold Number 45 设置自定义下拉刷新阈值 H5、app-vue 2.5.12+,微信小程序基础库2.10.1+
refresher-default-style String “black” 设置自定义下拉刷新默认样式，支持设置 black，white，none，none 表示不使用默认样式 H5、app-vue 2.5.12+,微信小程序基础库2.10.1+
refresher-background String “#FFF” 设置自定义下拉刷新区域背景颜色 H5、app-vue 2.5.12+,微信小程序基础库2.10.1+
refresher-triggered Boolean false 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发 H5、app-vue 2.5.12+,微信小程序基础库2.10.1+
enable-flex Boolean false 启用 flexbox 布局。开启后，当前节点声明了 display: flex 就会成为 flex container，并作用于其孩子节点。 微信小程序 2.7.3
scroll-anchoring Boolean false 开启 scroll anchoring 特性，即控制滚动位置不随内容变化而抖动，仅在 iOS 下生效，安卓下可参考 CSS overflow-anchor 属性。 微信小程序 2.8.2
@scrolltoupper EventHandle 滚动到顶部/左边，会触发 scrolltoupper 事件
@scrolltolower EventHandle 滚动到底部/右边，会触发 scrolltolower 事件
@scroll EventHandle 滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
@refresherpulling EventHandle 自定义下拉刷新控件被下拉 H5、app-vue 2.5.12+,微信小程序基础库2.10.1+
@refresherrefresh EventHandle 自定义下拉刷新被触发 H5、app-vue 2.5.12+,微信小程序基础库2.10.1+
@refresherrestore EventHandle 自定义下拉刷新被复位 H5、app-vue 2.5.12+,微信小程序基础库2.10.1+
@refresherabort EventHandle 自定义下拉刷新被中止 H5、app-vue 2.5.12+,微信小程序基础库2.10.1+ 
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
<template>
	<view>
		<view class="uni-padding-wrap uni-common-mt">
			<view class="uni-title uni-common-mt">
				Vertical Scroll
				<text>\n纵向滚动</text>
			</view>
			<view>
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
					@scrolltolower="lower" @scroll="scroll">
					<view id="demo1" class="scroll-view-item uni-bg-red">A</view>
					<view id="demo2" class="scroll-view-item uni-bg-green">B</view>
					<view id="demo3" class="scroll-view-item uni-bg-blue">C</view>
				</scroll-view>
			</view>
			<view @tap="goTop" class="uni-link uni-center uni-common-mt">
				点击这里返回顶部
			</view>

			<view class="uni-title uni-common-mt">
				Horizontal Scroll
				<text>\n横向滚动</text>
			</view>
			<view>
				<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
					<view id="demo1" class="scroll-view-item_H uni-bg-red">A</view>
					<view id="demo2" class="scroll-view-item_H uni-bg-green">B</view>
					<view id="demo3" class="scroll-view-item_H uni-bg-blue">C</view>
				</scroll-view>
			</view>
			<view class="uni-common-pb"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				old: {
					scrollTop: 0
				}
			}
		},
		methods: {
			upper: function(e) {
				console.log(e)
			},
			lower: function(e) {
				console.log(e)
			},
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			goTop: function(e) {
				// 解决view层不同步的问题
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
				uni.showToast({
					icon: "none",
					title: "纵向滚动 scrollTop 值已被修改为 0"
				})
			}
		}
	}
</script>

3.swiper

滑块视图容器。

一般用于左右滑动或上下滑动，比如banner轮播图。

注意滑动切换和滚动的区别，滑动切换是一屏一屏的切换。swiper下的每个swiper-item是一个滑动切换区域，不能停留在2个滑动区域之间。

属性说明

属性名 类型 默认值 说明 平台差异说明
indicator-dots Boolean false 是否显示面板指示点
indicator-color Color rgba(0, 0, 0, .3) 指示点颜色
indicator-active-color Color #000000 当前选中的指示点颜色
active-class String swiper-item 可见时的 class 支付宝小程序
changing-class String acceleration 设置为 true 时且处于滑动过程中，中间若干屏处于可见时的class 支付宝小程序
autoplay Boolean false 是否自动切换
current Number 0 当前所在滑块的 index
current-item-id String 当前所在滑块的 item-id ，不能与 current 被同时指定 支付宝小程序不支持
interval Number 5000 自动切换时间间隔
duration Number 500 滑动动画时长 app-nvue不支持
circular Boolean false 是否采用衔接滑动，即播放到末尾后重新回到开头
vertical Boolean false 滑动方向是否为纵向
previous-margin String 0px 前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值 app-nvue、抖音小程序、飞书小程序不支持
next-margin String 0px 后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值 app-nvue、抖音小程序、飞书小程序不支持
acceleration Boolean false 当开启时，会根据滑动速度，连续滑动多屏 支付宝小程序
disable-programmatic-animation Boolean false 是否禁用代码变动触发 swiper 切换时使用动画。 支付宝小程序
display-multiple-items Number 1 同时显示的滑块数量 app-nvue、支付宝小程序不支持
skip-hidden-item-layout Boolean false 是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息 App、微信小程序、京东小程序
disable-touch Boolean false 是否禁止用户 touch 操作 App 2.5.5+、H5 2.5.5+、支付宝小程序、抖音小程序与飞书小程序（只在初始化时有效，不能动态变更）
touchable Boolean true 是否监听用户的触摸事件，只在初始化时有效，不能动态变更 抖音小程序与飞书小程序（uni-app 2.5.5+ 推荐统一使用 disable-touch）
easing-function String default 指定 swiper 切换缓动动画类型，有效值：default、linear、easeInCubic、easeOutCubic、easeInOutCubic 微信小程序、快手小程序、京东小程序
@change EventHandle current 改变时会触发 change 事件，event.detail = {current: current, source: source}
@transition EventHandle swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy}，支付宝小程序暂不支持dx, dy App、H5、微信小程序、支付宝小程序、抖音小程序、飞书小程序、QQ小程序、快手小程序
@animationfinish EventHandle 动画结束时会触发 animationfinish 事件，event.detail = {current: current, source: source} 抖音小程序与飞书小程序不支持

4.icon

<view class="item" v-for="(value,index) in iconType" :key="index">
    <icon :type="value" size="26"/>
    <text>{{value}}</text>
</view>

5.form

表单，将组件内的用户输入的<switch> <input> <checkbox> <slider> <radio> <picker> 提交。

当点击 <form> 表单中 formType 为 submit 的 <button> 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。

属性说明

属性名 类型 说明 平台差 异说明
report-submit Boolean 是否返回 formId 用于发送模板消息 微信小程序、支付宝小程序
report-submit-timeout number 等待一段时间（毫秒数）以确认 formId 是否生效。如果未指定这个参数，formId 有很小的概率是无效的（如遇到网络失败的情况）。指定这个参数将可以检测 formId 是否有效，以这个参数的时间作为这项检测的超时时间。如果失败，将返回 requestFormId:fail 开头的 formId 微信小程序2.6.2
@submit EventHandle 携带 form 中的数据触发 submit 事件，event.detail = {value : {‘name’: ‘value’} , formId: ‘’}，report-submit 为 true 时才会返回 formId
@reset EventHandle 表单重置时会触发 reset 事件

6.navigator

页面跳转。

该组件类似HTML中的<a>组件，但只能跳转本地页面。目标页面必须在pages.json中注册。

除了组件方式，API方式也可以实现页面跳转，另见：https://uniapp.dcloud.io/api/router?id=navigateto

属性说明

属性名 类型 默认值 说明 平台差异说明
url String 应用内的跳转链接，值为相对路径或绝对路径，如：”../first/first”，”/pages/first/first”，注意不能加 .vue 后缀
open-type String navigate 跳转方式
delta Number 当 open-type 为 ‘navigateBack’ 时有效，表示回退的层数
animation-type String pop-in/out 当 open-type 为 navigate、navigateBack 时有效，窗口的显示/关闭动画效果，详见：窗口动画 App
animation-duration Number 300 当 open-type 为 navigate、navigateBack 时有效，窗口显示/关闭动画的持续时间。 App
render-link boolean true 是否给 navigator 组件加一层 a 标签控制 ssr 渲染 web3.7.6+、App-vue3.7.6+
hover-class String navigator-hover 指定点击时的样式类，当hover-class=”none”时，没有点击态效果
hover-stop-propagation Boolean false 指定是否阻止本节点的祖先节点出现点击态 微信小程序
hover-start-time Number 50 按住后多久出现点击态，单位毫秒
hover-stay-time Number 600 手指松开后点击态保留时间，单位毫秒
target String self 在哪个小程序目标上发生跳转，默认当前小程序，值域self/miniProgram 微信2.0.7+、百度2.5.2+、QQ

open-type 有效值

值 说明 平台差异说明
navigate 对应 uni.navigateTo 的功能
redirect 对应 uni.redirectTo 的功能
switchTab 对应 uni.switchTab 的功能
reLaunch 对应 uni.reLaunch 的功能 抖音小程序与飞书小程序不支持
navigateBack 对应 uni.navigateBack 的功能
exit 退出小程序，target=”miniProgram”时生效 微信2.1.0+、百度2.5.2+、QQ1.4.7+

这些细节可在页面路由API文档查阅。

注意

  • 跳转tabbar页面，必须设置open-type=”switchTab”
  • navigator-hover 默认为 {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}, <navigator> 的子节点背景色应为透明色。
  • navigator-open-type属性 如果使用对应的值，则对应值的功能会高于对应跳转路径。
  • app-nvue 平台只有纯nvue项目（render为native）才支持 <navigator>。非render为native的情况下，nvue暂不支持navigator组件，请使用API跳转。
  • app下退出应用，Android平台可以使用plus.runtime.quit。iOS没有退出应用的概念。
  • uLink组件是navigator组件的增强版，样式上自带下划线，功能上支持打开在线网页、其他App的schema、mailto发邮件、tel打电话。
  • Vue3 项目因 SSR 需要，H5 端会在外层嵌套 a 标签

7.button

按钮。

属性说明

属性名 默认值 类型 说明 生效时机 平台差异说明
size default String 按钮的大小
type default String 按钮的样式类型
plain false Boolean 按钮是否镂空，背景色透明
disabled false Boolean 是否禁用
loading false Boolean 名称前是否带 loading 图标 H5、App(App-nvue 平台，在 ios 上为雪花，Android上为圆圈)
form-type String 用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件
open-type String 开放能力
hover-class button-hover String 指定按钮按下去的样式类。当 hover-class=”none” 时，没有点击态效果 App-nvue 平台暂不支持
hover-start-time 20 Number 按住后多久出现点击态，单位毫秒
hover-stay-time 70 Number 手指松开后点击态保留时间，单位毫秒
app-parameter String 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效 微信小程序、QQ小程序
hover-stop-propagation false boolean 指定是否阻止本节点的祖先节点出现点击态 微信小程序
lang ‘en’ string 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。 微信小程序
session-from string 会话来源，open-type=”contact”时有效 微信小程序
send-message-title 当前标题 string 会话内消息卡片标题，open-type=”contact”时有效 微信小程序
send-message-path 当前分享路径 string 会话内消息卡片点击跳转小程序路径，open-type=”contact”时有效 微信小程序
send-message-img 截图 string 会话内消息卡片图片，open-type=”contact”时有效 微信小程序
show-message-card false boolean 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示”可能要发送的小程序”提示，用户点击后可以快速发送小程序消息，open-type=”contact”时有效 微信小程序
group-id String 打开群资料卡时，传递的群号 open-type=”openGroupProfile” QQ小程序
guild-id String 打开频道页面时，传递的频道号 open-type=”openGuildProfile” QQ小程序
public-id String 打开公众号资料卡时，传递的号码 open-type=”openPublicProfile” QQ小程序
data-im-id String 客服的抖音号 open-type=”im” 抖音小程序2.68.0版本+
data-im-type String IM卡片类型 open-type=”im” 抖音小程序2.80.0版本+
data-goods-id String 商品的id，仅支持泛知识课程库和生活服务商品库中的商品 open-type=”im” 抖音小程序2.80.0版本+
data-order-id String 订单的id，仅支持交易2.0订单 open-type=”im” 抖音小程序2.80.0版本+
data-biz-line String 商品类型，“1”代表生活服务，“2”代表泛知识。 open-type=”im” 抖音小程序2.80.0版本+
@getphonenumber Handler 获取用户手机号回调 open-type=”getPhoneNumber” 微信、支付宝、百度、抖音、快手、京东小程序
@getuserinfo Handler 用户点击该按钮时，会返回获取到的用户信息，从返回参数的detail中获取到的值同uni.getUserInfo open-type=”getUserInfo” 微信、QQ、百度、快手、京东小程序
@error Handler 当使用开放能力时，发生错误的回调 open-type=”launchApp” 微信、QQ、快手、京东小程序
@opensetting Handler 在打开授权设置页并关闭后回调 open-type=”openSetting” 微信、QQ、百度、快手、京东小程序
@launchapp Handler 从小程序打开 App 成功的回调 open-type=”launchApp” 微信、QQ、快手、京东小程序
@contact Handler 客服消息回调 open-type=”contact” 微信、QQ、百度、快手小程序
@chooseavatar Handler 获取用户头像回调 open-type=”chooseAvatar” 微信小程序
@agreeprivacyauthorization Handler 用户同意隐私协议事件回调，open-type=”agreePrivacyAuthorization”时有效 open-type=”agreeprivacyauthorization” 微信小程序2.33.0
@addgroupapp Handler 添加群应用的回调 open-type=”addGroupApp” QQ小程序
@chooseaddress Handler 调起用户编辑并选择收货地址的回调 open-type=”chooseAddress” 百度小程序
@chooseinvoicetitle Handler 用户选择发票抬头的回调 open-type=”chooseInvoiceTitle” 百度小程序
@subscribe Handler 订阅消息授权回调 open-type=”subscribe” 百度小程序
@login Handler 登录回调 open-type=”login” 百度小程序
@im Handler 监听跳转IM的成功回调 open-type=”im” 抖音小程序2.68.0版本+
  • 注1：button-hover 默认为 {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}
  • open-type="launchApp"时需要调起的APP接入微信OpenSDK详见
  • 微信小程序、Web、App平台 button组件的默认边框宽度为0.5px，不会占据实际的渲染宽高；当type属性为plain时，边框宽度是1px，如果未指定元素的宽高，此时边框宽度会占据实际渲染宽高。

size 有效值

值 说明
default 默认大小
mini 小尺寸

button组件也支持style中通过css定义文字大小。见下

type 有效值

值 说明
primary 微信小程序、360小程序为绿色，App、H5、百度小程序、支付宝小程序、飞书小程序、快应用为蓝色，抖音小程序为红色，QQ小程序为浅蓝色。如想在多端统一颜色，请改用default，然后自行写样式
default 白色
warn 红色

button组件也支持style中通过css定义颜色。见下

form-type 有效值

值 说明
submit 提交表单
reset 重置表单

open-type 有效值

值 说明 平台差异说明
feedback 打开“意见反馈”页面，用户可提交反馈内容并上传日志 App、微信小程序、QQ小程序
share 触发用户转发 微信小程序、百度小程序、支付宝小程序、抖音小程序、飞书小程序、QQ小程序、快手小程序、京东小程序、360小程序
getUserInfo 获取用户信息，可以从@getuserinfo回调中获取到用户信息 微信小程序、百度小程序、QQ小程序、快手小程序、京东小程序、360小程序
contact 打开客服会话，如果用户在会话中点击消息卡片后返回应用，可以从 @contact 回调中获得具体信息 微信小程序、百度小程序、快手小程序、抖音小程序
getPhoneNumber 获取用户手机号，可以从@getphonenumber回调中获取到用户信息 微信小程序、百度小程序、抖音小程序、支付宝小程序、快手小程序、京东小程序。App平台另见一键登陆
launchApp 小程序中打开APP，可以通过app-parameter属性设定向APP传的参数 微信小程序、QQ小程序、快手小程序、京东小程序
openSetting 打开授权设置页 微信小程序、QQ小程序、百度小程序、快手小程序、京东小程序、360小程序
chooseAvatar 获取用户头像，可以从@chooseavatar回调中获取到头像信息 微信小程序2.21.2版本+
agreePrivacyAuthorization 用户同意隐私协议按钮。用户点击一次此按钮后，所有隐私接口可以正常调用。可通过 @agreeprivacyauthorization 监听用户同意隐私协议事件。隐私合规开发指南详情可见《小程序隐私协议开发指南》 微信小程序2.33.0版本+
uploadDouyinVideo 发布抖音视频 抖音小程序2.65.0版本+
im 跳转到抖音IM客服 抖音小程序2.80.0版本+
getAuthorize 支持小程序授权 支付宝小程序
lifestyle 关注生活号 支付宝小程序
contactShare 分享到通讯录好友 支付宝小程序基础库1.11.0版本+
openGroupProfile 呼起QQ群资料卡页面，可以通过group-id属性设定需要打开的群资料卡的群号，同时manifest.json中必须配置groupIdList QQ小程序基础库1.4.7版本+
openGuildProfile 呼起频道页面，可以通过guild-id属性设定需要打开的频道ID QQ小程序基础库1.46.8版本+
openPublicProfile 打开公众号资料卡，可以通过public-id属性设定需要打开的公众号资料卡的号码，同时manifest.json中必须配置publicIdList QQ小程序基础库1.12.0版本+
shareMessageToFriend 在自定义开放数据域组件中,向指定好友发起分享据 QQ小程序基础库1.17.0版本+
addFriend 添加好友， 对方需要通过该小程序进行授权，允许被加好友后才能调用成功用户授权 QQ小程序
addColorSign 添加彩签，点击后添加状态有用户提示，无回调 QQ小程序基础库1.10.0版本+
addGroupApp 添加群应用（只有管理员或群主有权操作），添加后给button绑定@addgroupapp事件接收回调数据 QQ小程序基础库1.16.0版本+
addToFavorites 收藏当前页面，点击按钮后会触发Page.onAddToFavorites方法 QQ小程序基础库1.19.0版本+
chooseAddress 选择用户收货地址，可以从@chooseaddress回调中获取到用户选择的地址信息 百度小程序3.160.3版本+
chooseInvoiceTitle 选择用户发票抬头，可以从@chooseinvoicetitle回调中获取到用户选择发票抬头信息 百度小程序3.160.3版本+
login 登录，可以从@login回调中确认是否登录成功 百度小程序3.230.1版本+
subscribe 订阅类模板消息，需要用户授权才可发送 百度小程序
favorite 触发用户收藏 快手小程序
watchLater 触发用户稍后再看 快手小程序
openProfile 触发打开用户主页 快手小程序

feedback

open-type 为 feedback时：

注意

  • button组件支持style中通过css定义文字大小、颜色

button样式修改

button组件属性中的size和type，属于预置样式，方便开发者使用。开发者也可以通过style和class来自定义样式。

button虽然可以内嵌text组件，但不建议通过text组件来修改button样式，因为会导致hover-class不生效。尤其是uvue中样式不继承。建议直接在button组件的style或class属性编写样式。

style和class的优先级，高于size和type属性。

5.内置API

1.showToast

交换提示

uni.showToast({
	title:"操作成功",
})

2.showActionSheet

下拉菜单

<template>
	<view>
		<h1>用户</h1>
		<button @click="choose">选择</button>
	</view>
</template>

<script setup>
function choose(){
	uni.showActionSheet({
		title:"请选择",
		itemList:["大一","大二","大三","大四"],
		itemColor:"#4cd964"
	})
}
</script>

3.uni.showLoading(OBJECT)

显示 loading 提示框, 需主动调用 uni.hideLoading 才能关闭提示框。

OBJECT参数说明

参数 类型 必 填 说明 平台差异说明
title String 是 提示的文字内容，显示在loading的下方
mask Boolean 否 是否显示透明蒙层，防止触摸穿透，默认：false H5、App、微信小程序、百度小程序、抖音小程序（2.47.0+）
success Function 否 接口调用成功的回调函数
fail Function 否 接口调用失败的回调函数
complete Function 否 接口调用结束的回调函数（调用成功、失败都会执行）

示例

uni.showLoading({
	title: '加载中'
});

4.uni.hideLoading()

隐藏 loading 提示框。

示例

uni.showLoading({
	title: '加载中'
});

setTimeout(function () {
	uni.hideLoading();
}, 2000);

5.uni.showModal(OBJECT)

显示模态弹窗，可以只有一个确定按钮，也可以同时有确定和取消按钮。类似于一个API整合了 html 中：alert、confirm。

OBJECT参数说明

参数 类型 必填 说明 平台差异说明
title String 否 提示的标题
content String 否 提示的内容
showCancel Boolean 否 是否显示取消按钮，默认为 true
cancelText String 否 取消按钮的文字，默认为”取消”
cancelColor HexColor 否 取消按钮的文字颜色，默认为”#000000” H5、微信小程序、百度小程序、抖音小程序（2.62.0+）
confirmText String 否 确定按钮的文字，默认为”确定”
confirmColor HexColor 否 确定按钮的文字颜色，H5平台默认为”#007aff”，微信小程序平台默认为”#576B95”，百度小程序平台默认为”#3c76ff” H5、微信小程序、百度小程序、抖音小程序（2.62.0+）
editable Boolean 否 是否显示输入框 H5 (3.2.10+)、App (3.2.10+)、微信小程序 (2.17.1+)、抖音小程序（2.62.0+）
placeholderText String 否 显示输入框时的提示文本 H5 (3.2.10+)、App (3.2.10+)、微信小程序 (2.17.1+)、抖音小程序（2.62.0+）
success Function 否 接口调用成功的回调函数
fail Function 否 接口调用失败的回调函数
complete Function 否 接口调用结束的回调函数（调用成功、失败都会执行）

success返回参数说明

参数 类型 说明 平台差异说明
confirm Boolean 为 true 时，表示用户点击了确定按钮
cancel Boolean 为 true 时，表示用户点击了取消（用于 Android 系统区分点击蒙层关闭还是点击取消按钮关闭）
content String editable 为 true 时，用户输入的文本 H5 (3.2.10+)、App (3.2.10+)、微信小程序 (2.17.1+)、抖音小程序（2.62.0+）

示例

uni.showModal({
	title: '提示',
	content: '这是一个模态弹窗',
	success: function (res) {
		if (res.confirm) {
			console.log('用户点击确定');
		} else if (res.cancel) {
			console.log('用户点击取消');
		}
	}
});

6.uni.setNavigationBarTitle(OBJECT)

动态设置当前页面的标题。

可用于发送网络请求之后动态更新当前页面的

OBJECT参数说明

参数 类型 必填 说明
title String 是 页面标题
success Function 否 接口调用成功的回调函数
fail Function 否 接口调用失败的回调函数
complete Function 否 接口调用结束的回调函数（调用成功、失败都会执行）

示例

uni.setNavigationBarTitle({
	title: '新的标题'
});

7.uni.setTabBarBadge

onLaunch: function() {
    console.log('App Launch')
    uni.setTabBarBadge({
        index:1,
        text:6
    })
},

8.uni.showTabBarRedDot

显示 tabBar 某一项的右上角的红点。

uni.showTabBarRedDot({
    index:2
})

9.uni.stopPullDownRefresh()

停止当前页面下拉刷新。

export default {
	data() {
		return {
			text: 'uni-app'
		}
	},
	onLoad: function (options) {
		setTimeout(function () {
			console.log('start pulldown');
		}, 1000);
		uni.startPullDownRefresh();
	},
	onPullDownRefresh() {
		console.log('refresh');
		setTimeout(function () {
			uni.stopPullDownRefresh();
		}, 1000);
	}
}

10.uni.navigateTo

跳转指定页面，非tabbar

uni.navigateTo({
    url:"/pages/list/list"
})

11.uni.reLaunch

跳转指定页面

uni.reLaunch({
    url:"/pages/list/list"
})

12.uni.navigateBack()

返回上一页

13.uni.request()

uni.request(OBJECT)

发起网络请求。

在各个小程序平台运行时，网络相关的 API 在使用前需要配置域名白名单。

OBJECT 参数说明

参数名 类型 必填 默认值 说明 平台差异说明
url String 是 开发者服务器接口地址
data Object/String/ArrayBuffer 否 请求的参数 App 3.3.7 以下不支持 ArrayBuffer 类型
header Object 否 设置请求的 header，header 中不能设置 Referer App、H5端会自动带上cookie，且H5端不可手动修改
method String 否 GET 有效值详见下方说明
timeout Number 否 60000 超时时间，单位 ms H5(HBuilderX 2.9.9+)、APP(HBuilderX 2.9.9+)、微信小程序（2.10.0）、支付宝小程序
dataType String 否 json 如果设为 json，会对返回的数据进行一次 JSON.parse，非 json 不会进行 JSON.parse
responseType String 否 text 设置响应的数据类型。合法值：text、arraybuffer 支付宝小程序不支持
sslVerify Boolean 否 true 验证 ssl 证书 仅App安卓端支持（HBuilderX 2.3.3+），不支持离线打包
withCredentials Boolean 否 false 跨域请求时是否携带凭证（cookies） 仅H5支持（HBuilderX 2.6.15+）
firstIpv4 Boolean 否 false DNS解析时优先使用ipv4 仅 App-Android 支持 (HBuilderX 2.8.0+)
enableHttp2 Boolean 否 false 开启 http2 微信小程序
enableQuic Boolean 否 false 开启 quic 微信小程序
enableCache Boolean 否 false 开启 cache 微信小程序、抖音小程序 2.31.0+
enableHttpDNS Boolean 否 false 是否开启 HttpDNS 服务。如开启，需要同时填入 httpDNSServiceId 。 HttpDNS 用法详见 移动解析HttpDNS 微信小程序
httpDNSServiceId String 否 HttpDNS 服务商 Id。 HttpDNS 用法详见 移动解析HttpDNS 微信小程序
enableChunked Boolean 否 false 开启 transfer-encoding chunked 微信小程序
forceCellularNetwork Boolean 否 false wifi下使用移动网络发送请求 微信小程序
enableCookie Boolean 否 false 开启后可在headers中编辑cookie 支付宝小程序 10.2.33+
cloudCache Object/Boolean 否 false 是否开启云加速（详见云加速服务） 百度小程序 3.310.11+
defer Boolean 否 false 控制当前请求是否延时至首屏内容渲染后发送 百度小程序 3.310.11+
success Function 否 收到开发者服务器成功返回的回调函数
fail Function 否 接口调用失败的回调函数
complete Function 否 接口调用结束的回调函数（调用成功、失败都会执行）

6.属性

1.lazy-load

懒加载

<image lazy-load :src="item.url" mode="widthFix" @click="Onshowimg(index)"></image>

7.小项目

<template>
	<view class="content">
	  <view class="segmented">
			<uni-segmented-control 
			:current="currents" 
			:values="values" 
			styleType="button" 
			activeColor="#4cd964"
			 @clickItem="OnClickItem"
			></uni-segmented-control>
		</view>
		<view class="main" v-for="(item,index) of pets" :key="item._id">
			<view class="pic">
				<image lazy-load :src="item.url" mode="widthFix" @click="Onshowimg(index)"></image>
			</view>
			<view class="context">{{item.content}}</view>
		</view>
		
		<view class="float">
			<view class="item" @click="refreshing">
				<uni-icons type="refreshempty" size="26" color="#888"></uni-icons>
			</view>
			<view class="item" @click="totop">
				<uni-icons type="arrow-up" size="26" color="#888"></uni-icons>
			</view>
		</view>
		
		<view class="loadmore">
			<uni-load-more status="loading"></uni-load-more>
		</view>
	</view>
</template>

<script setup>
import {onReachBottom,onPullDownRefresh} from '@dcloudio/uni-app'
let pets = ref([])
let classify = [{key:"all",value:"all"},{key:"dog",value:"dog"},{key:"cat",value:"cat"}];
let currents = ref(0);

const values = computed(()=>classify.map(item=>item.value));
//发送异步请求
const network = async (type)=>{
	uni.showNavigationBarLoading();
	let result = await uni.request({
		url:"https://tea.qingnian8.com/tools/petShow",
		data:{
			size:10,
			type:type?type:"all"
		}
	});
	if (result.data.errCode === 0){
		pets.value = [...pets.value,...result.data.data];
	}else if (result.data.errCode === 400){
		uni.showToast({
			icon:"error",
			title:"none"
		})
	}
	uni.hideNavigationBarLoading();
	uni.hideLoading();
	uni.stopPullDownRefresh();
	
}
const Onshowimg = (index)=>{
	let urls = pets.value.map(item=>item.url);
	uni.previewImage({
		current:index,
		urls:urls
	})
}
//发送网络请求
network();

onReachBottom(()=>{
	network();
})

onPullDownRefresh(()=>{
	pets.value = [];
	network();
})

//刷新
const refreshing = ()=>{
	uni.startPullDownRefresh();
}

//返回顶部
const totop = ()=>{
	uni.pageScrollTo({
		scrollTop:0
	});
}

const OnClickItem = (e)=>{
	currents.value = e.currentIndex;
	pets.value = [];
	network(classify[currents.value].value);
}
</script>

<style lang="less">
	.content{
		padding-right:50rpx;
		padding-left: 50rpx;
		.main{
			margin-top: 60rpx;
			box-shadow: 0 10rpx 30rpx rgba(0,0,0,0.08);
			border-radius:15rpx;
			.pic{
				width: 100%;
			}
			.context{
				padding: 30rpx 30rpx;
				font-size:20rpx;
				color: red;
			}
		}
		
		.float{
			position: fixed;
			right: 30rpx;
			bottom: 80rpx;
			.item{
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
				background-color: rgba(255,255,255,0.9);
				margin-bottom: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			padding-bottom: 30px;
		}
		.loadmore{
			padding-bottom: 30px;
		}
	}
</style>