H5小程序的初体验

时间：2019-04-21 16:03:33 阅读：171 评论：0 收藏：0 [点我收藏+]

标签：邮件效果 lap 布局 close media cell tin toast

通常主体代码块会放在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页面后，在点击邮箱能实现效果

技术图片

H5小程序的初体验

标签：邮件效果 lap 布局 close media cell tin toast

原文地址：https://www.cnblogs.com/wen-kang/p/10745423.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行