web实现跨平台开发移动App

web实现跨平台开发移动App

web技术再近年来发展迅速，不可否认现在的web前端的技术已然走向了一个比较成熟的地步；然而我接下来说的和这些并没有关系。。。。。。

现在以我们的认知将 app分为三类。 webapp nativeApp 跨平台开发的app；

webapp 就是基于浏览器内核。用w3c标准，ECMAScript标准，还有神奇的HTTP大爷所开发的app。 ----简而言之就是一个站点中的所有网页。。 nativeApp 就是基于其相应平台的app 比如 c++ ios android 的开发工程师必须去搭建相应的环境。再特定的平台上运行；然额 web跨平台就是一个可以用web技术开发别的应用; 我要说的web实现跨平台开发移动App 就是这类的意思；

首先我门要知道直接用 html css js 去开发移动app 是非常困难的，并且相应的平台有相应的接口，等我们学完了这些应该要很长时间的因此我们真正需要的是一个封装很多平台接口的综合平台 ;

因此出现了许多的封装API的一些大型的平台。。经过一番激战最终出现了两大封装API的平台； Phonegap 外国大牛，这是Adobo公司下的平台未来发展可以有一个良好的保障（具体情况可以自己 google），但是由于关注的人较少所以出现的中文文档较少，另一个就是今天的主角APIcloud这应该是国内目前最好的支持跨平台移动开发的平台了，我想说的也是使用APIcolud运用web技术去开发一个app。

APIcloud具有使用简单，功能全面，ui框架简洁，并且提供的Api文件体量小等特点，也就意味用户不需要加载过多的无用的，而且我们页不用使用过多的大型框架文件，相比phone gap我觉得这应该是它最大的优点，而且它是中文的并且已经有了完备的开发封装打包过程，适合小白学习，

首先我们需要在官网中注册账号，然后就可已使用了具体教程我不做介绍，其中的新手文档写的很清楚；

APicloud 中api.js为js增加了新的对象 --api（这个还是很重要的）很多操作都是直接使用这个对象下的方法直接操作（下面的方法很多参数是对象，以及回调函数），还有就是$api这个就像 JQ框架一样这玩意就是个框架封装了很多方法直接调用就醒了；

而后就是整体的模型了。每一个具有相同功能描述之间具有联系的一个可视口是--wabgit（最外层）-- 每一个页面整体就是一个window（窗口）； layout就是同级别的可以是同一视口下的一个兄弟视口（这个比较难懂用一个就知道了）；最小的就是Frame 照这当时学的就行了；

主要代码价绍

这些都是要引入（api.js）才能用的；

api.js里面的方法自己可以研究一下写的很好；

   <script>
        apiready = function(){
            api.openWin({                   //打开一个窗口
                name: 'winname',
                url: 'winurl',
                bounces: false,
                pageParam: {key : 'value'}
            });
            api.openFrame({                  //打开一个frame
                name: 'framename',
                url: 'frameurl',
                bounces: true,
                rect: {
                    x: 0,
                    y: 0,
                    w: 'auto',
                    h: 'auto'
                }
            });
            api.openFrameGroup({          //打开一组  frame
                name: 'group_name',
                scrollEnabled: false,
                rect: {
                    x:0,
                    y:0,
                    w:'auto',
                    h:'auto'
                },
                index: 0,
                frames: [{
                    name: 'frame1_name', 
                    url: 'frame1_url'
                },{
                    name: 'frame2_name', 
                    url: 'frame2_url'
                }]  
            }, function(ret, err){          //执行后回调
                var name  = ret.name;
                var index = ret.index;
            });
            api.openSlidLayout({             //打开一组layout
                type:'left',
                fixedPane:{
                    name: 'fixed_frame_name',
                    bgColor: '#000',
                    url: 'fixed_frame_url'
                },
                slidPane:{
                    name: 'slide_frame_name',
                    bgColor: '#0fc',
                    url: 'slide_frame_url'
                },
                leftEdge: 60
            }, function(ret) {
            
            });
            api.require()     //导入模块
        }
            
    </script>

这图片取自Apicloud官网 ----特作解释；

还有这个文件夹的架构；

程序的入口也就是唯一的一个.xml 文件其中的配置项需要自己进行了解；

如果这些都知道了就可以看看，，程序的执行流程了；

而且最方便的就是它页提供了云服务器，，而且自己可以部署数据库，做一些简单的带交互的（有后台的）的东西对与咱们web前端工程师来说还是很简单的；

get新技能；增涨知识；嘿嘿或许你并没学到具体的技能但是知道有这么个东西很重要的我如果当时有人告诉我有这么个东西并且简单介绍重点，一天估计就拿下了（小装一下嘿嘿）；

ps. 安语，建议最好不要记那么多东西，记住文档有啥就行，因为我们一路上会学很多东西，而且这应该是经常更新的东西，，，所以会用就行了，建议两天get。。。

web实现跨平台开发移动App

猜你喜欢