精华内容
下载资源
问答
  • APICloud教程

    千次阅读 2019-06-09 18:45:15
    一、通过APICloud进行App前端布局和数据交互App前端布局:Window :窗口Frame:子窗口FrameGroup:一组子窗口的集合 window+frame+html代码的布局方式整个页面最外面是一个window,头部和导航固定不变,为一个frame...

    一、通过APICloud进行App前端布局和数据交互
    App前端布局:
    Window :窗口
    Frame:子窗口
    FrameGroup:一组子窗口的集合

    window+frame+html代码的布局方式
    整个页面最外面是一个window,头部和导航固定不变,为一个frame,下方内容区域又是一个frame,整个frame里面就是具体的页面内容了,里面嵌套了html\css代码

    打开新窗口的过程,就是在一组window+frame+html这种组合下,打开另一组window+frame+html组合的过程

    页面内容简单的情况下,可以直接在window当中加载htmlcss代码

    打开子窗口:api.openFrame

    function openFrame(){
        api.openFrame({
            name:"",  //子窗口的名称
            url:"",  //子窗口的地址
            rect:{ //x和y是坐标位置,子窗口显示的起始坐标,w和h是,宽度和高度
                x:0,
                y:0,
                w:"auto",
                h:"auto"
            }
        })
    }

    打开子窗口组:api.openFrameGroup
    打开新窗口:api.openWin

    下拉刷新:api.setRefreshHeaderInfo

    apiready = function(){
        api.setRefreshHeaderInfo({
            visible:true,
            bgColor:"#ccc",
            textColor:"#fff",
            textDown:"拉一下试试",
            textUp:"试试就试试",
            showTime:true
        },function(){
            //coding...
            //查询数据库
            //判断是否有新数据
            //更新新数据
            api.refreshHeaderLoadDone();
        })
    }

    定义的方法统一放在:

    apiready = function(){
        openFrame();
    }

    数据交互:
    数据存储:
    file模块:目录操作,文件操作
    文件存储方式,用于图片、文档的上传下载删除管理
    db:本地sqlite数据库
    用于离线数据的存储
    localstorage:html5,localstorage
    用于一些变量的存储传递,比如用户的登录状态、多个页面之间的变量传递
    注意:cookie、session无法使用
    preterence:setPrefs、getPrefs、removePrefs
    apicloud封装好的偏好数据存储模块,如应用皮肤、字体大小等个性化的设置

    与自建服务器的网络通信
    api.ajax

    WiFi真机同步配置
    在APP Loader里面,点击小圆圈,进入配置页
    在APICloud Studio 2 项目,右键 查看wifi真机同步ip和端口
    如果显示连接失败,则:打开电脑防火墙,允许APICloud Studio 2 使用专用和共用网络
    APICloud教程

    这样:在代码中可以console.log()内容,在APICloud Studio 2控制台可以即时显示出来

    本地修改了代码,同步到云端:

    • 在做云端同步前,开发者需要将变更的文件,做一次本地提交: 右键文件或目录或项目根目录 -> Git -> Git add + commit
    • 云端同步,指的是将已提交到本地 GIT 仓库的变更,同步到云端SVN/GIT服务器;未做本地提交的文件变更,不会提交到云端 SVN/GIT 服务器

    请在底部输入框输入一段更改说明,以完成本地提交

    • 输入的说明文字,请不要以 # 开头.

    • 输入完成后,请 ctrl/cmd + S 保存,以完成本地提交.
    • 只有进行了本地提交的文件变更,才能使用云端同步功能,将变更同步到云端.
    • 云端同步支持批量提交,即本地提交多次,只需要一次云端同步即可全部同步到服务器.
    • 没有网络也可以进行本地提交
    • 暂时不想进行本地提交的文件,请使用本地代码时光机手动备份代码: 右键项目根目录->代码管理->本地代码时光机->手动备份
    • 如果提示 "Nothing to commit",可安全忽略此提示.

    通过使用AppLoader,在AppLoader里面安装正在开发的app,用数据线连接电脑,配置好ip和端口,点击wifi增量同步,可以编辑代码,在app里面实现同步更新

    在手机上也可以额外安装该app,那么可以使用该app,进行安装、推送更新等测试

    二、API对象
    apiready = function () {
    var appId = api.appId; //比如: A6980386445546
    var appName = api.appName; //比如: AppLoader
    var appVersion = api.appVersion; // 比如: 1.0.0
    var systemType = api.systemType; // 比如: ios
    var systemVersion = api.systemVersion; // 比如: 8.0
    var deviceModel = api.deviceModel; // 比如: iPhone 5
    var operator = api.operator; // 比如:中国移动
    var connectionType = api.connectionType; //比如: wifi
    var fullScreen = api.fullScreen; // 比如: true
    var screenWidth = api.screenWidth; // 比如: 640
    var screenHeight = api.screenHeight; // 比如: 960
    var winName = api.winName; //比如: root
    var winWidth = api.winWidth; azs // 比如: 320 此属性值不同于屏幕的分辨率,比如 iPhone 5 的分辨率为 640x1136,但是其 winWidth 为 320,因此前端需根据 winWidth 和 winHeight 来进行布局
    var winHeight = api.winHeight; // 比如: 568
    var frameName = api.frameName; //比如: trans-con
    var frameWidth = api.frameWidth; // 比如: 320,若当前环境为 window 中,则值和 winWidth 相同
    var frameHeight = api.frameHeight; // 比如: 504,若当前环境为 window 中,则值和 winHeight 相同
    var pageParam = api.pageParam; //比如: {"name" : "tans-con"} JSON用于获取页面间传递的参数值,为 openWin()、openFrame() 等方法中的 pageParam 参数对应值
    var wgtParam = api.wgtParam; //比如: {"name": "API Demo"},用于获取 widget 间传递的参数值,为 openWidget() 方法中的 wgtParam 参数对应值
    var appParam = api.appParam; // 比如: appLoader,当应用被第三方应用打开时,传递过来的参数,字符串类型
    var statusBarAppearance = api.statusBarAppearance; // 比如: true,当前应用状态栏是否支持沉浸式效果,布尔类型
    var wgtRootDir = api.wgtRootDir; //widget: //协议对应的真实目录,即 widget 网页包的根目录,字符串类型
    var fsDir = api.fsDir; //fs: //协议对应地真实目录,字符串类型
    var cacheDir = api.cacheDir; //cache://协议对应的真实目录,字符串类型

    }

    三、跳转页面的两种方式

    1、
    api.openFrame ({
        name: 'AllGroup',
        url: '../AllGroup.html',
        reload:'true',
        rect:{
            x:0,
            y:41,
            w:'auto',
            h:'auto'
        },
        bounces: false,
        pageParam: {
            "id":api.pageParam.id 
        }
    });
    
    2、
    api.openWin({
        name: type,
        url: 'header/'+type+'.html',
        bounces: false,
        pageParam: {
        "id":id //id
        }
    });
    说明:pageParam是用来在页面间传值的,获取上一页面传来的值的方式是api.pageParam.id(其中id是在传值时的变量名,若变量名为name,这里就写api.pageParam.name).
    
    3、关闭页面
    api.closeWin({name:pagename});pagename是所要关闭页面的全名称

    四、沉浸式效果实现
    在config.xml文件配置是否开启:
    <preference name="statusBarAppearance" value="true" />
    沉浸式效果配置说明
    在Window或Frame的apiready事件后,调用$api.fixStatusBar()方法;

    五、CSS Framework
    清除浏览器默认样式(借鉴CSS Reset,Normalize.css)
    禁用系统长按菜单(-webkit-touch-callout:none)
    禁用字体大小自动调整(-webkit-text-size-adjust:none)
    去掉点击高亮(-webkit-tap-highlight-color:rgba(0, 0, 0, 0))
    禁止选择内容(-webkit-user-select:none)
    清除浮动(.clearfix)
    加载更多默认样式(.loading_more)
    <permission name="call"/>打电话
    <permission name="sms"/>短信
    <permission name="camera"/>相机
    <permission name="record"/>录音
    <permission name="location"/>位置
    <permission name="fileSystem"/>
    <permission name="internet"/>
    <permission name="bootCompleted"/>开机启动
    <permission name="hardware"/>控制振动/闪光灯/屏幕休眠
    <permission name="contact"/>联系人

    六、选择器
    var main = $api.byId('main');
    var headerPos = $api.offset(header);

    七、pageParam
    页面参数,JSON 对象类型
    用于获取页面间传递的参数值,为 openWin()、openFrame() 等方法中的 pageParam 参数对应值

    八、打开一个frame组

    api.openFrameGroup({
    name: 'group1',
    background: '#fff',
    scrollEnabled: false,
    rect: {
        x: 0,
        y: 0,
        w: 'auto',
        h: 'auto'
    },
    index: 0,
    frames: [{
        name: 'frame1',
        url: 'frame1.html',
        bgColor: '#fff'
    }, {
        name: 'frame2',
        url: 'frame2.html',
        bgColor: '#fff'
    }]
    }, function(ret, err) {
        var index = ret.index;
    });

    关闭一个frame组

    api.closeFrameGroup({
        name: 'group1'
    });

    九、apicloud使用ajax,传递参数,data的使用方法和qjuery的不一样

    data : {
            values: {
                deviceName:"",
            }
    }

    外面套上values

    十、tapmode和parseTapmode属性详解

    一、在开发的过程中,直接给元素绑定事件属性onclick,会点击没反应,这时,给标签加上tapmode,就解决了问题,查了一下,原来,tapmode具有速点击事件功能,在触发事件中加入tapmode可以消除JS中标准click事件的300毫秒延迟;同时,它具有触发可显示样式的效果,tapmode='css样式类' 属性,当该元素touchstart touchmove的时候就会展现css样式。
    实例<div class="menu" tapmode οnclick="setAlert()">零食</div>

    function setAlert(){
      alert('你好');
    }

    1.tapmode具有速点击事件功能,在触发事件中加入tapmode可以消除JS中标准click事件的300毫秒延迟;
    2.tapmode具有触发可显示样式的效果,tapmode='xxx'属性,’xxx‘为css样式类,当该元素touchstart touchmove的时候就会展现xxx样式。

    二、parseTapmode属性
    解析元素 tapmode 属性,优化点击事件处理
    默认页面加载完成后,引擎会对 dom 里面的元素进行 tapmode 属性解析,若是之后用代码创建的 dom 元素,则需要调用该方法后 tapmode 属性才会生效
    api.parseTapmode()

    转载于:https://blog.51cto.com/9161018/2406538

    展开全文
  • apicloud教程

    2016-07-08 15:41:00
    http://community.apicloud.com/bbs/forum.php?mod=viewthread&tid=15939 转载于:https://www.cnblogs.com/xiezhi/p/5653580.html

    http://community.apicloud.com/bbs/forum.php?mod=viewthread&tid=15939

    转载于:https://www.cnblogs.com/xiezhi/p/5653580.html

    展开全文
  • APICloud教程之如何提高移动性能,转自apicloud论坛
  • APICloud教程-role roleMapping 权限说明
  • APICloud教程:服务器上的页面执行API
  • JavaScript 中的异步模式【APICloud教程
  • apicloud教程3 (转载)

    2016-07-08 15:39:00
    本帖最后由 中山赢友网络科技有限公司 于 2015-10-26 16:44 编辑继《APICloud之小白图解教程系列(一):认识APICloud》《APICloud之小白图解教程系列(二):APICloud Studio的使用和布局》这两篇之后的第三篇文章...

    本帖最后由 中山赢友网络科技有限公司 于 2015-10-26 16:44 编辑


    APICloud之小白图解教程系列(一):认识APICloud
    《APICloud之小白图解教程系列(二):APICloud Studio的使用和布局》这两篇之后的第三篇文章!


    本文章有以下知识点:
    1、模块使用流程
    2、模块使用注意事项
    3、模块案例实践

    知其根,通其理:模块使用流程

    在我们开发APP过程中用到最多的是端API的函数和模块了,基本贯穿我们所有的APP应用。那什么是模块呢?换句话说就是组件,在APICloud中可以这样理解,一些封装好的案例(组件,模块)直接套进去使用。

    不废话了,下面就演示一下模块的添加和使用流程。


    1、打开控制台,找到你的应用,点击左边的菜单模块:

    <ignore_js_op> 

    2、在模块页面选择右边的模块列表,并搜索你要添加的模块(这里我们是UIScrollPicture)然后点击左边的“+”添加模块


    <ignore_js_op> 

    好了,基本的模块添加流程已经完成!下面是添加模块需要注意的部分


    用心、细心成就伟大产品:模块使用注意事项

    1、:必须在控制台添加模块才能使用!
    2、:有些模块必须申请Key才能使用,必须严格按照官方提供的第三方接入教程申请Key。如:百度模块,支付宝模块,微信模块,等等。第三方接入教程:http://docs.apicloud.com/APIClou ... 87%E5%8D%97/baiXing
    3、:部分模块还需要在config.xml中配置相应的节点才能使用,如百度模块(bMap)需要配置:
    1. <feature name="bMap">
    2.     <param name="android_api_key" value="f7Is0dWLom2q6rV3ZfFPZ1aa" />
    3.     <param name="ios_api_key" value="81qz3dBYB5q2nGji4IYrawr1" />
    4.   </feature>
    复制代码

    4、在页面上必须通过api.require("模块名称")引用该模块,并放在apiready=function(){}方法中!


    5、编写好代码之后,必须云编译或者编译自定义loader使用!


    6、额外说明:申请第三方Key的时候,IOS的Bundle ID其实就是包名(特别注意:IOS的未发布正式版的APP全部包名是:com.apicloud.testapp,正式版就是下面截图的包名!)。如何获取包名:
    <ignore_js_op> 



    抛砖引玉,举一反三:模块案例实践

    好了,说了那么多,不如实践一下:

    实践一:UIScrollPicture轮播图的使用

    1、步骤一,先代码该模块的文档:http://docs.apicloud.com/%E7%AB% ... %80/UIScrollPicture

    2、复制文档中的Open方法的案例到编辑器中,注意(所有的模块都要执行上面说的注意事项),代码如下:

    1. var obj = api.require('UIScrollPicture');
    2. var paths = ['widget://res/slide1.jpg', 'widget://res/slide2.jpg', 'http://f.hiphotos.baidu.com/image/pic/item/4e4a20a4462309f7bdca9423710e0cf3d7cad65d.jpg', 'widget://res/slide3.jpg', 'widget://res/slide4.jpg'];
    3. var captions = ['title1', 'title2', 'title3', 'title4', 'title5'];
    4. obj.open({
    5.     rect: {
    6.         x: 0,
    7.         y: 20,
    8.         w: api.winWidth,
    9.         h: 200
    10.     },
    11.     data: {
    12.         paths: paths,
    13.         captions: captions
    14.     },
    15.     styles: {
    16.         caption: {
    17.             height: 35,
    18.             color: '#E0FFFF',
    19.             size: 13,
    20.             bgColor: '#696969',
    21.             position: 'bottom'
    22.         },
    23.         indicator: {
    24.             align: 'center',
    25.             color: '#FFFFFF',
    26.             activeColor: '#DA70D6'
    27.         }
    28.     },
    29.     placeholderImg: 'widget://res/slide1.jpg',
    30.     contentMode: 'scaleToFill',
    31.     interval: 3,
    32.     loop: true,
    33.     fixedOn: '',
    34.     fixed: false
    35. }, function(ret, err){
    36.      if(ret.status){
    37.         if(ret.eventType == 'click'){
    38.             //点击图片的操作
    39.             alert(ret.index);
    40.         }
    41.      }
    42. });
    复制代码

    3、页面的HTML代码如下:

    1. <!DOCTYPE HTML>
    2. <html>
    3.         <head>
    4.                 <meta charset="utf-8">
    5.                 <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    6.                 <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    7.                 <title>小白之路</title>
    8.                 <link rel="stylesheet" type="text/css" href="../css/api.css" />
    9.                 <style>
    10.                 </style>
    11.         </head>
    12.         <body>
    13.                 <!--幻灯片的容器-->
    14.                 <div id="bannder"></div>
    15.                 <!--主要内容容器-->
    16.                 <div class="other-content">
    17.                         1
    18.                         <br />
    19.                         2
    20.                         <br />
    21.                         3
    22.                         <br />
    23.                         4
    24.                         <br />
    25.                         5
    26.                         <br />
    27.                         6
    28.                         <br />
    29.                         7
    30.                         <br />
    31.                         8
    32.                         <br />
    33.                         9
    34.                         <br />
    35.                         10
    36.                         <br />
    37.                         11
    38.                         <br />
    39.                         12
    40.                         <br />
    41.                         13
    42.                         <br />
    43.                         14
    44.                         <br />
    45.                         15
    46.                         <br />
    47.                         16
    48.                         <br />
    49.                         17
    50.                         <br />
    51.                         18
    52.                         <br />
    53.                         19
    54.                         <br />
    55.                         20
    56.                         <br />
    57.                         21
    58.                         <br />
    59.                         22
    60.                         <br />
    61.                 </div>
    62.         </body>
    63.         <script type="text/javascript" src="../script/api.js"></script>
    64.         <script type="text/javascript">
    65.                 apiready = function() {
    66.                         var obj = api.require('UIScrollPicture');
    67.                         var paths = ['http://www.winu.net/a.jpg', 'http://www.winu.net/a.jpg', 'http://www.winu.net/a.jpg'];
    68.                         var captions = ['标题一', '标题二', '标题三'];
    69.                         obj.open({
    70.                                 rect : {
    71.                                         x : 0,
    72.                                         y : 0,
    73.                                         w : api.winWidth,
    74.                                         h : 200
    75.                                 },
    76.                                 data : {
    77.                                         paths : paths,
    78.                                         captions : captions
    79.                                 },
    80.                                 styles : {
    81.                                         caption : {
    82.                                                 height : 35,
    83.                                                 color : '#E0FFFF',
    84.                                                 size : 13,
    85.                                                 bgColor : '#696969',
    86.                                                 position : 'bottom'
    87.                                         },
    88.                                         indicator : {
    89.                                                 align : 'center',
    90.                                                 color : '#FFFFFF',
    91.                                                 activeColor : '#DA70D6'
    92.                                         }
    93.                                 },
    94.                                 placeholderImg : 'widget://res/slide1.jpg',
    95.                                 contentMode : 'scaleToFill',
    96.                                 interval : 3,
    97.                                 loop : true,
    98.                                 fixedOn : 'main',
    99.                                 fixed : false
    100.                         }, function(ret, err) {
    101.                                 if (ret.status) {
    102.                                         if (ret.eventType == 'click') {
    103.                                                 //点击图片的操作
    104.                                                 alert(ret.index);
    105.                                         }
    106.                                 }
    107.                         });
    108.                 };
    109.         </script>
    110. </html>
    复制代码

    好了,现在问题就来了,可能很多人按照代码写了之后发现并没有显示出来。那你就应该按照我说的方法检查一遍:


    1、是否在控制台添加该模块了
    2、是否该模块放在Frame页面,而不是Window页面,必须要放在Frame页面!
    3、看看刚刚复制过来的代码是否填写fixedOn参数了。这个非常重要!!!!,必须写当前Frame的名称!!!!!要不然会直接盖住头部!
    4、是否云提交代码和更新了。
    5、提交代码之后是否编译自定义loader或者云编译了。
    6、编译自定义loader之后,是否点真机运行了。
    7、还有就是广告图的图片路径必须正确!!!


    好了,通过这些检查,应该没有任何问题了!你将看到下面的效果:


    <ignore_js_op> 


    大家仔细发现,问题又来了,发现幻灯片盖住了主要内容!那时因为我们没有给banner容器高度,应该给banner容器的高度和UIScrollPicture使用的高度一致:200


    那代码改造为(只需要添加样式即可):


    1. <style type="text/css">
    2.                         #bannder {
    3.                                 height: 200px;        /* 和UIScrollPictrue模块一样高度 */
    4.                         }
    5.                 </style>
    复制代码


    那现在就正常了!:


    <ignore_js_op> 


    注:如果想隐藏轮播图的文字,可以设置captions参数为:[] 即可,如图:
    <ignore_js_op> 


    好了。UIScrollPicture使用案例完毕。


    所有的代码为:

    1. <!DOCTYPE HTML>
    2. <html>
    3.         <head>
    4.                 <meta charset="utf-8">
    5.                 <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    6.                 <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    7.                 <title>小白之路</title>
    8.                 <link rel="stylesheet" type="text/css" href="../css/api.css" />
    9.                 <style type="text/css">
    10.                         #bannder {
    11.                                 height: 200px;        /* 和UIScrollPictrue模块一样高度 */
    12.                         }
    13.                 </style>
    14.         </head>
    15.         <body>
    16.                 <!--幻灯片的容器-->
    17.                 <div id="bannder"></div>
    18.                 <!--主要内容容器-->
    19.                 <div class="other-content">
    20.                         1
    21.                         <br />
    22.                         2
    23.                         <br />
    24.                         3
    25.                         <br />
    26.                         4
    27.                         <br />
    28.                         5
    29.                         <br />
    30.                         6
    31.                         <br />
    32.                         7
    33.                         <br />
    34.                         8
    35.                         <br />
    36.                         9
    37.                         <br />
    38.                         10
    39.                         <br />
    40.                         11
    41.                         <br />
    42.                         12
    43.                         <br />
    44.                         13
    45.                         <br />
    46.                         14
    47.                         <br />
    48.                         15
    49.                         <br />
    50.                         16
    51.                         <br />
    52.                         17
    53.                         <br />
    54.                         18
    55.                         <br />
    56.                         19
    57.                         <br />
    58.                         20
    59.                         <br />
    60.                         21
    61.                         <br />
    62.                         22
    63.                         <br />
    64.                 </div>
    65.         </body>
    66.         <script type="text/javascript" src="../script/api.js"></script>
    67.         <script type="text/javascript">
    68.                 apiready = function() {
    69.                         var obj = api.require('UIScrollPicture');
    70.                         var paths = ['http://www.winu.net/a.jpg', 'http://www.winu.net/a.jpg', 'http://www.winu.net/a.jpg'];
    71.                         // 如果不希望显示文字,设置为:[];
    72.                         var captions = ['标题一', '标题二', '标题三'];
    73.                         obj.open({
    74.                                 rect : {
    75.                                         x : 0,
    76.                                         y : 0,
    77.                                         w : api.winWidth,
    78.                                         h : 200
    79.                                 },
    80.                                 data : {
    81.                                         paths : paths,
    82.                                         captions : captions
    83.                                 },
    84.                                 styles : {
    85.                                         caption : {
    86.                                                 height : 35,
    87.                                                 color : '#E0FFFF',
    88.                                                 size : 13,
    89.                                                 bgColor : '#696969',
    90.                                                 position : 'bottom'
    91.                                         },
    92.                                         indicator : {
    93.                                                 align : 'center',
    94.                                                 color : '#FFFFFF',
    95.                                                 activeColor : '#DA70D6'
    96.                                         }
    97.                                 },
    98.                                 placeholderImg : 'widget://res/slide1.jpg',
    99.                                 contentMode : 'scaleToFill',
    100.                                 interval : 3,
    101.                                 loop : true,
    102.                                 fixedOn : 'main',
    103.                                 fixed : false
    104.                         }, function(ret, err) {
    105.                                 if (ret.status) {
    106.                                         if (ret.eventType == 'click') {
    107.                                                 //点击图片的操作
    108.                                                 alert(ret.index);
    109.                                         }
    110.                                 }
    111.                         });
    112.                 };
    113.         </script>
    114. </html>
    复制代码


    所有的模块开发流程都基本一致,学会了这个,基本其他的也学会了!

    好了,基础的东西基本讲完了,之后的所有教程都教大家如何布局,如何使用常用模块,如何优化APP性能,如何处理开发遇到的所有问题及处理方法等等。后期也将开发一个完整的APP教程!

    转载于:https://www.cnblogs.com/xiezhi/p/5653571.html

    展开全文
  • apicloud教程2 (转载)

    2016-07-08 15:38:00
    本帖最后由 中山赢友网络科技有限公司 于 2015-10-17 15:38 编辑继《APICloud之小白图解教程系列(一):认识APICloud》之后的第二篇教程。本篇教程有以下知识点:1、APICloud Studio的介绍和常用快捷键的使用2、...
    本帖最后由 中山赢友网络科技有限公司 于 2015-10-17 15:38 编辑

    继《APICloud之小白图解教程系列(一):认识APICloud》之后的第二篇教程。

    本篇教程有以下知识点:

    1、APICloud Studio的介绍和常用快捷键的使用
    2、认识APP中的”流“布局,也就是CSS3的Flex布局

    3、优化官方的fixStatusBar方法,实现兼容性状态栏处理!


    工欲善其事,必先利其器:APICloud Studio的使用介绍及常用快捷键使用

    APICloud Studio是官方推荐IDE编辑器,也就是我们开发APP的软件工具,内置了调试,编译,文档,提示,实时预览等功能,可以帮助我们快速的开发APP。该软件的使用也不用多说,现在给大家介绍一下APICloud Studio一些常用的快捷键,可以帮助大家快速开发。首先我下载的是2015年10月16号最新的包,版本为:APICloud_SDK_v1.1.41。APICloud Studio的版本为:APICloud-Studio_1.2.2。


    常用快捷键有:

    Ctrl+Z:撤销
    Ctrl+N:创建项目或文件
    Ctrl+Shift+F:代码格式化(这个经常用,可以美化代码,也可以通过这个检查代码是否出错)
    Ctrl+/ :注释和反注释
    Alt+/:强制代码提示
    Ctrl+D:剪切该行
    Ctrl+R:真机运行(常用)
    Ctrl+W:编译自定义Loader(常用)

    Ctrl+Y:反撤销
    Ctrl+L:跳到改行(注意,如果需要在IDE中显示行号,只需要在代码区域的最左边右键显示行号就可以了)
    Ctrl+S:保存

    Ctrl+F:搜索
    Ctrl+H:搜索替换
    Ctrl+M:最大化或最小化当前焦点区域,比如像最大化代码区域或者工程目录区域,只需要在该区域空白地方点一下,就可以通过它最大化最小化了。  
    Ctrl+C:复制  
    Ctrl+V:黏贴  

    Ctrl+E:快速切换已经的标签(常用)
    Shift+Enter:在当前光标下面新增一行,无需把光标放在最后面Enter,(这个非常常用,极大提高编程速度)
    Ctrl+Shift+Enter:在当前光标上面添加新增一行(这个非常常用,极大提高编程速度) 

    Ctrl+Shift+E:切换当前文件,(非常常用,可以快速从一个页面切换到另一个页面编辑器)
    Ctrl+Shift+R:全局搜索所有文件并快速打开(这个很牛逼,可以全局搜索项目中有哪些文件,然后直接打开,非常实用,这样找文件就非常容易了!)
    Ctrl+Shift+W:关闭所有页面
    Ctrl+Shift+L:显示所有快捷键的操作,再也不怕忘记快捷键了



    流布局:目前非常火的前端开发布局方式

    移动开发布局最火的就是Flexbox流布局,也叫伸缩布局。详细教程可以看:http://www.w3cplus.com/css3/css3-flexbox-layout.html
    好了,现在我们就用流行的流布局构建我们的APP最基本的页面了

    1、新建APICloud项目:目前我们就新建一个APICloud的项目,模板选空白应用(我们要从基本的布局开始学习):如图所示:

    <ignore_js_op> 

    2、更新并提交代码(养成这个习惯),如图所示

    <ignore_js_op> 

    3、删除默认的代码,保留干净的编辑环境,保留css,和js文件!如图所示:
    <ignore_js_op> 

    4、实现简单的APP页面三栏布局,如图所示:
    <ignore_js_op> 


    大家观察上面图片,可以清楚看出三块结构,那我们应该创建一个父容器包裹着三个div(头,中间,底)(推荐使用div+css布局哦,table就不推荐了!)表示,如:
    1. <div id="web-view">
    2.                         <div id="header">
    3.                                 我是头部
    4.                         </div>
    5.                         <div id="main"></div>
    6.                         <div id="footer"></div>
    7.                 </div>
    复制代码


    2、添加CSS样式,将id为main的区域变为自动伸缩布局,头和尾部固定,样式如下:

    1. <style type="text/css">
    2.                         /*必须设置这个属性*/
    3.                         html, body {
    4.                                 height: 100%;
    5.                         }
    6.                         #web-view {
    7.                                 display: -webkit-box;
    8.                                 display: -webkit-flex;
    9.                                 display: flex;
    10.                                 /* 下面三个控制子div的显示方式,是垂直显示 */
    11.                                 -webkit-box-orient: vertical;
    12.                                 -webkit-flex-flow: column;
    13.                                 flex-flow: column;
    14.                                 /* 上面三个控制子div的显示方式,是垂直显示 */
    15.                                 height: 100%;
    16.                                 /*===== 如果想让div水平排布,可以使用下面代码 ====*/
    17.                                 /*-webkit-box-orient: horizontal;
    18.                                  -webkit-flex-flow: row;
    19.                                  flex-flow: row;
    20.                                  width: 100%;*/
    21.                         }
    22.                         #header {
    23.                                 height: 44px;/*固定头部 */
    24.                                 background: #f00;
    25.                                 text-align: center;
    26.                                 line-height: 44px;
    27.                                 color: #fff;
    28.                         }
    29.                         #footer {
    30.                                 height: 50px;/*固定尾部*/
    31.                                 background: #00f;
    32.                         }
    33.                         #main {
    34.                                 /*设置main为伸缩布局*/
    35.                                 -webkit-box-flex: 1;
    36.                                 -webkit-flex: 1;
    37.                                 flex: 1;
    38.                                 background: #00f;
    39.                         }
    40.                 </style>
    复制代码


    图片如下: <ignore_js_op> 

    好了,简单的三栏布局以及完毕。



    5、在Index页面创建Frame,也就是在Main区域打开。在打开之前先说明一些注意的东西,我相信很多朋友在学习的时候都碰到过IOS或Android状态栏遮住问题,或者想实现状态栏沉浸式效果,那你需要做下面几件事情:

    1)、在根目录下面的config.xml配置文件中添加以下代码:
    1.   <preference name="statusBarAppearance" value="true"/>
    2.   <preference name="iOS7StatusBarAppearance" value="true"/>
    3.   <preference name="softInputMode" value="resize"/>
    复制代码
    2)优化官方的fixStatusBar代码,通过这个代码就可以兼容以前版本和未来版本状态栏问题!包括IOS和Android版本!
    1. // 解决状态栏重合,并优化fixStatusBar代码,Android4.4版本以上添加25px
    2.                 function fixStatusBar(headerid, callback) {
    3.                         var header = $api.byId(headerid);
    4.                         var systemType = api.systemType;
    5.                         var systemVersion = parseFloat(api.systemVersion);
    6.                         if (systemType == "ios" || (systemType == "android" && systemVersion >= 4.4)) {
    7.                                 if (systemType == "android") {
    8.                                         header.style.paddingTop = '25px';
    9.                                 }
    10.                                 $api.fixStatusBar(header);
    11.                         } else {
    12.                                 $api.fixIos7Bar(header);
    13.                         }
    14.                         var headerPos = $api.offset(header);
    15.                         if ( typeof callback == "function") {
    16.                                 callback(headerPos);
    17.                         }
    18.                 }
    复制代码


    3)创建并打开main框架,也就是页面的主体
    1. apiready = function() {
    2.                         // 获取底部的高度
    3.                         var footer = $api.byId("footer");
    4.                         var footerPos = $api.offset(footer);
    5.                         fixStatusBar("header", function(headerPos) {
    6.                                 api.openFrame({
    7.                                         name : 'main',
    8.                                         url : './html/main.html',
    9.                                         rect : {
    10.                                                 x : 0,
    11.                                                 y : headerPos.h,
    12.                                                 w : api.winWidth,
    13.                                                 h : api.winHeight - headerPos.h - footerPos.h // footerPos.h是底部的高度,也可以直接获取main的高度
    14.                                         },
    15.                                         pageParam : {
    16.                                         },
    17.                                         bounces : true,
    18.                                         bgColor : 'rgba(0,0,0,0)',
    19.                                         vScrollBarEnabled : false,
    20.                                         hScrollBarEnabled : false
    21.                                 });
    22.                         });
    23.                 };
    复制代码


    6、直接使用快捷的Ctrl+R真机运行就可以看到效果了。如果想看沉浸式的效果,可以云编译或者编译自定义Loader使用(快捷键为Ctrl+W),新版本直接真机调试也可以看到了。,如下图:

    <ignore_js_op> 

    好了简单的布局页面完成。
    首页index.html所有的代码:

    1. <!doctype html>
    2. <html>
    3.         <head>
    4.                 <meta charset="utf-8">
    5.                 <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    6.                 <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    7.                 <title>小白之路</title>
    8.                 <link rel="stylesheet" type="text/css" href="./css/api.css" />
    9.                 <style type="text/css">
    10.                         /*必须设置这个属性*/
    11.                         html, body {
    12.                                 height: 100%;
    13.                         }
    14.                         #web-view {
    15.                                 display: -webkit-box;
    16.                                 display: -webkit-flex;
    17.                                 display: flex;
    18.                                 /* 下面三个控制子div的显示方式,是垂直显示 */
    19.                                 -webkit-box-orient: vertical;
    20.                                 -webkit-flex-flow: column;
    21.                                 flex-flow: column;
    22.                                 /* 上面三个控制子div的显示方式,是垂直显示 */
    23.                                 height: 100%;
    24.                                 /*===== 如果想让div水平排布,可以使用下面代码 ====*/
    25.                                 /*-webkit-box-orient: horizontal;
    26.                                  -webkit-flex-flow: row;
    27.                                  flex-flow: row;
    28.                                  width: 100%;*/
    29.                         }
    30.                         #header {
    31.                                 height: 44px;/*固定头部 */
    32.                                 background: #f00;
    33.                                 text-align: center;
    34.                                 line-height: 44px;
    35.                                 color: #fff;
    36.                         }
    37.                         #footer {
    38.                                 height: 50px;/*固定尾部*/
    39.                                 background: #00f;
    40.                         }
    41.                         #main {
    42.                                 /*设置main为伸缩布局*/
    43.                                 -webkit-box-flex: 1;
    44.                                 -webkit-flex: 1;
    45.                                 flex: 1;
    46.                                 background: #0f0;
    47.                         }
    48.                 </style>
    49.         </head>
    50.         <body>
    51.                 <div id="web-view">
    52.                         <div id="header">
    53.                                 我是头部
    54.                         </div>
    55.                         <div id="main"></div>
    56.                         <div id="footer"></div>
    57.                 </div>
    58.         </body>
    59.         <script type="text/javascript" src="./script/api.js"></script>
    60.         <script type="text/javascript">
    61.                 // 解决状态栏重合,并优化fixStatusBar代码,Android4.4版本以上添加25px
    62.                 function fixStatusBar(headerid, callback) {
    63.                         var header = $api.byId(headerid);
    64.                         var systemType = api.systemType;
    65.                         var systemVersion = parseFloat(api.systemVersion);
    66.                         if (systemType == "ios" || (systemType == "android" && systemVersion >= 4.4)) {
    67.                                 if (systemType == "android") {
    68.                                         header.style.paddingTop = '25px';
    69.                                 }
    70.                                 $api.fixStatusBar(header);
    71.                         } else {
    72.                                 $api.fixIos7Bar(header);
    73.                         }
    74.                         var headerPos = $api.offset(header);
    75.                         if ( typeof callback == "function") {
    76.                                 callback(headerPos);
    77.                         }
    78.                 }
    79.                 apiready = function() {
    80.                         // 获取底部的高度
    81.                         var footer = $api.byId("footer");
    82.                         var footerPos = $api.offset(footer);
    83.                         fixStatusBar("header", function(headerPos) {
    84.                                 api.openFrame({
    85.                                         name : 'main',
    86.                                         url : './html/main.html',
    87.                                         rect : {
    88.                                                 x : 0,
    89.                                                 y : headerPos.h,
    90.                                                 w : api.winWidth,
    91.                                                 h : api.winHeight - headerPos.h - footerPos.h // footerPos.h是底部的高度,也可以直接获取main的高度
    92.                                         },
    93.                                         pageParam : {
    94.                                         },
    95.                                         bounces : true,
    96.                                         bgColor : 'rgba(0,0,0,0)',
    97.                                         vScrollBarEnabled : false,
    98.                                         hScrollBarEnabled : false
    99.                                 });
    100.                         });
    101.                 };
    102.         </script>
    103. </html>
    复制代码

     

    转载于:https://www.cnblogs.com/xiezhi/p/5653564.html

    展开全文
  • apicloud教程1 (转载)

    2016-07-08 15:36:00
    非常感谢APICloud官方给我版主职位,每天都看到很多朋友提出很多问题,我就借此机会写了一系列的教程,帮助大家从小白到高手之路。系列名称:《APICloud之小白图解教程系列》,会不定时的更新!前言:世界在改变,...
  • titlebody{}header{width: 100%;height: 400px;text-align: center;margin-top: 100px;}button{margin-left: 10px;margin-top: 10px;width: 90px;height: 50px;background-color: green;color: #fff;...
  • apicloud 使用教程

    2020-06-04 18:42:32
    2 登录apicloud客户端 3 点击代码管理菜单,选择代码检出APICloud云端应用,选择刚刚创建的应用 4 新建一个文件夹,用于存放项目,将应用下载到这个文件夹 5 将别人的项目复制黏贴到你新建的项目文件夹覆盖它,...
  • 解决APICloud平台png照片转base64编码失败问题 问题描述 在使用trans模块decodeImgToBase64函数时发现转换出来的编码上传的时候,无法正确显示。当我把转换出来的编码放在在线base64转照片的时候,提示编码错误,...
  • APICloud简易实现定时处理操作 在APICloud开发中,当我们想要定时去处理信息时,比如10s去获取一下消息,我们直接可以用setInterval函数,其使用方法和标准JS相同。代码如下:做了一个秒表,一秒累加一次。 代码...
  • 当我们使用hbuilderX或apicloud进行云打包的时候,需要证书文件才能进行打包。生成ios证书的方法复杂一点,你用本站工具去生成也很简单:对于ios,打包的时候,.p12证书文件和.mobileprovision描述文件是必须要有的。...
  • ApiCloud支付宝支付教程

    千次阅读 2018-07-27 16:52:57
    缘由:方案一,怎么写都是 0001 或者003, 最后看了 一下是服务器后台对订单处理和签名过程 订单的问题,导致错误代码不是特别的准确,当然支付宝官网的错误代码准确,只是调取的时候apicloud 给你错误代码不是特别...
  • apicloud开发之教程

    千次阅读 2017-06-19 13:53:47
    http://blog.csdn.net/lsxf_xin/article/details/50616593
  • APICloud平台融云模块使用教程三连发
  • APICloud之小白图解教程系列

    千次阅读 2016-08-26 13:19:38
    教程地址: http://community.apicloud.com/bbs/forum.php?mod=viewthread&tid=15939 资料: ... APICloud新手教程
  • APICloud之小白图解教程系列(一):认识APICloud

    万次阅读 多人点赞 2016-02-01 00:04:12
    篇头语:非常感谢APICloud官方给我版主职位,每天都看到很多朋友提出很多问题,我就借此机会写了一系列的教程,帮助大家从小白到高手之路。系列名称:《APICloud之小白图解教程系列》,会不定时的更新!前言:世界在...
  • 1. 安装开发工具 sublime官网地址:  ...  package Control (管理插件的插件)安装源码地址: ...  ...将下载好的package control 文件 放进去 打开sublime  使用ctrl+shift+p键 打开插件窗口 输入pcip...今天教程先到这里
  • 分享自:APICloud官方论坛 作者:论坛版主【funy】 用户手机号注册源码分享,首页获取验证码,调用阿里大鱼短信验证码,接口thinkphp5.2写的,可以判断手机号是否注册,短信发送是否成功。 title ...

空空如也

空空如也

1 2 3 4 5 ... 9
收藏数 168
精华内容 67
关键字:

apicloud教程