uni-app 入门学习教程，从入门到精通，uni-app基础扩展 —— 详细知识点与案例(3）

uni-app基础扩展 —— 详细知识点与案例

---

一、学习目标

本章旨在掌握 uni-app 中的生命周期机制、条件编译、扩展组件（uni-ui）的使用、辅助样式库（uni-scss）的集成，以及通过综合案例（新闻列表）巩固所学知识。

---

二、生命周期

uni-app 中的生命周期分为三类：应用生命周期、页面生命周期和组件生命周期函数。

1. 应用生命周期（App.vue）

应用生命周期在整个 App 启动到关闭过程中只执行一次。

常用钩子函数：

• onLaunch：App 初始化完成时触发（全局只触发一次）
• onShow：App 启动或从后台进入前台显示
• onHide：App 从前台进入后台

案例代码（App.vue）：

<script>
export default {onLaunch() {console.log('App 启动完成');// 可用于初始化全局状态、获取用户信息等},onShow() {console.log('App 进入前台');// 可用于刷新 token、检查网络状态等},onHide() {console.log('App 进入后台');// 可用于暂停音频、保存临时数据等}
}
</script>

⚠️ 注意：应用生命周期只能在 App.vue 中使用，不能在页面或组件中使用。

---

2. 页面生命周期（pages/xxx.vue）

页面生命周期在每次页面加载/卸载时触发。

常用钩子函数：

• onLoad：监听页面加载，参数为上个页面传递的数据
• onShow：监听页面显示（每次进入页面都会触发）
• onReady：监听页面初次渲染完成
• onHide：监听页面隐藏
• onUnload：监听页面卸载（如通过 navigateBack 返回）

案例代码（pages/news/news.vue）：

<template><view class="news-page"><text>新闻列表页面</text></view>
</template><script>
export default {onLoad(options) {// 页面加载时触发，options 是上个页面传来的参数console.log('页面加载，参数：', options);// 例如：从首页跳转过来携带 id=123，则 options = { id: '123' }},onShow() {console.log('新闻页面显示');// 可用于刷新数据},onReady() {console.log('页面初次渲染完成');// 可用于操作 DOM（如调用 canvas、video 等原生组件）},onHide() {console.log('新闻页面隐藏');},onUnload() {console.log('新闻页面卸载');// 清理定时器、取消网络请求等}
}
</script>

---

3. 组件生命周期函数（components/xxx.vue）

组件生命周期与 Vue 3 的组合式 API 或选项式 API 兼容。uni-app 支持 Vue 2/3 语法。

常用钩子（选项式）：

• beforeCreate
• created
• mounted（对应 uni-app 的 onReady）
• beforeDestroy / unmounted

⚠️ 注意：在组件中不能使用页面生命周期（如 onLoad），只能使用 Vue 标准生命周期。

案例代码（components/NewsItem.vue）：

<template><view class="news-item"><text>{{ title }}</text></view>
</template><script>
export default {props: {title: {type: String,default: '默认标题'}},created() {console.log('组件实例创建完成');// 可进行数据初始化},mounted() {console.log('组件挂载完成');// 可操作子组件或 DOM},beforeDestroy() {console.log('组件即将销毁');// 清理工作}
}
</script>

---

三、条件编译

uni-app 支持平台条件编译，可针对不同平台（H5、微信小程序、App 等）编写特定代码。

语法格式：

// #ifdef 平台标识
// 代码
// #endif// #ifndef 平台标识
// 非该平台的代码
// #endif

常见平台标识：

• H5
• MP-WEIXIN（微信小程序）
• APP-PLUS（App 端）
• MP-ALIPAY（支付宝小程序）

案例：不同平台显示不同按钮

<template><view><!-- 微信小程序专属 -->// #ifdef MP-WEIXIN<button type="primary">微信登录</button>// #endif<!-- H5 专属 -->// #ifdef H5<button type="default">H5 登录</button>// #endif<!-- 非 App 端显示 -->// #ifndef APP-PLUS<text>当前不是 App 端</text>// #endif</view>
</template>

JS 中使用条件编译：

// #ifdef H5
const apiUrl = 'https://h5.api.example.com';
// #endif// #ifdef MP-WEIXIN
const apiUrl = 'https://wx.api.example.com';
// #endif

---

四、扩展组件 uni-ui

uni-ui 是 DCloud 官方提供的跨端 UI 组件库，支持所有 uni-app 平台。

1. 安装 uni-ui

在 HBuilderX 中：

1. 右键项目 → uni_modules → 从插件市场选择
2. 搜索 uni-ui → 安装

或手动安装：

npm install @dcloudio/uni-ui

推荐使用 HBuilderX 图形化安装，自动处理依赖。

2. 引入并使用组件

全局注册（main.js）：

import { createSSRApp } from 'vue'
import App from './App.vue'
import { UniCard, UniList, UniListItem } from '@dcloudio/uni-ui'export function createApp() {const app = createSSRApp(App)app.component('UniCard', UniCard)app.component('UniList', UniList)app.component('UniListItem', UniListItem)return app
}

局部引入（推荐，按需加载）：

<template><view><uni-card title="新闻标题" :thumbnail="thumbUrl">这是新闻内容摘要...</uni-card></view>
</template><script>
// 按需引入
import { UniCard } from '@dcloudio/uni-ui'export default {components: { UniCard },data() {return {thumbUrl: 'https://example.com/thumb.jpg'}}
}
</script>

---

五、uni-scss 辅助样式

uni-scss 是一套基于 scss 的跨端样式变量库，提供统一的颜色、间距、边框等变量。

使用步骤：

1. 安装 uni-scss（通常随 uni-ui 自动安装）
2. 在 App.vue 或页面中引入

<style lang="scss">
@import '@/uni_modules/uni-scss/index.scss';.news-container {padding: $uni-spacing-col-lg; // 使用预设间距变量background-color: $uni-bg-color-grey;
}
</style>

常用变量示例：

• $uni-color-primary：主色
• $uni-spacing-row-base：水平基础间距
• $uni-font-size-lg：大号字体

---

六、案例：新闻列表（综合应用）

功能需求：

• 使用 uni-list 展示新闻列表
• 每条新闻包含标题、摘要、缩略图
• 点击跳转详情页
• 使用生命周期加载数据
• 使用 uni-scss 统一样式
• 条件编译：H5 端显示“刷新”按钮，小程序端不显示

1. pages/news/index.vue

<template><view class="news-container"><!-- 条件编译：仅 H5 显示刷新按钮 -->// #ifdef H5<button class="refresh-btn" @click="loadNews">刷新</button>// #endif<uni-list><uni-list-itemv-for="item in newsList":key="item.id":title="item.title":note="item.summary":thumb="item.thumb"thumb-size="lg"clickable@click="goDetail(item.id)"/></uni-list></view>
</template><script>
import { UniList, UniListItem } from '@dcloudio/uni-ui'export default {components: { UniList, UniListItem },data() {return {newsList: []}},onLoad() {this.loadNews()},methods: {loadNews() {// 模拟网络请求this.newsList = [{ id: 1, title: '科技新闻1', summary: '这是第一条科技新闻摘要...', thumb: '/static/thumb1.jpg' },{ id: 2, title: '财经新闻2', summary: '股市大涨...', thumb: '/static/thumb2.jpg' }]},goDetail(id) {uni.navigateTo({url: `/pages/news/detail?id=${id}`})}}
}
</script><style lang="scss">
@import '@/uni_modules/uni-scss/index.scss';.news-container {padding: $uni-spacing-col-base;background-color: $uni-bg-color;
}// #ifdef H5
.refresh-btn {margin-bottom: $uni-spacing-col-lg;background-color: $uni-color-primary;color: white;
}
// #endif
</style>

2. pages/news/detail.vue

<template><view class="detail-page"><uni-card :title="detail.title" :thumbnail="detail.thumb"><text>{{ detail.content }}</text></uni-card></view>
</template><script>
import { UniCard } from '@dcloudio/uni-ui'export default {components: { UniCard },data() {return {detail: {}}},onLoad(options) {const id = options.id// 模拟根据 id 获取详情this.detail = {title: `新闻详情 ${id}`,thumb: '/static/thumb1.jpg',content: '这里是详细的新闻内容...'}}
}
</script>

---

七、本章小结

知识点	说明
生命周期	区分应用、页面、组件三类生命周期，避免混用
条件编译	实现多端差异化逻辑，提升兼容性
uni-ui	官方 UI 库，开箱即用，支持按需引入
uni-scss	提供统一设计变量，提升样式一致性
综合案例	结合生命周期、组件、样式、路由实现完整功能

---

💡 最佳实践建议：

• 页面数据初始化放在 onLoad
• 全局状态管理建议使用 vuex 或 pinia
• 组件尽量使用局部注册，减少包体积
• 条件编译代码需谨慎维护，避免逻辑混乱

---

如需进一步扩展（如分页加载、下拉刷新、骨架屏等），可在本章基础上结合 onPullDownRefresh、scroll-view 等 API 实现。