• Javascript-mui&html5+相关


    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);

     

      

  • 相关阅读:
    qt截取屏幕
    使用XmlTextReader 读取XML
    QQ2010 SP2 美化 皮肤 修改 透明 托盘 图标 RES.RDB 解包 打包 去广告 显IP
    发一个linux串口监视工具
    linux打包压缩命令汇总
    Qt实现遍历文件夹和文件目录(递归)
    linux忘记root密码的恢复方法
    centos x8664位版本 想安装qq for linux
    删除所有的.svn文件夹
    qtsdk1.2.1 静态编译
  • 原文地址:https://www.cnblogs.com/wdbgqq/p/10041224.html
Copyright © 2020-2023  润新知