MUI+Htmlplus开发APP实现页面之间传值

为了保持每个界面之间的数据通讯和相关联性,页面之间传值是开发hybrid app常见的一个问题。怎么实现页面之间数据交互呢?我试过两种方法:

  1. 利用缓存
  2. mui页面的extras参数

利用缓存实现页面之间传值

利用缓存实现页面之间传值比较常见的方法,不管是Dcloud还是平常的web开发中,都可以将数据保存在缓存中。
下面这个例子是在b.html中输出a.html的数据

//a.html
var username="张三";
var age=21;
localStorage.setItem("username",username);
localStorage.setItem("age",age);
//b.html
console.log("姓名:"+localStorage.getItem("username"));
console.log("年龄:"+localStorage.getItem("age"));
//b.html控制台:
姓名:张三
年龄:21

利用mui+HTMLplus实现页面之间传值

Dcloud为我们提供另一种实现页面之间传值的方法,特别是当我们用Dcloud开发涉及到webview时,利用mui和htmlplus实现页面之间传值就更高效了。
在Dcloud中创建和跳转到一个页面

//创建一个页面
mui.init({
    subpages:[{
      url:your-subpage-url,//子页面HTML地址,支持本地地址和网络地址
      id:your-subpage-id,//子页面标志
      styles:{},
      extras:{}//额外扩展参数
    }]
  });
//跳转到一个页面
mui.openWindow({
    url:new-page-url,
    id:new-page-id,
    styles:{},
    extras:{//自定义扩展参数,可以用来处理页面间传值},
    createNew:false,//是否重复创建同样id的webview,默认为false:不重复创建,直接显示
    show:{},
    waiting:{}
    }
})

不管是跳转还是新建一个新页面都有一个参数extras。这个参数保存的就是你要传给新页面的数据,然后我们可以在新页面中通过获得WebviewObject直接获取传输的数据。

//a.html
mui.openWindow({
    url:'b.html',
    id:'b',
    extras:{
    abc:"hello world"//传递的数据            
     }
});
//b.html
var wv=plus.webview.currentWebview();//获取当前窗口的WebviewObject对象
console.log(wv.abc);
//b.html控制台:
hello world
  • 4
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值