uni的页面解析

uni-app 项目中常见的生命周期方法、核心结构和常用用法

一、整体结构简析

在 uni-app 的 .vue 文件中，遵循标准的 Vue 单文件组件结构：

<template>   // 页面结构，等同 HTML
<script>     // 页面逻辑，等同 JS
<style>      // 页面样式，等同 CSS/LESS

二、data()：页面的响应式数据模型

data() {
  return {
    userInfo: {
      avatar: null,
      nickName: null,
      sex: null,
      phonenumber: null
    },
    jumpList: [...], // 页面按钮项配置
    notice: '',      // 公告栏内容
    path: null       // 即将跳转的路径临时变量
  }
}

用途： 这里的数据相当于前端的状态管理器（简易版 Vuex），模板中的 {{ }} 和 :prop 都能自动绑定 data 中的字段。

响应式： 一旦修改，页面自动刷新。

三、生命周期钩子（重点）

created()

触发时机： 页面组件初始化完成、DOM 未渲染前触发。

常用场景：

初始化 token、用户信息

发起首次请求

读取本地缓存

created() {
  let token = uni.getStorageSync('token')
  if (!token) {
    uni.login({...})
  }
}

onShow()

触发时机： 每次页面显示/切换到当前页面时都会触发（不像 created 只执行一次）。

常用场景：

页面激活时刷新用户状态、通知信息

应用场景：A 页面进入 B 页面修改信息，回到 A 页后 onShow 刷新数据。

onShow() {
  this.getNotice()
  this.userInfo = uni.getStorageSync('userInfo') || {...}
}

四、methods：页面方法区（类的成员方法）

这是 vue 的 methods 区块，用于编写页面逻辑函数、事件响应函数：

所有绑定在模板事件的 @click="..."、@change="..." 都在这里声明。

可通过 this.xxx 调用其他方法或变量。

methods: {
  getPhoneNumber(e) { ... },
  jumpTo(path, id) { ... },
  getNotice() { ... }
}

总结：页面执行流程图

用户打开页面
 └── created() 执行（如检测token、准备数据）
 └── 页面渲染 DOM
 └── onShow() 执行（刷新数据、加载公告）
    └── getNotice()
    └── 读取 userInfo
用户操作按钮
 └── jumpTo() 被触发
    └── 判断是否已授权头像、手机号
    └── 未授权 → 请求授权（头像 / 手机号）
    └── 已授权 → 发起接口请求，跳转页面