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

uni-app开发经验分享一: 多页面传值的三种解决方法的更多相关文章

  1. React Router v4 页面传值的三种方法

    传值方法 1.props.params 使用React router定义路由时,我们可以给指定一个path,然后指定通配符可以携带参数到指定的path: <Route path='/user/: ...

  2. javascript静态页面传值的三种方法分享

    一:JavaScript静态页面值传递之URL篇能过URL进行传值.把要传递的信息接在URL上.Post.htm 复制代码 代码如下: <input type="text" ...

  3. PHP -- 页面传值的6种获取方法

    1.PHP4以后获取传值的方法 一般在页面中传值常见的是POST.GET和COOKIE几种,所以下面我也主要介绍这几种.PHP4以后都采用的是$_POST.$_GET等数组来获取网页传值.在PHP3. ...

  4. React Router页面传值的三种方法

    文章地址:https://blog.csdn.net/qq_23158083/article/details/68488831

  5. PHP页面跳转三种实现方法

    一.header()函数 header()函数是PHP中进行页面跳转的一种十分简单的方法.header()函数的主要功能是将HTTP协议标头(header)输出到浏览器.header()函数的定义如下 ...

  6. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  7. 【页面传值6种方式】- 【JSP 页面传值方法总结:4种】 - 【跨页面传值的几种简单方式3种】

    阅读目录 1. URL 链接后追加参数 2. Form 3. 设置 Cookie 4. 设置 Session JSP 页面间传递参数是项目中经常需要的,这应该算是 web 基本功吧. 试着将各种方式总 ...

  8. AppStore下载失败使用已购页面再试一次解决方法

    AppStore载失败 使用已购页面再试一次解决方法 工具/原料 Mac OS 方法/步骤 1.大家可以先试试更改系统 DNS 的方法,由于苹果的 App Store 应用商店在国外,所以 DNS 如 ...

  9. MVC控制器向View视图传值的三种方法

    首先创建一个MVC的项目,其中需要一个控制器(TestController),三个视图(index,edit,detail) 1.项目结构如下:

随机推荐

  1. Python之复制列表

    将一个列表的数据复制到另外一个列表中. 1 a = [1,2,3] #定义列表a 2 3 b = a[:] #将列表a的切片赋值给b,也可以理解为将b的值设置为a[:] 4 5 print(a) #打 ...

  2. C# 队列Queue,ConcurrentQueue,BlockingCollection 并发控制lock,Monitor,信号量Semaphore

    什么是队列? 队列Queues,是一种遵循先进先出的原则的集合,在.netCore中微软给我们提供了很多个类,就目前本人所知的有三种,分别是标题提到的:Queue.ConcurrentQueue.Bl ...

  3. java.io.IOException: Target host must not be null, or set in parameters. scheme=null, host=null, path=/

    使用的 xutils 出现标题中的错误 原因:没有添加 Cookie 1 params.addHeader("Cookie", CurrentUserSettings.getCoo ...

  4. Apache Calcite 论文学习笔记

    特别声明:本文来源于掘金,"预留"发表的[Apache Calcite 论文学习笔记](https://juejin.im/post/5d2ed6a96fb9a07eea32a6f ...

  5. HTML学习案例--仿淘宝商品信息

    步骤:1.布局分析 2.敲代码 考察知识点: 1.类选择器(素材第四天) 2.CSS关于display,padding,margin的应用 3.如何用div布局 总结: 如果想让一行有两组以上的字块, ...

  6. elasticsearch基本概念和基本语法

    Elasticsearch是基于Json的分布式搜索和分析引擎,是利用倒排索引实现的全文索引. 优势: 横向可扩展性:增加服务器可直接配置在集群中 分片机制提供更好的分布性:分而治之的方式来提升处理效 ...

  7. Linux服务器下安装Composer 并使用Composer安装Thinkphp5.0

    Composer官方文档:https://docs.phpcomposer.com/00-intro.htmlComposer是一个php的包管理器.要求php版本在5.3以上. 一.安装Compos ...

  8. 常见大中型网络WLAN基本业务实例

    组网图形 大中型WLAN网络简介 本文介绍的WLAN网络是指利用频率为2.4GHz或5GHz的射频信号作为传输介质的无线局域网,相对于有线网络的铺设成本高,不便于网络调整和扩展.位置固定,移动性差等缺 ...

  9. 【JavaWeb】HTML&CSS 基础

    HTML&CSS 基础 HTML 基础 HTML 标签 HTML标题:HTML 标题(Heading)是通过 h1 - h6 等标签进行定义的. HTML段落: HTML 段落是通过 p 标签 ...

  10. oracle 11g 安装与卸载

    安装 点击是,这是位数不一致,但可用. 桌面类――这种安装方式一般适用于台式机和笔记本.它包含一个最小数据库和最低的配置需求. 服务器类――这种安装方式适用于服务器,例如,它会向您提供数据中心和用于支 ...