退出系统
2.0 版本 weex 版本

graceUI - weex 教程 - 页面跳转及传参

1、nvue 页面跳转到 vue 页面并传参

<template>
	<div>
		<list>
			<cell>
				<text class="text" @click="testFun">页面跳转</text>
			</cell>
		</list>
	</div>
</template>
<script>
export default {
	data() {
		return {
			
		}
	},
	methods: {
		testFun : function(){
			uni.navigateTo({
				url : "../test/test?a=1&b=2"
			});
		}
	},
}
</script>
<style>
.text{width:750px; height:200px; background-color: #007AFF; margin:10px 0; font-size:50px; text-align:center; line-height:200px; color:#FFFFFF;}
</style>

新打开的页面
<script>
export default {
	data() {
		return {
			
		}
	},
	onLoad:function(e){
		console.log(e);
	},
	methods: {
		 
	}
}
</script>

2、统一传参优化
在实际项目开发过程中可能 出现 nuve -> vue , vue->nvue, vue -> vue, nvue->nvue 多种模式,为了统一实现页面传参您可以使用本地存储记录参数;
注意 :这种方式参数在打开新页面时会被覆盖, 有效值只有一次;

// 此 js 来自 graceUI js 模块 [ 为了方便大家使用 此模块免费开放给大家 ]
// graceUI 官网 http://grace.hcoder.net/
module.exports = {
	
	navigateTo : function(obj){
		this.setParameters(obj.url);
		uni.navigateTo(obj);
	},
	
	redirectTo : function(obj){
		this.setParameters(obj.url);
		uni.redirectTo(obj);
	},
	
	reLaunch : function(obj){
		this.setParameters(obj.url);
		uni.reLaunch(obj);
	},
	
	switchTab : function(obj){
		uni.switchTab(obj);
	},
	
	navigateBack : function(){
		uni.switchTab(navigateBack);
	},
	
	setParameters : function(url){
		var urls = url.split('?');
		if(urls.length < 2){return false;}
		var parameters = {};
		urls = urls[1];
		urls = urls.split('&');
		for(let i = 0; i < urls.length; i++){
			var arr = urls[i].split('=');
			parameters[arr[0]] = arr[1];
		}
		try{
			uni.setStorageSync('graceUIPageParameters', JSON.stringify(parameters));
		}catch(e){
			//TODO handle the exception
		}
	},
	
	getParameters : function(){
		try{
			return JSON.parse(uni.getStorageSync('graceUIPageParameters'));
		}catch(e){
			return null;
		}
	}
}

使用示例

<template>
	<div>
		<list>
			<cell>
				<text class="text" @click="testFun">页面跳转</text>
			</cell>
		</list>
	</div>
</template>
<script>
var navigatorJs = require("../../graceUI/jsTools/navigator.js");
export default {
	data() {
		return {
			
		}
	},
	methods: {
		testFun : function(){
			navigatorJs.navigateTo({url:'../test/test?a=2&b=3'});
		}
	}
}
</script>
<style>
.text{width:750px; height:200px; background-color: #007AFF; margin:10px 0; font-size:50px; text-align:center; line-height:200px; color:#FFFFFF;}
</style>

接收数据页面
<template>
	<div>
		<scroller class="grace-scroller" style="margin-top:130px;">
			<text>test......</text>
		</scroller>
	</div>
</template>
<script>
var navigator = require("../../graceUI/jsTools/navigator.js"); 
export default {
	data() {
		return {};
	},
	created:function(e){
		console.log(navigator.getParameters());
	},
	methods:{
		
	}
}
</script>