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

喜欢ヅ旅行 2022-06-15 07:48 208阅读 0赞

为了保持每个界面之间的数据通讯和相关联性，页面之间传值是开发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