笔记-uni-app

codeez 发布于 2025-4-1 18:20 阅读：174 笔记

App.vue中的style标签不要写scoped属性
样式选择：page 就相当于 body

定义全局数据：globalData
在别的组件中拿全局数据：

const app = getApp()
console.log(app.globalData)

拿当前路由

const pages = getCurrentPages()
console.log(pages)

页面的生命周期
onLoad
用OptionsAPI比ComponsitionAPI方便
复杂的小程序用原生微信开发

pages.json文件用来对uni-app进行全局配置，类似微信小程序中的app.json
决定页面路径、窗口样式、原生的导航栏、底部的原生tabbar等
<view>标签代替<div> 视图容器
<text>标签是文本
<button>标签是按钮
<image>图片，默认宽320px、高240px（支持相对路径、绝对路径、导入、base64）
<scroll-view>可滚动视图区域

竖向滚动时，需要给它一个固定高度
横向滚动时，需要给它添加white-space:nowrap样式，子元素设置为行内块
请勿在里面使用map、video等原生组件
swiper滑块视图容器，默认宽100%，高150px

uni-app的easycom，将组件引入精简为一步。
easycom是自动开启的，不需要手动开启；
不管components目录下安装了多少组件，easycom打包后会自动剔除没有使用的组件，对组件库的使用尤为友好。
路径规范指：
（a）安装在项目根目录的components目录下，并符合components/组件名称/组件名称.vue
（b）安装在uni_modules下，路径为uni_modules/插件ID/components/组件名称/组件名称.vue

页面间传递参数：
1.可通过navigator标签上的url属性，或者uni.navigateTo({ url:"/pages/xxx/xxx?abc=bbc" })
目标页面的onLoad生命周期方法的参数options接收。
2.eventChannel

uni.navigateTo({
    url:"/pages/xxx/xxx",
    //页面跳转成功之后
    success(res) {
        res.eventChannel.emit('触发的事件',{
            data:'传递的数据'
        })
    }
})
// 在目标页面监听事件
onLoad(options) {
    const eventChannel = this.getOpenerEventChannel()
    eventChannel.on('触发的事件', (data) => {
        console.log(data)
    })
}
// 它也能触发，逆向传递

3.事件总线

uni.$emit('触发事件', {})
uni.$on('监听事件',(data)=>{}) //$once 只监听一次
onUnload(){
// 记得取消监听
uni.$off("事件"，callback)
}

应用(APP)生命周期：onLaunch、onShow、onHide
页面生命周期：onLoad、onShow、onReady、onHide、onUnload、onPullDownRefresh、onReachBottom(滚动到底部)
uni.stopPullDownRefresh()关闭下拉刷新
在compositionAPI中需要从@dcloudio/uni-app中引入

uni.request网络请求，可自己用Promise封装
uni.setStorage本地存储 set/get/remove/clear

分包
类似懒加载；
为了优化小程序的加载性能，可拥有一个主包多个分包；
tabs页面不能放分包要放主包，分包内可放置其他页面；

创建流程：
// pages.json

"subPackages":[
  {
    "root":"subcom-pkg", // 设置分包的跟路径
    "pages":[

    ]
  }
]

在项目根目录创建文件夹：subcom-pkg

右键subcom-pkg目录新建页面；自动补充页面信息；

跳转到分包：

前端