uni-app

生命周期

• onLoad   页面挂载前触发里面包含路由参数
• onShow  页面展示的时候触发
• onHide   页面隐藏的时候触发
• onReady  DOM加载完触发
• onUnload  页面卸载的时候触发
• onPageScroll  页面滚动的时候触发返回一个对象
• onPullDownRefresh  页面下拉刷新触发
• onReachBottom  页面上拉触底触发

import { onLoad, onReady, onShow, onHide } from "@dcloudio/uni-app"使用uni-app生命周期需要引入，

1、uniapp中组件生命周期函数和页面生命周期函数的执行顺序

不包含组件的页面

onLoad > onShow > onReady

包含组件的页面

onLoad > onShow > onBeforeMount > onReady > onMounted

globalStyle配置

• navigationBarBackgroundColor  导航栏背景颜色

• navigationBarTextStyle   导航栏标题颜色，仅支持 black/white

• navigationBarTitleText   导航栏标题文字

• navigationStyle  导航栏样式，仅支持 default/custom

• backgroundColor  下拉窗口背景颜色

• backgroundTextStyle   下拉loading样式，仅支持 dark/light

• enablePullDownRefresh  是否开始下拉刷新

• onReachBottomDistance   页面上拉触底事件触发时距页面底部距离，单位只支持px

vue模块中自动导入

使用自动导入插件unplugin-auto-import

1.在项目命令行终端中执行如下代码

npm install unplugin-auto-import

2.根目录下创建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'                
            ]
        })
    ]    
})

ios底部安全区域css环境变量

env(safe-area-inset-bottom)