UniApp 笔记

@ 开头的绝对路径以及相对路径会经过base64转换规则校验

应用生命周期

uni-app 支持 onLaunch、onShow、onHide 等应用生命周期函数，详情请参考应用生命周期

页面生命周期

uni-app 支持 onLoad、onShow、onReady 等生命周期函数，详情请参考页面生命周期

路由

uni-app页面路由为框架统一管理，开发者需要在pages.json里配置每个路由页面的路径及页面样式。

路由跳转

uni-app 有两种页面路由跳转方式：使用navigator组件跳转、调用API跳转。

js文件引入

// 绝对路径，@指向项目根目录，在cli项目中@指向src目录
import add from '@/common/add.js'
// 相对路径
import add from '../../common/add.js'

css引入静态资源

/* 绝对路径 */
@import url('/common/uni.css');
@import url('@/common/uni.css');
/* 相对路径 */
@import url('../../common/uni.css');

 # 本地背景图片的引用路径推荐使用以 ~@ 开头的绝对路径。
 .test2 {
     background-image: url('~@/static/logo.png');
 }

data 属性

data 必须声明为返回一个初始数据对象的函数（注意函数内返回的数据对象不要直接引用函数外的对象）；否则页面关闭时，数据不会自动销毁，再次打开该页面时，会显示上次数据。

    //正确用法，使用函数返回对象
    data() {
        return {
            title: 'Hello'
        }
    }

    //错误写法，会导致再次打开页面时，显示上次数据
    data: {
        title: 'Hello'
    }

    //错误写法，同样会导致多个组件实例对象数据相互影响
    const obj = {
        title: 'Hello'
    }
    data() {
        return {
            obj
        }
    }