uni-app 项目中常见的生命周期方法、核心结构和常用用法
在 uni-app 的 .vue 文件中，遵循标准的 Vue 单文件组件结构：
<template> // 页面结构，等同 HTML
<script> // 页面逻辑，等同 JS
<style> // 页面样式，等同 CSS/LESSdata() {
return {
userInfo: {
avatar: null,
nickName: null,
sex: null,
phonenumber: null
},
jumpList: [...], // 页面按钮项配置
notice: '', // 公告栏内容
path: null // 即将跳转的路径临时变量
}
}{{ }} 和 :prop 都能自动绑定 data 中的字段。初始化 token、用户信息 发起首次请求 读取本地缓存
created() {
let token = uni.getStorageSync('token')
if (!token) {
uni.login({...})
}
}页面激活时刷新用户状态、通知信息 应用场景：A 页面进入 B 页面修改信息，回到 A 页后 onShow 刷新数据。
onShow() {
this.getNotice()
this.userInfo = uni.getStorageSync('userInfo') || {...}
}这是 vue 的 methods 区块，用于编写页面逻辑函数、事件响应函数：
@click="..."、@change="..." 都在这里声明。this.xxx 调用其他方法或变量。methods: {
getPhoneNumber(e) { ... },
jumpTo(path, id) { ... },
getNotice() { ... }
}用户打开页面
└── created() 执行（如检测token、准备数据）
└── 页面渲染 DOM
└── onShow() 执行（刷新数据、加载公告）
└── getNotice()
└── 读取 userInfo
用户操作按钮
└── jumpTo() 被触发
└── 判断是否已授权头像、手机号
└── 未授权 → 请求授权（头像 / 手机号）
└── 已授权 → 发起接口请求，跳转页面此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。