H5APP开发封装流程

news2024/11/25 18:37:58

1.利用H5写想要的功能
2.打包APP
3.手机安装

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>counter</title>
    <script type="text/javascript">

           document.addEventListener('plusready', function(){
               //console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"

           });

    </script>
    <style type="text/css">
        html,body{
            height: 100%;
            overflow: hidden;
        }
        div {
            box-sizing: border-box;
            text-align: center;
            font: 26px/30px "微软雅黑","sans-serif";
        }
        #main{
            height: 100%;
            border:1px solid gold;
        }
        #run{
            height: 20%;
            border:1px solid gold;
        }
        .c3 {
            float: left;
            width: 25%;
            height: 16%;
            border:1px solid gold;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .c6 {
            width: 50%;
            height: 16%;
            float: left;
            border:1px solid gold;

            display: flex;
            justify-content: center;
            align-items: center;
        }
        .bt{
            background: orange;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="run"></div>
        <div class="c3">C</div>
        <div class="c3">+/-</div>
        <div class="c3">back</div>
        <div class="c3 bt">/</div>
        <div class="c3">7</div>
        <div class="c3">8</div>
        <div class="c3">9</div>
        <div class="c3 bt">*</div>
        <div class="c3">1</div>
        <div class="c3">2</div>
        <div class="c3">3</div>
        <div class="c3 bt">+</div>
        <div class="c3">4</div>
        <div class="c3">5</div>
        <div class="c3">6</div>
        <div class="c3 bt">-</div>
        <div class="c6">0</div>
        <div class="c3"></div>
        <div class="c3 bt">=</div>
    </div>
    <script type="text/javascript">
        var main = document.getElementById("main");
        var run = document.getElementById("run");
        main.addEventListener("touchstart",function(ev){
            var el = ev.target;

            if(el.className.indexOf("c") != 0){
                return;
            }

            if(el.innerHTML == "C"){
                run.innerHTML = "";
            }else if (el.innerHTML == "back") {
                //回删一个字符
                run.innerHTML = run.innerHTML.slice(0,-1);
            }else if(el.innerHTML == "="){
                //运算
                run.innerHTML = eval(run.innerHTML);
            }else{
                run.innerHTML += el.innerHTML;
            }
        });
    </script>
</body>
</html>