MUI框架页面间的传值指针

把时髦的技术挂在嘴边，不如把过时的技术记在心里。

今天我们说的是关于MUI，一个封装了Html5+的框架间页面传值问题

一，在html里最普遍的传值就是a标签跨页面传值，但是在html5+的mui框架里会出现不起作用的问题。

    当然官方也提出跨页面的方法，传值的方法也有如下几种：

 1，通过在父页面写openWindow()方法来跳转页面并传值，如图：

   第一：先在html页面绑定该接口解析的属性值

  第二：在js里获取绑定的属性值，并用openWindow()方法来跳转页面并传值

mui("body").on('tap','.pet_list_one_bt a',function(){
//获取属性值
var username=this.getAttribute("name");
var id=this.getAttribute("id");
mui.openWindow({
id:'ContentDetails.html',  //路径id
url:'ContentDetails.html?id='+id+"&name="+username,  //路径地址
extras:{}  //可为空
})
})

第三：在子界面用split拆分，获取数据即可，代码如下:

//通过地址？号传值
var url = decodeURI(window.location.href.split("?")[1]);
var id = url.split("id=")[1].split("&")[0];
var name = url.split("name=")[1].split("&")[0];
if (id != 0 && name != null) {
//alert(id);
mui.get('http://m.tnblog.net/xx/yy/zzzz/' + name + '/' + id, {
category: 'news'
}, function(data) {
                         
}, 'json');
}

2，也是通过在父页面写openWindow()方法来跳转页面并传值，但是稍微有点不同，如下：

  第一：在父页面写openWindow()方法来跳转页面，如图；

mui.openWindow({
    url: "info.html",//要跳转的页面
    id: "info.html",//路径id
    
    extras:{    //拓展参数，也就是我们要传的的值
    name:"username",
    id:"id"
    }
    })

第二：在子页面用plusReady函数获取值：

mui.plusReady(function() {
     //获取父页面webview传递的对象
     var self = plus.webview.currentWebview();
 
     //参数
     alert(self.name);
     alert(self.id);
 })

3，通过本地储存传值（localStorage）：

  第一：父页面存值：

//这个方法类似于键值对存取值一样，前者为Key，后者为Value
 localStorage.setItem('username', 'admin');
 localStorage.setItem('id', '8632');

第二：子页面通过key取值：

var name = localStorage.getItem('username');
var id = localStorage.getItem('id');

【注意：使用方法2，方法3 在本地浏览器调试使用的时候可能会出现值为空或没有效果的情况，不过方法是没问题的，在这里建议使用真机状态下调试】

希望本次分享对阅读的程序猿们有所帮助。