MUI----号称“最接近原生APP体验的高性能前端框架”
需要工具:Hbuilder+手机模拟器(我们使用的是夜神模拟器)+后台程序接口(python-flask)
文档为中文,大家可在使用中及时查看文档。http://dev.dcloud.net.cn/mui/ui/
注意点:
1.默认index页面的id为“Hbuilder”,此是最特殊的一个id,切记!!!
2.document.addEventListener("show_alert",function(data){
var s=plus.webview.currentWebview(); #获取当前页面的所有对象
console.log(JSON.stringify(s)); #需要使用JSON.stringify()来处理对象,使之成为字符串
alert(data.detail.username); #使用“.fire方法”,要获取页面内数据,必须先“.detail”
})
1 <!doctype html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8" /> 6 <title>Document</title> 7 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 8 <link rel="stylesheet" type="text/css" href="css/mui.css" /> 9 </head> 10 11 <body> 12 <header class="mui-bar mui-bar-nav"> 13 <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> 14 <h1 class="mui-title">用户信息</h1> 15 </header> 16 <div class="mui-content"> 17 <ul class="mui-table-view"> 18 <li class="mui-table-view-cell"> 19 <a class="mui-navigate-right" id="username"> 20 Item 1 21 </a> 22 </li> 23 </ul> 24 </div> 25 <script src="js/mui.js" type="text/javascript" charset="utf-8"></script> 26 <script type="text/javascript"> 27 mui.init(); 28 var sdata = null; 29 mui.plusReady(function() { 30 sdata = plus.webview.currentWebview(); 31 console.log(JSON.stringify(sdata)); 32 document.getElementById("username").innerText = sdata.name 33 }); 34 document.getElementById("username").addEventListener("tap", function() { 35 var new_webview = plus.webview.getWebviewById("Hbuilder") #此处的plus不在plusReady()中,直接运行会报错,加入34行,使得plusReady()受“username”事件影响而加载为全局变量,进而可在各处调用,不再报错。
36 mui.fire(new_webview, "show_alert", {username: sdata.name}); 37 }) 38 </script> 39 </body> 40 41 </html>
页面间传值:mui.fire(),上程序块36行方法。
接受:另一个页面内
document.addEventListener("show_alert",function(data){
var s=plus.webview.currentWebview();
console.log(JSON.stringify(s));
alert(data.detail.username);