给老爸的电工小助手-基于H5的安卓webapp开发记录

139 阅读3分钟

我正在参加「创意开发 投稿大赛」详情请看:掘金创意开发大赛来了!

  • 这个是真的用程序帮助了家人,老爸是一个电工,经常在装配电箱时需要计算电箱的功率,电线配比,好给客户快速准确的报价。无奈他老人家太懒,每次都喊我帮忙算一下。(有电危险,需要持证作业喔!低压电工证)

  • 不忙还好,有时忙起来我也不方便,沟通中的知道主要是由于一个电箱往往需要算很多用线的方式,需要开根号啊等,计算器算起来麻烦,而且很多场合都不一定有纸币。OK,安排!

  • 系统环境 基于H5,JavaScript

  • 先说思路 思路很简单,直接用html和js就可以搞定了,毕竟只是几个简单的计算,然后通过web打包工具发送app给他就好了。唯一麻烦的就是他经常换手机,每次都要发一个apk给他。其实最开始是在自己的网站上给他挂了一个二级域名的,后来他对浏览器理解不够,还是认为app更适合他。所以才有了打包的说法。

image.png

  • 界面主要配置 界面很简单两个下拉选择框,两个输入框,以及计算公式和口诀,通过下拉框选择不同的电线横切面和电压计算出理论功率和推荐功率。以及速算口诀表。
  • 代码 应为是5年前的代码了,所以还是jQuery+bootstrap,如果部署到外网可以采用cdn减少自己服务器的资源。虽然资源不多,但是思路要有!
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <link href="bootstrap.css" rel="stylesheet">
    <script type="text/javascript" src="bootstrap.min.js"></script>
    <script type="text/javascript" src="jquery-1.10.2.js"></script>
    <title>小助手</title>
</head>
<body> 
    <div style="margin:18px">
        <form class="form-horizontal">
            <div class="form-group form-group-lg">
                <label class="col-sm-2 control-label" for="formGroupInputLarge">电线截面规格(mm)</label>
                <div class="col-sm-5">
                    <select id="wiresize" type="text" class="form-control" placeholder=".col-xs-2">
                        <option value="18">1.5(电流18A)</option>
                        <option value="25">2.5(电流25A)</option>
                        <option value="33">4(电流33A)</option>
                        <option value="41">6(电流41A)</option>
                        <option value="57">10(电流57A)</option>
                        <option value="76">16(电流76A)</option>
                        <option value="98">25(电流98A)</option>
                        <option value="115">35(电流115A)</option>
                        <option value="145">50(电流145A)</option>
                        <option value="180">70(电流180A)</option>
                        <option value="225">95(电流225A)</option>
                        <option value="260">120(电流260A)</option>
                        <option value="300">150(电流300A)</option>
                        <option value="345">185(电流345A)</option>
                        <option value="410">240(电流410A)</option>
                        <option value="475">300(电流475A)</option>
                    </select>
                </div>
            </div>
            <div class="form-group form-group-lg">
                <label class="col-sm-2 control-label" for="formGroupInputSmall">电压(V)</label>
                <div class="col-sm-5">
                    <select id="voltage" type="text" class="form-control" placeholder=".col-xs-2">
                        <option value="220">220V</option>
                        <option value="110">110V</option>
                        <option value="380">380V</option>
                        <option value="381">380V(3相)</option>
                    </select>
                </div>
            </div>
            <div class="form-group form-group-lg">
                <div class="col-sm-5">
                    <button type="button" class="btn btn-primary" onclick="Cal()">计算</button>
                </div>
            </div>
            <div class="form-group form-group-lg">
                <label class="col-sm-2 control-label" for="formGroupInputSmall">理论最大负载功率(w)</label>
                <div class="col-sm-5">
                    <input id="power" type="text" class="form-control">
                </div>
            </div>
            <div class="form-group form-group-lg">
                <label class="col-sm-2 control-label" for="formGroupInputSmall">推荐负载载功率(w)</label>
                <div class="col-sm-5">
                    <input id="power08" type="text" class="form-control">
                </div>
            </div>
            <div>
                <label class="col-sm-2 control-label" for="formGroupInputSmall">
                    家用: 功率(P)=电压(U)*电流(I,根据口诀算)*0.8(功率因素)
                </label>
                <label class="col-sm-2 control-label" for="formGroupInputSmall">
                    3相: 功率(P)=电压(U)*电流(I,根据口诀算)*0.8(功率因素)*1.732
                </label>
            </div>
            <hr>
            <div>
                <label class="col-sm-2 control-label" for="formGroupInputSmall">
                    10下五,100上二,
                    25、35,四、三界,
                    70、95,两倍半。
                    穿管、温度,八、九折。
                    裸线加一半。
                    铜线升级算。
                </label>
            </div>
            <hr>
            <div>
                <label class="col-sm-2 control-label" for="formGroupInputSmall">
                    电线规格: 1、1.5、 2.5、 4、 6、 10、 16、 25、 35、 50、 70、 95、 120、 150、 185
                </label>
            </div>
        </form>
    </div>
</body>
</html>
<script type="text/javascript">

    function Cal() {
       
        var _wiresize = $("#wiresize").val();
        var _voltage = $("#voltage").val();
        if (_voltage==381) {
            var _power = _wiresize * _voltage;
            $("#power").val(_power);
            var _power08 = _wiresize * _voltage * 0.8*1.732;
            $("#power08").val(_power08);
        }
        else
        {
            var _power = _wiresize * _voltage;
            $("#power").val(_power);
            var _power08 = _wiresize * _voltage * 0.8;
            $("#power08").val(_power08);

        }
       //var _power = _wiresize * _voltage;
       //$("#power").val(_power);
       //var _power08 = _wiresize * _voltage*0.8;
       //$("#power08").val(_power08);
    }

</script>

  • 在本地通过nginx发布在使用内网穿透工具,获取程序的web页面的url,为了后续可以在线打包编译。 也可以使用hbuilder开发工具本地打包(应该本地打包过一次)
  • 云打包我用的apicloud打包的。
  • 注册账号,选择新建一个web app,填入url image.png
  • 选择对应的手机系统,取一个名字,点击云打包即可下载一个apk安装文件了

image.png

  • 后记
    真实用户应该还是有那么几十个吧,这个是当时在线打包的app的运行情况,过了很短的时间,云服务就到期了,后来用hbuilder打包过一次,应为云服务器到期了,所以选择了本地打包。

image.png