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

  • 相关阅读:
    VisualSVN-Server windows 版安装时报错 "Service 'VisualSVN Server' failed to start. Please check VisualSVN Server log in Event Viewer for more details."
    Pytest 单元测试框架之初始化和清除环境
    Pytest 单元测试框架入门
    Python(email 邮件收发)
    Python(minidom 模块)
    Python(csv 模块)
    禅道简介
    2020年最好的WooCommerce主题
    Shopify网上开店教程(2020版)
    WooCommerce VS Magento 2020:哪个跨境电商自建站软件更好?
  • 原文地址:https://www.cnblogs.com/smileZAZ/p/13684321.html
Copyright © 2011-2022 走看看