H5小程序的初体验

其他 2019-04-21 16:04:48 阅读次数: 0

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

 

猜你喜欢

转载自www.cnblogs.com/wen-kang/p/10745423.html
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022