【Android H5移动开发】MUI框架的试用

最新推荐文章于 2024-04-21 02:57:35 发布

番茄发烧了

最新推荐文章于 2024-04-21 02:57:35 发布

阅读量2.4k

点赞数

分类专栏： Android移动开发 H5 文章标签： android html5

本文链接：https://blog.csdn.net/bless2015/article/details/52683521

版权

Android移动开发同时被 2 个专栏收录

49 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

MUI是移动设备上的H5框架，可以用来写Android和IOS上的app。
下载HBuilder
文件->新建->移动App
这里写图片描述

选择MUI项目
这里写图片描述

建立一个包含子界面的程序

<!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" />
        <script type="text/javascript" charset="utf-8">
            mui.init({
                subpages: [{
                    url: 'list.html',
                    id: 'list.html',
                    styles: {
                        top: '145px', //mui标题栏默认高度为45px；
                        bottom: '0px' //默认为0px，可不定义；
                    }
                }]
            });
        </script>
    </head>

    <body>
        <button onclick="info">点击</button>
    </body>

</html>

PS…可以应用快捷输入：misubpage，代码就自动提示了。
其中styles里的top标签，是说明子窗口距离口顶端的距离为145px

新建list.html

<!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" />
        <script type="text/javascript" charset="utf-8">
            mui.init();
        </script>
    </head>

    <body>
                <div class="mui-content">
            <ul class="mui-table-view" id="my_task_list">
                <li class="mui-table-view-cell">
                    <div class="mui-slider-right mui-disabled">
                        <a class="mui-btn mui-btn-red">删除</a>
                    </div>
                    <div class="mui-slider-handle">
                        待办事项1
                    </div>
                </li>
                <li class="mui-table-view-cell">
                    <div class="mui-slider-right mui-disabled">
                        <a class="mui-btn mui-btn-red">删除</a>
                    </div>
                    <div class="mui-slider-handle">
                        待办事项2
                    </div>
                </li>

            </ul>
        </div>
    </body>

</html>