zoukankan      html  css  js  c++  java
  • uni-app开发经验分享一: 多页面传值的三种解决方法

    开发了一年的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 多页面传值的三种解决方法,如果大家有其他更有效的方法,也欢迎分享到评论区( ̄▽ ̄)~*。

  • 相关阅读:
    慕课网 -- 性能优化之PHP优化总结笔记
    安装memcached服务 和 php 安装memcache扩展
    配置 host only 后 nat不能上网了
    linux svn soeasy
    wamp ssl配置https
    wamp 配置多站点访问
    安装wamp 缺少msvcr100.dll
    vagrant 相关记录
    复制mysql数据库的步骤
    php 的两个扩展 memcache 和 memcachd
  • 原文地址:https://www.cnblogs.com/smileZAZ/p/13684321.html
Copyright © 2011-2022 走看看