【笔记】uniapp

uniapp学习笔记，持续修改中。 时间：2023.8.16

uni-app的生命周期

onLaunch：初始化完成时，只触发一次，类似created
onShow：从后台挂载到前台时或uniapp启动时
onHide：从前台进入后台
onError：页面报错时
onUniNViewMessage：对 nvue 页面发送的数据进行监听
（可以理解为nvue是面向移动端，vue是面向网页端，uniapp对二者的渲染方式不同

项目目录

pages 页面
static 静态资源
unpackage 打包文件
app.vue 项目根组件
main.js 项目入口文件
manifest.json 配置文件
pages.json 页面路径和外观
uni.scss 内置变量 ：预设好的可以直接使用的变量

开发规范

文件遵循vue，组件标签、接口靠近小程序，推荐使用flex布局

全局配置

在pages.json中的globalStyle中配置
navigationBarBackgroundColor：导航栏背景颜色
navigationBarTextStyle：导航栏文字颜色，只支持black/white
navigationBarTitleText：导航栏标题文字
enablePullDownRefresh：是否可以下拉刷新
backgroundColor：背景颜色（下拉刷新时露出的部分
backgroundTextStyle：下拉刷新样式，仅支持light/dark
onReachBottomDisance：上拉触底事件触发距离

页面配置

在pages.json中以对象形式配置页面路径，第一个是主页面

配置项

pages

path：路径
style：页面样式，会覆盖全局样式
——h5：在h5运行时的特有样式（也有小程序、app的个性化
在这里插入图片描述

tabbar

和pages同级，数量2<=n<=5，用于配置底端tabbar的页面指向、相关配置等
condition：用于引导进入程序时的初始页面（例如商品详情链接
current：list的索引值
list：数组，数组内容为页面具体配置

导航跳转

通过navigator标签跳转

<navigator url="">链接文本</navigator>
属性：
url：路径
open-type：
switchTab——如果要跳转到tabbar的页面，需要设置
redirect——页面重定向，页面跳转后没有返回键，原本的页面会触发onUnload
navigateBack——返回 需要配合delta设置返回层数
exit——退出小程序（此时target的值要为miniProgram

编程式导航（写在事件调用的方法中

uni.navigateTo({url:''}) 跳转普通页面，不关闭原本页面
uni.swtchTab({}) 跳转到tabbar页面，会卸载其他tabbar
uni.redirectTo({}) 跳转普通页面，关闭原本页面

跳转页面传参

传：在url后面直接带参数
收：onLoad的options参数

组件生命周期

和vue的组件一致，beforeCreate\created\beforeMount\mounted