码迷,mamicode.com
首页 > 移动开发 > 详细

imag.js|教你如何智做原生APP

时间:2016-08-17 18:04:58      阅读:308      评论:0      收藏:0      [点我收藏+]

标签:移动开发   imag.js   爱码哥      

手机计算器是我们日常中很熟悉并且使用起来非常简单的应用了,这样的应用在爱码哥平台中又该如何开发呢?

结合这个原型图和imag.js现有的布局控件大致有两种解决思路。

第一种:使用list列表布局

底部使用list列表标签进行布局,共4个item,每个item中有5列col,在col中加入文本标签label,也可以把label替换成button。共20列,每一列不用设置长度,会自动平均分配给每一个col。

结构图如下:

代码结构是(其余三个item复制就好):


<list>
	<item>
    	<col><label></label></col>
        <col><label></label></col>
        <col><label></label></col>
        <col><label></label></col>
        <col><label></label></col>
    </item>
</list>


这个结构相当于一个骨架,余下的就是编写内容了。

第二种:使用九宫格grid布局

底部使用网格布局控件grid,共20个item,每个item中有一个文本标签label。相对于第一种方法会更简单,代码量也少,可复制性强。

结构图如下:

代码结构(其余item也是复制即可):


<grid cols="5">
	<item><label></label></item>
        <item><label></label></item>
</grid>


Grid网格布局默认九宫格样式,每行自动匹配3个item,如果要求在3个以上,需要设置grid的cols属性。

布局确定了,下面整理逻辑部分

网上有很多Android和iOS计算器的源码,其中Android计算器源码需要加入onClick来实现按钮功能,又提供了按钮的监听事件。同样在imag.js也要onclick来实现点击的功能,但不需要监听事件,同时onclick作用的是grid列表中的item,不是按钮button。

js核心代码:


<script>
    <![CDATA[
        var num=0,result=0,numshow="0"; 
        var operate=0; //判断输入状态的标志 
        var calcul=0; //判断计算状态的标志 
        var quit=0; //防止重复按键的标志 
        var ScreenValue = $(’numScreen’).value;
        function refresh_Screen(){
            $(’numScreen’).value = ScreenValue;//刷新显示 
        }
        function command(num){ 
            var str=ScreenValue; //获得当前显示数据 
            if(str!=’0’&&operate==0){
                str = str;
            }else {
                str = ’’;
            }//如果当前值不是"0",且状态为0,则返回当前值,否则返回空值; 
            str=str + String(num);//给当前值追加字符 

            ScreenValue=str; 
            refresh_Screen();//刷新显示 
            operate=0; //重置输入状态 
            quit=0; //重置防止重复按键的标志 
        } 
        function dzero(){ 
            var str=ScreenValue; 
            if(str!=’0’&&operate==0){
                str = str + ’00’;
            }else {
                str = ’0’;
            }//如果当前值不是"0",且状态为0,则返回当str+"00",否则返回"0"; 
            ScreenValue=str; 
            refresh_Screen();
            operate=0; 
        } 
        function dot(){ 
            var str=ScreenValue; 
            if(str!=’0’&&operate==0){
                str = str;
            }else {
                str = ’0’;
            }//如果当前值不是"0",且状态为0,则返回当前值,否则返回"0"; 
            for(i=0; i<=str.length;i++){ //判断是否已经有一个点号 
                if(str.substr(i,1)==".") return false; //如果有则不再插入 
            } 
            str=str + "."; 
            ScreenValue=str; 
            refresh_Screen();
            operate=0; 
        } 
        function del(){ //退格 
            var str=ScreenValue; 
            str=str.substr(0,str.length-1);
            ScreenValue=str; 
            refresh_Screen();
        } 
        function clearscreen(){ //清除数据 
            num=0; 
            result=0; 
            numshow="0"; 
            ScreenValue="0"; 
            refresh_Screen();
        } 
        function plus(){ //加法 
            calculate(); //调用计算函数 
            operate=1; //更改输入状态 
            calcul=1; //更改计算状态为加 
        } 
        function minus(){ //减法 
            calculate(); 
            operate=1; 
            calcul=2; 
        } 
        function times(){ //乘法 
            calculate(); 
            operate=1; 
            calcul=3; 
        } 
        function divide(){ //除法 
            calculate(); 
            operate=1; 
            calcul=4; 
        } 
        function persent(){ //求余 
            calculate(); 
            operate=1; 
            calcul=5; 
        } 
        function equal(){ 
            calculate(); //等于 
            operate=1; 
            num=0; 
            result=0; 
            numshow="0"; 
        } 
        // 
        function calculate(){ 
            numshow=Number(ScreenValue); 
            if(num!=0 && quit!=1){ //判断前一个运算数是否为零以及防重复按键的状态 
                switch(calcul){ //判断要输入状态 
                    case 1:result=num+numshow;break; //计算"+" 
                    case 2:result=num-numshow;break; //计算"-" 
                    case 3:result=num*numshow;break; 
                    case 4:if(numshow!=0){result=num/numshow;}else{hint("被除数不能为零!")} break; 
                    case 5:result=num%numshow;break; 
                } 
                quit=1; //避免重复按键
            } 
            else{
                result=numshow; 
            } 
            numshow=String(result); 
            ScreenValue=numshow; 
            refresh_Screen();
            num=result; //存储当前值 
        }
    ]]>
</script>


在爱码哥平台中创建一个应用,把完整代码复制到云端开发中并保存,一个简单的计算器应用就搞定了。结合爱码哥开发版http://www.imagapp.com/workbeanch随时查看效果图

完整代码可参考https://github.com/imagjs/Calculator

快速熟悉掌握imag.js可观看视频教程

http://www.soku.com/search_video/q_imag.js?f=1&kb=040200000000000__imag.js&_rp=1aqb971al1lkv&_rp=1aqb971al1lkv


imag.js|教你如何智做原生APP

标签:移动开发   imag.js   爱码哥      

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
coco
加入时间:2016-07-21
  关注此人  发短消息
文章分类
coco”关注的人------(0
coco”的粉丝们------(0
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!