【uni-app笔记整理一】HelloWorld及基本配置（page.json）

### 返回上级页面时传递参数的解决方案 在 UniApp 和 Vue 3 的开发环境中，`uni.navigateBack()` 是用于返回上一页面的方法。如果需要在此过程中传递参数，则可以通过 `url` 参数或者全局状态管理工具（如 Vuex 或 Pinia）来实现。 #### 使用 `url` 参数的方式 当调用 `uni.navigateTo()` 跳转到新页面时，可以将数据存储在一个临时变量中，在目标页面加载完成后通过事件机制通知其读取这些数据。然而更常见的是利用 `onUnload` 生命周期方法配合全局对象保存数据[^1]： ```javascript // 页面A跳转至B并携带参数 uni.navigateTo({ url: '/pages/B?param=' + encodeURIComponent(JSON.stringify(data)) }); ``` 对于返回操作中的传参需求，可以在 B 页面卸载前把要带回的数据存放到 globalData 或者其他共享区域里；之后 A 页面监听特定条件触发刷新逻辑完成最终效果呈现[^2]: ```javascript // 在页面B准备离开之前设置globalData const app = getApp(); app.globalData.returnedParam = someValue; // 然后执行回退动作 uni.navigateBack({ delta: 1 // 表示回到上一级页面 }); // 页面A接收处理来自B页的信息 Page({ onShow() { const appInstance = getApp(); let returnedInfo = appInstance.globalData.returnedParam; if (returnedInfo !== undefined && returnedInfo !== null){ this.setData({ keyName: returnedInfo }); delete appInstance.globalData.returnedParam; // 清理不再使用的属性防止污染内存空间 } } }) ``` #### 利用 Vuex 进行跨页面通信 另一种更加优雅的做法就是引入状态管理模式——Vuex 来统一管理和分发应用内的各种信息流变化情况[^3] 。下面给出基于此思路的一个简单例子说明如何借助它达成相同目的: ```javascript // store.js 配置文件定义state以及mutations函数用来改变该值 import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({ state:{ sharedParameter:null, }, mutations:{ setSharedParameter(state, payload){ state.sharedParameter=payload; } } }) // 页面B即将关闭之际提交mutation更新store里的sharedParameter字段内容 this.$store.commit('setSharedParameter', {message:'hello world!'}); // 接着正常调用navigateBack指令即可 uni.navigateBack(); // 最终于页面A内部订阅上述改动从而做出相应反应调整UI界面显示状况等等... watchEffect(() => { console.log(this.$store.state.sharedParameter); }); ``` 以上两种方式各有优劣之处需根据实际项目场景灵活选用合适的技术手段解决问题。