uniapp多页面搭建
多页面应用配置
在pages.json中配置多个页面路径，每个页面需包含path和style属性。例如配置首页和详情页：
{
"pages": [
{
"path": "pages/index/index",
"style": { "navigationBarTitleText": "首页" }
},
{
"path": "pages/detail/detail",
"style": { "navigationBarTitleText": "详情页" }
}
]
}页面路由跳转
使用uni.navigateTo实现保留当前页面的跳转，目标页面可通过uni.navigateBack返回：
uni.navigateTo({
url: '/pages/detail/detail?id=123'
})使用uni.redirectTo关闭当前页面并跳转，无法返回原页面：
uni.redirectTo({
url: '/pages/login/login'
})页面间通信
通过URL参数传递简单数据：
// 发送方
uni.navigateTo({
url: '/pages/detail/detail?title=测试数据'
})
// 接收方
onLoad(options) {
console.log(options.title) // 输出"测试数据"
}复杂数据建议使用全局变量、Vuex或本地存储：
// 使用uni.setStorageSync存储
uni.setStorageSync('sharedData', { key: 'value' })
// 目标页面读取
const data = uni.getStorageSync('sharedData')分包加载配置
在pages.json中通过subPackages配置分包，减少主包体积：
{
"subPackages": [
{
"root": "packageA",
"pages": [
{ "path": "page1", "style": { ... } },
{ "path": "page2", "style": { ... } }
]
}
]
}页面生命周期管理
每个页面需正确处理生命周期事件，例如onLoad、onShow：
export default {
onLoad(options) {
// 页面创建时执行
},
onShow() {
// 页面显示时执行
},
onUnload() {
// 页面卸载时清理资源
}
}公共组件复用
创建可复用组件并全局注册，在components目录新建文件：
// components/example.vue
<template>
<view>{{ message }}</view>
</template>
<script>
export default {
props: ['message']
}
</script>在页面中直接使用：
<template>
<example message="公共组件内容"/>
</template>条件编译处理
针对不同平台进行条件编译，使用特殊注释语法：
// #ifdef H5
console.log('仅在H5平台执行')
// #endif
// #ifdef MP-WEIXIN
console.log('仅在微信小程序执行')
// #endif
