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

手机计算器是我们日常中很熟悉并且使用起来非常简单的应用了，这样的应用在爱码哥平台中又该如何开发呢？
结合这个原型图和imag.js现有的布局控件大致有两种解决思路。
[align=center][img]http://chuantu.biz/t5/28/1471426043x1822611446.png[/img][/align]
[b]第一种：使用list列表布局[/b]
底部使用list列表标签进行布局，共4个item，每个item中有5列col，在col中加入文本标签label，也可以把label替换成button。共20列，每一列不用设置长度，会自动平均分配给每一个col。
结构图如下：
[align=center][img]http://chuantu.biz/t5/28/1471425845x1822611446.png[/img][/align]
代码结构是（其余三个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>

这个结构相当于一个骨架，余下的就是编写内容了。
[b]第二种：使用九宫格grid布局[/b]
底部使用网格布局控件grid，共20个item，每个item中有一个文本标签label。相对于第一种方法会更简单，代码量也少，可复制性强。
结构图如下：
[align=center][img]http://chuantu.biz/t5/28/1471425557x1822611446.png[/img][/align]
代码结构（其余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>

在爱码哥平台中创建一个应用，把完整代码复制到云端开发中并保存，一个简单的计算器应用就搞定了。结合[url=http://www.imagapp.com/workbeanch]爱码哥开发版[/url]随时查看效果图
[url=https://github.com/imagjs/Calculator]完整代码[/url]
或者下载下面的压缩包导入到创建的应用中
快速熟悉掌握imag.js可观看[url=(http://www.soku.com/search_video/q_imag.js?f=1&kb=040200000000000__imag.js&_rp=1aqb971al1lkv&_rp=1aqb971al1lkv)]视频教程[/url]