zoukankan      html  css  js  c++  java

  • H5小程序的初体验

    通常主体代码块会放在body里，在body里在区分一下标题和主体。

    <!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title></title>
        <script src="js/mui.min.js"></script>
        <link href="css/mui.min.css" rel="stylesheet" />

    </head>

    <body>
        <header class="mui-bar mui-bar-nav">
            <h1 class="mui-title">新闻</h1>
        </header>
        <!--图片轮播-->
        <div class="mui-content">
            <div id="slider" class="mui-slider">
                <div class="mui-slider-group mui-slider-loop">
                    <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
                    <div class="mui-slider-item mui-slider-item-duplicate">
                        <a href="#">
                            <img src="http://placehold.it/400x300">
                        </a>
                    </div>
                    <!-- 第一张 -->
                    <div class="mui-slider-item">
                        <a href="#">
                            <img src="http://placehold.it/400x300">
                        </a>
                    </div>
                    <!-- 第二张 -->
                    <div class="mui-slider-item">
                        <a href="#">
                            <img src="http://placehold.it/400x300">
                        </a>
                    </div>
                    <!-- 第三张 -->
                    <div class="mui-slider-item">
                        <a href="#">
                            <img src="http://placehold.it/400x300">
                        </a>
                    </div>
                    <!-- 第四张 -->
                    <div class="mui-slider-item">
                        <a href="#">
                            <img src="http://placehold.it/400x300">
                        </a>
                    </div>
                    <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
                    <div class="mui-slider-item mui-slider-item-duplicate">
                        <a href="#">
                            <img src="http://placehold.it/400x300">
                        </a>
                    </div>
                </div>
                <div class="mui-slider-indicator">
                    <div class="mui-indicator mui-active"></div>
                    <div class="mui-indicator"></div>
                    <div class="mui-indicator"></div>
                    <div class="mui-indicator"></div>
                </div>
            </div>
        </div>
        <!--九宫格-->
        <ul class="mui-table-view mui-grid-view mui-grid-9">
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <a href="#">
                    <span class="mui-icon mui-icon-home"></span>
                    <div class="mui-media-body">Home</div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <a href="#">
                    <span class="mui-icon mui-icon-email"><span class="mui-badge mui-badge-red">5</span></span>
                    <div class="mui-media-body">Email</div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <a href="#">
                    <span class="mui-icon mui-icon-chatbubble"></span>
                    <div class="mui-media-body">Chat</div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <a href="#">
                    <span class="mui-icon mui-icon-location"></span>
                    <div class="mui-media-body">Location</div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <a href="#">
                    <span class="mui-icon mui-icon-search"></span>
                    <div class="mui-media-body">Search</div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <a href="#">
                    <span class="mui-icon mui-icon-phone"></span>
                    <div class="mui-media-body">Phone</div>
                </a>
            </li>
        </ul>
        <!--图文列表-->
        <ul class="mui-table-view">
            <li class="mui-table-view-cell mui-media">
                <a href="javascript:;">
                    <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
                    <div class="mui-media-body">
                        幸福
                        <p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
                    </div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media">
                <a href="javascript:;">
                    <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
                    <div class="mui-media-body">
                        木屋
                        <p class="mui-ellipsis">想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
                    </div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media">
                <a href="javascript:;">
                    <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
                    <div class="mui-media-body">
                        CBD
                        <p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
                    </div>
                </a>
            </li>
        </ul>
        <!--尾部选项卡-->
        <nav class="mui-bar mui-bar-tab">
            <a class="mui-tab-item mui-active" id="index">
                <span class="mui-icon mui-icon-home"></span>
                <span class="mui-tab-label">首页</span>
            </a>
            <a class="mui-tab-item">
                <span class="mui-icon mui-icon-phone"></span>
                <span class="mui-tab-label">电话</span>
            </a>
            <a class="mui-tab-item" id="email">
                <span class="mui-icon mui-icon-email"></span>
                <span class="mui-tab-label">邮件</span>
            </a>
            <a class="mui-tab-item" id="setting">
                <span class="mui-icon mui-icon-gear"></span>
                <span class="mui-tab-label">设置</span>
            </a>
        </nav>

        <script type="text/javascript" charset="utf-8">
            mui.init();
            mui.plusReady(function () {
                
            })
            document.getElementById('index').addEventListener('tap',function () {
                    mui.openWindow({
                        "url":"index.html",
                        "id":"index.html",
                    });
            })
            document.getElementById('setting').addEventListener('tap',function () {
                    mui.openWindow({
                        "url":"a.html",
                        "id":"a.html",
                        styles:{
                            top:"0px",
                            bottom:"50px"
                        },
                        extras:{
                            name:"666"
                        }
                    })
            })
            document.getElementById('email').addEventListener('tap',function () {
                    mui.toast('你点击了邮件')
                    var a_page = plus.webview.getWebviewById("a.html");
                    mui.fire(a_page,'show',{name:"kevin"})
            })
        </script>
    </body>

</html>
    index.html代码

    整体的页面布局效果为：标题-->轮播-->九宫格-->图文列表靠左-->尾部选项卡

    数据传输的重点在于js代码块中的逻辑处理。

    通过监听body中的标签id触发的事件来处理相关操作。

    比如在尾部选项卡中的设置标签里，添加其标签id为id="setting"

    <a class="mui-tab-item" id="setting">
                <span class="mui-icon mui-icon-gear"></span>
                <span class="mui-tab-label">设置</span>
            </a>

    在JavaScript中去监听这个标签属性的动作：

    document.getElementById('setting').addEventListener('tap',function () {
                    mui.openWindow({　　　　　　　　
                        "url":"a.html",
                        "id":"a.html",
                        styles:{
                            top:"0px",
                            bottom:"50px"
                        },
                        extras:{
                            name:"666"
                        }
                    })
            })

    此时若点击设置属性，会打开新的窗口。extras是将数据传递给这个新打开的窗口。

    会跳转至新页面：

    新跳转的页面a.html中的代码：

    <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
</head>
<body>
    <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">设置</h1>
    </header>
    <!--开关-->
    <div class="mui-content">
      <div class="mui-input-row">
          <label>声音显示</label>
          <div class="mui-switch mui-active mui-switch-blue">
              <div class="mui-switch-handle"></div>
          </div>
      </div>
    </div>
    <!--列表-->    
    <ul class="mui-table-view">
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">
                    Item 1
                </a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">
                     Item 2
                </a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">
                     Item 3
                </a>
            </li>
        </ul>
    
    <script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    mui.init()
    mui.plusReady(function () {
        var sdata=plus.webview.currentWebview();
        console.log(JSON.stringify(sdata));
//      console.log(sdata.name);
    })
    document.addEventListener("show",function(data){
        console.log(JSON.stringify(data.detail));
        alert("欢迎")
    })
    </script>
</body>
</html>
    a.html代码

    新页面接收index页面传递过来的数据：js中的代码

    mui.plusReady(function () {
        var sdata=plus.webview.currentWebview();
        console.log(JSON.stringify(sdata));
//      console.log(sdata.name);
    })

    *******************************************************************************

    实现事件的传递：在调用新页面获取id前，必须实例化一个plus方法，用于后文通过plus对象去找id

    mui.init();
    mui.plusReady(function () {
                
            })

    body中的元素添加ID

    <a class="mui-tab-item" id="email">
                <span class="mui-icon mui-icon-email"></span>
                <span class="mui-tab-label">邮件</span>
            </a>

    监听元素：

    document.getElementById('email').addEventListener('tap',function () {
                    mui.toast('你点击了邮件')
                    var a_page = plus.webview.getWebviewById("a.html");     //在index中获取新窗口的id 并作为一个新的对象
                    mui.fire(a_page,'show',{name:"kevin"})　　　　　　　　　　　//show是自定义的方法  后面字典中为数据
            })

    a.html页面接收index.html传递的show方法以及数据:

     document.addEventListener("show",function(data){
        console.log(JSON.stringify(data.detail));
        alert("欢迎")
    })

    在点击设置，创建了a.html页面后，在点击邮箱能实现效果

     值的传递与获取：

    document.getElementById('list1').addEventListener('tap',function () {
            mui.toast('你点击了列表')
            var f_page=plus.webview.getWebviewById("HBuilder")
            mui.fire(f_page,'spk',{song:"shenhua"})
    })

    取值：

    document.addEventListener("spk",function(data){
                console.log(data.detail.song);
            })
  • 相关阅读:
    Spring+Hibernate集成后事务与Session的一些理解。
    对Spring的一些个人理解
    centos5.8 x86_64安装oracle10g
    C#中MessageBox用法大全（附效果图）
    解决SQL Server管理器无法连接远程数据库的问题
    【sql2000数据库】Named Pipes Provider error 40
    用SQL数据库批量插入数据简介
    DBGridEH在Delphi7中的安装方法及使用说明
    sql server中datetime字段只取年月日如20060421,默认值如何设置？getdate()得到的是包含时分秒的时间。
    获取 Windows 窗体 DataGridView 控件中选定的单元格、行和列
  • 原文地址：https://www.cnblogs.com/wen-kang/p/10745423.html
Copyright © 2011-2022 走看看