[HTML5之APP实战]基于ionic开发的一款KTV移动应用

这里写图片描述

摘要

前期一直介绍web 移动开发的一些基本知识,而没有给大家演示过一个项目,今天给大家给大家详细介绍一下如何利用HTML5来完成一个移动APP应用.在正式介绍前,希望大家能搞明白以下几个问题.

请大家思考以下几个问题?

问题一 HTML5中用于移动开发框架有哪些?
问题二 现在流行的框架是什么,优势?
问题三 在企业实际项目中,用的最多移动网页框架是什么?
问题四 如何有效利用框架来快速写移动页面或APP?
问题五 利用该框架开发出来的APP性能到底如何?
问题六 开发出来的web APP如何上线

(注意:只有弄清楚了上面几个问题,整体去把控,才能在最短的时间内来开发出我们想要的东西出来.)

具体说明

下面就上面几个问题进行说明,让大家多多了解,有说的不对的地方,希望大家多多包涵指正,相互学习,一起进步.

问题一 HTML5中用于移动开发常用的比较好用的框架有哪些?

这个问题我在之前的几篇文章已经详细说明了,大家可以回过头去看看.

企业HTML5前端开发最需要的技能及技术难点分析
这里写图片描述

用于HTML5移动开发的几大移动APP开发框架

上面是之前关于移动框架的一个总结.
下面流行的框架给大家说明一下.

问题二现在流行的框架是什么,优势?

目前主要前端流行的框架主要:

1. angular框架

2. vue框架

3. react框架

4. ant-design框架

5. ionic框架

1. angular框架

1.1 框架:

angular是个MVVM的框架

1.2 运用场景

angular的最主要的场景就是单页应用，或是有大量数据绑定的情况。

1.3 特点

Angular的数据观测采用的是脏检查（dirty checking）机制。

每一个指令都会有一个对应的用来观测数据的对象，叫做watcher；

一个作用域中会有很多个watcher。

每当界面需要更新时，Angular会遍历当前作用域里的所有watcher，对它们一一求值，然后和之前保存的旧值进行比较。

2. vue框架

2.1 框架:

Vue.js采用的则是基于依赖收集的观测机制。从原理上来说，和老牌MVVM框架Knockout是一样的。

2.2 运用场景

应用的场景比较广，只想用vue功能的话就用

2.3 特点

与Angular不同的是，Vue.js的API里并没有繁杂的module、controller、scope、factory、service等概念，一切都是以“ViewModel 实例”为基本单位.

2.4 基本原理

将原生的数据改造成 “可观察对象”。一个可观察对象可以被取值，也可以被赋值。

在watcher的求值过程中，每一个被取值的可观察对象都会将当前的watcher注册为自己的一个订阅者，并成为当前watcher的一个依赖。

当一个被依赖的可观察对象被赋值时，它会通知所有订阅自己的watcher重新求值，并触发相应的更新。

依赖收集的优点在于可以精确、主动地追踪数据的变化，不存在上述提到的脏检查的两个问题。

3. react框架

4. ant-design框架

5. ionic框架

这三个框架就不介绍了,之前已经说过了.大家可以之前的文章看看.
下面我们来看看用ionic来做一移动APP.

下面我们来看看用ionic来做一移动APP的效果

代码片段

/*倒计时*/
    function mytime(){
        var D1 = new Date();
        var D2 = new Date(2016,5,12);
        var time = document.getElementById("ti");
        var dis = D2.getTime()-D1.getTime();
        var ds = Math.floor(dis/1000);
        var dd=Math.floor(ds/(60*60*24)); 
        var dh=Math.floor((ds-(dd*60*60*24))/(60*60));
        var dm=Math.floor((ds-(dd*60*60*24)-(dh*60*60))/60);
        var dS=ds-(dd*60*60*24)-(dh*60*60)-(dm*60);
            time.innerHTML=dh+":"+dm+":"+dS+"";
        }
    setInterval(function(){mytime()},1000);
    /*滚动*/
    $(function(){
    scroll({dom:".con_news",inter:2000,time:500,num:1})
    function scroll(opt){
        var ul = $(opt.dom+" .ul");
        var inter = opt.inter;
        var time = opt.time;
        var num = opt.num;
        var dis = ul.children("li").outerHeight()*num;
        var stopId;
        auto();
        bindDom();

        function animated(){
            ul.animate({"margin-top":24*-1},time,resetIn)
        }
        function resetIn(){
            var first = $(opt.dom+" .ul>li:lt("+num+")");
            ul.append(first);
            ul.css("margin-top",0);
        }
        function auto(){
            stopId = setInterval(function(){
                animated();
            },inter)
        }
        function bindDom(){
            $(opt.dom).hover(function(){
                clearInterval(stopId);
            },function(){
                auto();
            })
        }
    }
})

代码片段

<script type="text/javascript">
            $(function(){
                $(".lasthide").hide();
                $(".other a").click(function(){
                    if($(".other a").html()=="查看其他1个团购"){
                        $(".other a").html("没有更多了");
                    }else{
                        $(".other a").html("查看其他1个团购");
                    }
                    $(".lasthide").toggle();

                })
            })
        </script>

代码片段

........
$(".disc").click(function(){
                    $(".discshow").slideToggle();
                    $(".disc").toggleClass("ro");
                    $(".disc a").toggleClass("purper");
                    $(".nearshow").hide();
                    $(".near").removeClass("rotate");
                    $(".near a").removeClass("roya");
                })
                $(".discshow li").click(function(){
                    var ind = $(".discshow li").index($(this));
                    $(".discshow li.active").removeClass("active");
                    $(".discshow li:eq("+ind+")").addClass("active");
                })
........

代码片段

.......
var app = angular.module("myapp",["ionic"])
        .controller("myctrl",function($scope){

            $scope.onright = function(){
                $(".meal_cont").show();
                $(".meal_title li:eq(1)").removeClass("active");
                $(".meal_title li:eq(0)").addClass("active");
                $(".meal_tip").hide();
            }
            $scope.onleft = function(){
                $(".meal_title li:eq(0)").removeClass("active");
                $(".meal_title li:eq(1)").addClass("active");
                $(".meal_cont").hide();
                $(".meal_tip").show();

            }
        })
        .......

代码片段

<style>
        body{font-family: "Microsoft YaHei";background-color: #f2f2f2;}
        a{text-decoration: none;}
            .bar-linear{background: linear-gradient(to right,#E44BF1,#8225A7)}
            #header{line-height: 44px;color: #fff;font-size: 15px;padding: 0 15px;color: #fff;}
            #header .back{font-size:26px;}
            #header .title{color: #fff;font-size: 17px;font-family: "Microsoft YaHei";}
            .content{padding-bottom: 50px;}
            .item-thumbnail-left > img:first-child{left: 15px;}
            .list h3{font-weight: normal;color: #333;font-size: 16px;margin-top: 7px;font-family: "Microsoft YaHei";}
            .list h3 .item-note{color: #999;font-size: 13px;}
            .list p{color: #666;font-weight: normal;margin-top: 9px;}
            .list .item{border-color: #fff;}
            .list .item a{display: block;}
            .list{border-bottom: 1px solid #e0e0e0;}
        </style>

关键代码

        <style>
        body{font-family: "Microsoft YaHei";background-color: #f2f2f2;}
        a{text-decoration: none;}
        h3,.button{font-family: "微软雅黑";}
        .fl{float: left;}
        .fr{float: right;}
        .bar-linear{background: linear-gradient(to right,#E44BF1,#8225A7)}
        #header{line-height: 44px;color: #fff;font-size: 15px;padding: 0 10px 0 16px;color: #fff;}
        #header .back{font-size:25px;}
        #header a{color: #fff;}
        #header .title{color: #fff;font-size: 17px;font-family: "Microsoft YaHei";}
        /*content*/

        .date{color: #666;height: 37px;line-height: 37px;font-size: 15px;text-align: center;}
        .chatDetail{width: 100%;height: auto;padding-left: 16px;padding-right: 16px;}
        .chatDetail .chat{height: 51px;width: 100%;float: right;}
        .chat img{width: 51px;height: auto;}
        .chat div{position: relative;}
        .chat1{position: relative;left: 0;top: 0;width: 100%;height: auto;margin-top: 15px;}
        .chat1 img{width: 51px;height: auto;}
        .chatcon{background-color: #ccc;border-radius: 4px;padding: 7px;position: relative;color: #333;}
        .chaC{position: absolute;right: 65px;top: 7px;}
        .chaC:before{content: "";display: inline-block;width: 0;height: 0;border: 5px solid transparent;border-left-color: #ccc;position: absolute;top: 41%;right: -10px;z-index: 60;}
        .chat1 .chaT{position: absolute;left: 65px;top: 7px;}
        .chat1 .chaT:before{content: "";display: inline-block;width: 0;height: 0;border: 5px solid transparent;border-right-color: #ccc;position: absolute;top: 41%;left: -10px;z-index: 60;}
        /*footer*/
        .footer{padding-left: 16px;padding-right: 16px;}
        .footer label,.footer input{background-color: #ccc;}
        .footer .icon{font-size: 27px;color: #cecece;margin-right: 12px;margin-top: 3px;}
        .footer .button{background:#663399;color: #fff;}
        </style>

问题六开发出来的web APP如何上线

这个主要用到的是APICloud第三方平台,只要具备iOS开发者账号或谷歌开发者账号,我们把代码提交上去,就可以打包成相应APP应用程序.大家可以尝试一下.

结束

相应的项目代码,大家可以关注我的公众号号,上面有相关github下载地址.

微信公众号

个人微信

这里写图片描述

作者：BaiHuaXiu123 发表于2016/9/14 1:12:41 原文链接

阅读：117 评论：0 查看评论

摘要

请大家思考以下几个问题?

具体说明

问题一 HTML5中用于移动开发常用的比较好用的框架有哪些?

问题二 现在流行的框架是什么,优势?

1. angular框架

2. vue框架

3. react框架

4. ant-design框架

5. ionic框架

1. angular框架

1.1 框架:

1.2 运用场景

1.3 特点

2. vue框架

2.1 框架:

2.2 运用场景

2.3 特点

2.4 基本原理

3. react框架

4. ant-design框架

5. ionic框架

下面我们来看看用ionic来做一移动APP的效果

代码片段

代码片段

代码片段

代码片段

代码片段

关键代码

问题六 开发出来的web APP如何上线

结束

微信公众号

个人微信

Trending Articles

问题二现在流行的框架是什么,优势?

问题六开发出来的web APP如何上线