写在前面：分享技术，共同进步，有不足请见谅，相关意见可评论告知 ~

有道无术，术尚可求； 有术无道，终止于术!

多端运行，架式简化； 编程路漫，学无止尽！

文章目录

条件编译生命周期应用生命周期页面生命周期 API网络请求发起请求文件下载监听的用法 路由跳转窗口动画API组件pages.json

条件编译

官方文档参考 可以使用 process.env.NODE_ENV 来获取运行环境 运行编译—> 开发环境 发行编译—>生产环境

development 是开发环境 production 是生产环境

#ifdef ：只在某平台出现 #ifndef ： 除了某平台以外都出现 #endif ： 结尾标识符

生命周期

官方文档参考 往期参考 跳转链接

应用生命周期

应用生命周期是针对一整个应用去触发的，如应用启动、初始化、报错等。

应用生命周期只能在 App.vue 中监听，其他页面无法监听

函数名说明onLaunch当uni-app 初始化完成时触发（全局只触发一次）onShow当 uni-app 启动，或从后台进入前台显示onHide当 uni-app 从前台进入后台onError当 uni-app 报错时触发onUniNViewMessage对 nvue 页面发送的数据进行监听，可参考 nvue 向 vue 通讯onUnhandledRejection对未处理的 Promise 拒绝事件监听函数（2.8.1+）onPageNotFound页面不存在监听函数onThemeChange监听系统主题变化

代码演示

<script> export default { onLaunch() { console.log("app初始化完成") }, onShow() { console.log("app启动") }, onHide() { console.log("App进入后台") } } </script> <style> /*每个页面公共css */ </style>

页面生命周期

页面生命周期就类似于Vue中的生命周期，在每个页面加载、进入、渲染、销毁等场景触发

函数名说明平台差异说明最低版本onLoad监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参），参考示例onShow监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面onReady监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发onHide监听页面隐藏onUnload监听页面卸载onResize监听窗口尺寸变化App、微信小程序onPullDownRefresh监听用户下拉动作，一般用于下拉刷新，参考示例onReachBottom页面上拉触底事件的处理函数onTabItemTap点击 tab 时触发，参数为Object，具体见下方注意事项微信小程序、百度小程序、H5、App（自定义组件模式）onShareAppMessage用户点击右上角分享微信小程序、百度小程序、字节跳动小程序、支付宝小程序onPageScroll监听页面滚动，参数为ObjectonNavigationBarButtonTap监听原生标题栏按钮点击事件，参数为Object5+ App、H5onBackPress监听页面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack表示来源是 uni.navigateBack ；详细说明及使用：onBackPress 详解App、H5onNavigationBarSearchInputChanged监听原生标题栏搜索输入框输入内容变化事件App、H51.6.0onNavigationBarSearchInputConfirmed监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。App、H51.6.0onNavigationBarSearchInputClicked监听原生标题栏搜索输入框点击事件App、H51.6.0onShareTimeline监听用户点击右上角转发到朋友圈微信小程序2.8.1+onAddToFavorites监听用户点击右上角收藏微信小程序2.8.1+

onPageScroll 参数说明：

属性类型说明scrollTopNumber页面在垂直方向已滚动的距离（单位px）

onTabItemTap 参数说明：

属性类型说明indexString被点击tabItem的序号，从0开始pagePathString被点击tabItem的页面路径textString被点击tabItem的按钮文字

onNavigationBarButtonTap 参数说明：

属性类型说明indexNumber原生标题栏按钮数组的下标

onBackPress 回调参数对象说明：

属性类型说明fromString触发返回行为的来源：‘backbutton’——左上角导航栏按钮及安卓返回键；‘navigateBack’——uni.navigateBack() 方法。

代码演示

<template> <view> <view v-for="item in arr"> {{item}} </view> </view> </template> <script> export default { data() { return { arr: [ // 模拟下拉情况 1,2,3,4,5,6,7,12312,5413,423,213,14,235,23,412,312,3125,8,9,10,11,12,12,131,41,123,412,412,321,5123,41,12,312,154,3,4312,32 ] } }, onLoad(e) { console.log("页面加载", e) }, onShow() { console.log("页面显示") }, onPullDownRefresh() { this.arr = [ 1,2,3,4,5,6,7,12312,5413,423,213,14,235,23,412,312,3125,8,9,10,11,12,12,131,41,123,412,412,321,5123,41,12,312,154,3,4312,32 ] console.log("下拉刷新") setTimeout(()=>{ uni.stopPullDownRefresh() }, 2000) }, onReachBottom() { this.arr.push(...[ 1,2,34,4,5,6 ]) console.log("触底加载") }, onShareAppMessage() { console.log("点击了分享") }, methods: { } } </script> <style> </style>

API

官方文档参考

网络请求

发起请求

文件下载

文件上传与下载对比学习

OBJECT 参数说明

参数名类型必填说明urlString是下载资源的 urlheaderObject否HTTP 请求 Header, header 中不能设置 Referer。successFunction否下载成功后以 tempFilePath 的形式传给页面，res = {tempFilePath: ‘文件的临时路径’}failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）

注：文件的临时路径，在应用本次启动期间可以正常使用，如需持久保存，需在主动调用 uni.saveFile，才能在应用下次启动时访问得到。

success 返回参数说明

参数类型说明tempFilePathString临时文件路径，下载后的文件会存储到一个临时文件statusCodeNumber开发者服务器返回的 HTTP 状态码

监听的用法

代码演示

<template> <view> <button type="default" @click="getData()">点我发送请求</button> <button type="default" @click="download()">点我下载</button> <progress :percent="percent" show-info /> </view> </template> <script> export default { data() { return { percent: 0 } }, methods: { getData() { uni.request({ url:"http://47.102.115.146:8080/department/departmentList", method:"GET", success(e) { console.log("请求成功", e) }, fail(e) { console.log("请求失败", e) } }) }, download() { const task = uni.downloadFile({ url:"https://ydsmarkdown.oss-cn-beijing.aliyuncs.com/audio/景岗山 - 守业更比创业难.mp3", success(e) { console.log("下载成功！", e) }, fail(e) { console.log("下载失败！", e) } }) task.onProgressUpdate((e) => { this.percent = e.progress }) } } } </script> <style> </style>

文件下载同样可以监听，用法和上传一样。

路由跳转

官方文档参考

重点： navigateTo ,redirectTo, reLaunch

窗口动画

本API仅App支持

窗口的显示/关闭动画效果，支持在 API、组件、pages.json 中配置，优先级为：API = 组件 > pages.json。

API

有效的路由 API

navigateTonavigateBack uni.navigateTo({ url: '../test/test', animationType: 'pop-in', animationDuration: 200 }); uni.navigateBack({ delta: 1, animationType: 'pop-out', animationDuration: 200 });

组件

open-type 有效值

navigateTonavigateBack <navigator animation-type="pop-in" animation-duration="300" url="../test/test">navigator</navigator> <navigator animation-type="pop-out" animation-duration="300" open-type="navigateBack" >navigator</navigator>

pages.json

pages.json 中配置的是窗口显示的动画

"style": { "app-plus": { "animationType": "fade-in", "animationDuration": 300 } }

显示动画与关闭动画，会有默认的对应规则。但是如果通过 API 或组件配置了窗口关闭的动画类型，则不会使用默认的类型。

显示动画关闭动画显示动画描述（关闭动画与之相反）slide-in-rightslide-out-right新窗体从右侧进入slide-in-leftslide-out-left新窗体从左侧进入slide-in-topslide-out-top新窗体从顶部进入slide-in-bottomslide-out-bottom新窗体从底部进入pop-inpop-out新窗体从左侧进入，且老窗体被挤压而出fade-infade-out新窗体从透明到不透明逐渐显示zoom-outzoom-in新窗体从小到大缩放显示zoom-fade-outzoom-fade-in新窗体从小到大逐渐放大并且从透明到不透明逐渐显示nonenone无动画