前端开发 5+APP基础_页面间传值

千峰前端开发视频教程|移动前端开发就业前景|移动平台3g手机网站前端开发布局技巧汇总
在使用5+APP和mui开发项目时,遇到很多问题,感谢dcloud热情为我解答的各位佬大们,今天算是我少少总结,回报大家!
页面间传值总共有5种方式
一、子窗口传值
作用:父窗口在加载子窗口时,根据业务逻辑,需要把数据传给子窗口
分类:其中有2种方法,(其实底层实现都是一样的,只不过写法不同而已)
//方式一:
mui.init({
subpages:[{
url:your-subpage-url,//子页面html地址,支持本地地址和网络地址
id:your-subpage-id,//子页面标志
styles:{
top:subpage-top-position,//子页面顶部位置
bottom:subpage-bottom-position,//子页面底部位置
width:subpage-width,//子页面宽度,默认为100%
height:subpage-height,//子页面高度,默认为100%
},
extras:{}//额外扩展参数
}]
});
//方式二:
mui.plusReady(function(){
var parentPage = plus.webview.currentWebview();
var subPage = plus.webview.create(‘url’, ‘id’, {styles}, {extras});
parentPage .append(subPage);
});
[color=Red]#####注意[/color]:
1、在[color=RoyalBlue]方式一[/color]中,如果传给子窗口的数据是来自于父窗口接收其他窗口传来的参数时,必须把mui.init()方法放在mui.plusReady()里面。所以此情况下推荐使用[color=RoyalBlue]方式二[/color]
2、此种传值所能传的数据类型是任意js类型
二、新窗口传值
作用:打开新窗口(新页面)时,根据业务逻辑,需要把数据传递给新窗口(新页面)
mui.openWindow({
url:new-page-url,
id:new-page-id,
styles:{
top:newpage-top-position,//新页面顶部位置
bottom:newage-bottom-position,//新页面顶部位置
width:newpage-width,//新页面宽度,默认为100%
height:newpage-height,//新页面高度,默认为100%
……
},
extras:{
…..//自定义扩展参数,可以用来处理页面间传值
}
show:{
autoShow:true,//页面loaded事件发生后自动显示,默认为true
aniShow:animationType,//页面显示动画,默认为”slide-in-right“;
duration:animationTime//页面动画持续时间,Android平台默认100毫秒,iOS平台默认200毫秒;
},
waiting:{
autoShow:true,//自动显示等待框,默认为true
title:’正在加载…’,//等待对话框上显示的提示内容
options:{
width:waiting-dialog-widht,//等待框背景区域宽度,默认根据内容自动计算合适宽度
height:waiting-dialog-height,//等待框背景区域高度,默认根据内容自动计算合适高度
……
}
}
});
三、预加载窗口传值
作用:预先加载将要打开的新窗口(新页面)时,根据业务逻辑,需要把数据传递给预先加载的新窗口(新页面)
分类:其中有2种方法,(其实底层实现都是一样的,只不过写法不同而已)
//方式一:通过mui.init方法中的preloadPages参数进行配置
mui.init({
preloadPages:[
{
url:prelaod-page-url,
id:preload-page-id,
styles:{},//窗口参数
extras:{},//自定义扩展参数
subpages:[{},{}]//预加载页面的子页面
}
]
});
//方式二:通过mui.preload方法预加载.
var page = mui.preload({
url:new-page-url,
id:new-page-id,//默认使用当前页面的url作为id
styles:{},//窗口参数
extras:{}//自定义扩展参数
});
[color=Red]#####注意[/color]:
1、在[color=RoyalBlue]方式一[/color]中,可预加载多个页面,但不会返回预加载每个页面的引用,若要获得对应webview引用,还需要通过plus.webview.getWebviewById()方式获得;另外,因为mui.init是异步执行,执行完mui.init方法后立即获得对应webview引用,可能会失败!(简单说就是获取预加载页面引用不确定,因此不推荐使用[color=RoyalBlue]方式一[/color])
2、在[color=RoyalBlue]方式二[/color]中,可立即返回对应webview的引用,但一次仅能预加载一个页面;若需加载多个webview,则需多次调用mui.preload()方法
3、当在预加载新窗口过程中,[color=Red]无法确定所要传的值[/color]时,无论使用哪种方式预加载传值,都无法实现传值,这就是预加载页面传值的限制,但后面所介绍的2种传值方式能解决这种情况
4、此种传值所能传的数据类型是任意js类型
四、使用evalJS()方法传值
作用:evalJS()是5+App提供的一个api方法,只要获取到已存在的窗口引用,就可以使用evalJS()方法来执行该窗口中已定义的方法来传值
优势:对比之前3种传值方式,此方式用途更广,限制更少,只要获取已存在的窗口引用,就可以传值,并且是上面预加载方式限制的一种解决方法
缺点:所能传的数据类型只能是:数值型、字符串型、布尔型,[color=Red]无法传Obj类型[/color]([color=Red]其实并非不能传obj,而是要使用JSON.stringify(obj)把obj转成json格式的字符串,传过去,接收的并非是字符串,而是obj哦!这一点很重要[/color])
/
应用场景:A页面传值—>B页面
页面A的代码
/
mui.plusReady(function(){
var b = plus.webview.getWebviewById(‘b’);
var num = 1;
var obj = { num:1,bool:true };
var str = ‘ss’;
var bool = true;
//当你要打开B页面时,调用以下代码
b.evalJS(‘receiveData(‘+num+’)’);//传递数字
b.evalJS(‘receiveData(“‘+str+'”)’);//传递字符串
b.evalJS(‘receiveData(‘+bool+’)’);//传递布尔值
b.evalJS(‘receiveData(“‘+JSON.stringify(obj)+'”)’);//传递对象的字符串
});
//页面B的代码
function receiveData(data){
alert(data);
}
五、使用自定义事件传值
作用:通过事件绑定和事件触发,来实现页面间传值,和第四种方式类似,前提是要获取传值的目标页面引用
好处:相比第四种方式,使用自定义事件传值,所传数据类型没有限制,可以任意js数据类型,书写代码上更加清晰明了,[color=Red]所以建议一般传值都使用此方法(比第四种好,通用性最好)[/color]
缺点:暂时没有发现
/
应用场景:A页面传值—>B页面
页面A的代码(触发自定义事件)
/
mui.fire(targetPage,’customEvent’,{
//自定义事件参数
id:userid,
name:username,
…..
});
//B页面的代码(绑定自定义事件)
window.addEventListener(‘customEvent’,function(event){
//通过event.detail可获得传递过来的参数内容
var id = event.detail.id;
var name = event.detail.name;
……
});
微信服务号开发前端框架|web前端开发案例教程|移动端前端开发需要学哪些技术
» 本文来自:前端开发者 » 《前端开发 5+APP基础_页面间传值》
» 本文链接地址:https://www.rokub.com/5049.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!