- A+
开发了一年的uni-app，在这里总结一些uni-app开发中的问题，提供几个解决方法，分享给大家：
问题描述：一个主页面，需要联通一到两个子页面，子页面传值到主页面，主页面更新
问题难点：
首先我们需要一个逻辑模型（这里随便画了一个）
通过这个模型，我们可以看到一个问题，子页面的内容怎么传回主页面，怎么让这个传回的方式更安全有效，这也是这个问题的难点，我总结了三种解决方法，在这里分享给大家：
第一种：url传值
顾名思义，就是利用页面的url方法来传值，具体操作逻辑如下：
主页面：用onload事件来获取页面初始化的url值，进行页面刷新，跳转到子页面时用uni.redirectTo方法
子页面：提交事件里将数据转为url格式，跳转回主页面时用uni.redirectTo方法
案例：
主页面：
<template> <view> <h1>opition.id</h1> <view @tap="totextfun">前往子页面</view> </view> </template> <script> export default { data() { return { opition:{ } } }, onLoad(data){ this.opition = data }, methods: { //跳转到子页面 totextfun(){ uni.redirectTo({ url: '/pages/text/text1'}); } } } </script> <style> </style>
子页面：
<template> <view> <view @tap="totextfun">跳转回主页面</view> </view> </template> <script> export default { data() { return { } }, methods: { //跳转回主页面事件 totextfun(){ uni.redirectTo({ url: '/pages/text/text?id=11'}); } } } </script> <style> </style>
优缺点：优点就是简单，简单，简单，这个方法的实现逻辑的优势是很简单粗暴的，但是url传值如果是微信小程序或者app还好，你要是用浏览器，那么你传过去的值会被直接显示在url里，数据不安全，而且还有一个问题，当我主页面初始化时也是有url传值过来的，那么主页面跳转到子页面时也必须要用url把值传递过去，这样写太麻烦了，一个逻辑失误会出大问题。
总结：这类方法适用于新人上手做一个dome来用，而且只能单对单页面，子页面如果归属于多个主页面，那么会出现问题（除非你用url或者vuex解决）。
第二种：返回方法传值
顾名思义，就是利用uni-app的getCurrentPages来获取当前页面与上一页面的信息，通过修改上一页面信息后返回的方法来实现，具体操作逻辑如下：
主页面：用onshow事件执行初始化事件，进行页面刷新，跳转到子页面时用uni.navigateTo方法
子页面：提交事件里将数据转为json格式，通过getCurrentPages获取到上一级页面的内容进行修改，跳转回主页面时用uni.navigateBack方法
案例：
主页面：
<template> <view> <h1>opition.id</h1> <view @tap="totextfun">前往子页面</view> </view> </template> <script> export default { data() { return { opition:{ } } }, onShow(){ //页面跳转回来要执行的事件 }, methods: { //跳转到子页面 totextfun(){ uni.navigateTo({ url: '/pages/text/text1'}); } } } </script> <style> </style>
子页面：
<template> <view> <view @tap="totextfun">跳转回主页面</view> </view> </template> <script> export default { data() { return { } }, methods: { //跳转回主页面事件 totextfun(){ var pages = getCurrentPages();//当前页 var beforePage = pages[pages.length - 2]; var json = { id:11 }; if(beforePage !=undefined){ if(beforePage.opition){//判断是否为小程序，小程序的数据都在data里 beforePage.opition = json; }else{ beforePage.data.opition = json; } } uni.navigateBack(); } } } </script> <style> </style>
优缺点：优点是逻辑走通了，功能实现了，而且数据很安全的被传回去了，但缺点也是有的，就是如果在子页面刷新呢，因为获取不到上一级页面，代码会报错（也可以多加个判断来进行处理），但是已经没有返回上一个页面带传值的功能了。
总结：这种方法虽然有缺点，但的确很实用，排除掉页面刷新的情况，简直无懈可击，而且页面刷新的的情况也可以直接调回首页来处理，毕竟你都在子页面刷新了，主页面的东西肯定会没掉，逻辑上已经走不通了。
第三种：Vuex传值（需要学习vuex相关知识）
顾名思义，就是利用vuex来给数据提供一个暂时储存的位置，从而实现数据的流通传递。
主页面：用onshow事件来获取vuex里的值，进行页面刷新，跳转到子页面时用uni.redirectTo方法
子页面：提交事件里将数据转为json格式，通过vuex方法存到vuex的数据里，跳转回主页面时用uni.redirectTo方法
案例：
<template> <view> <h1>opition.id</h1> <view @tap="totextfun">前往子页面</view> </view> </template> <script> //导入vuexjs import vuex from "@/store/index.js"; export default { data() { return { opition:{ } } }, onShow(){ //页面跳转回来要执行的事件 this.opition = vuex.state.opition; }, methods: { //跳转到子页面 totextfun(){ uni.redirectTo({ url: '/pages/text/text1'}); } } } </script> <style> </style>
子页面：
<template> <view> <view @tap="totextfun">跳转回主页面</view> </view> </template> <script> //导入vuexjs import vuex from "@/store/index.js"; export default { data() { return { } }, methods: { //跳转回主页面事件 totextfun(){ var json = { id:11 }; vuex.commit("setOpition",json);//调用vuex来写入json uni.redirectTo({ url: '/pages/text/text'}); } } } </script> <style> </style>
优缺点：优点是这个数据流程清晰，就算你刷新了也是可以达到数据流通的效果，但缺点也有，这个数据你需要一个上层入口来清除掉，不然你以后进入主页面，通用信息还是会出现。
总结：这种方式也同样很有效，适用于大型项目，它只要管理了入口，可以完美的形成一个闭环，不会有任何bug出现（反正我没出现过问题）。
以上就是我对uni-app 多页面传值的三种解决方法，如果大家有其他更有效的方法，也欢迎分享到评论区(￣▽￣)~*。
