5分钟带你入门apicloud，开发app

卡卡_罗特
1,906 阅读10分钟

众所周知，现在apicloud开发app也是非常火爆的。

apicloud的优势：

1. 官方签约  

  APICloud作为知名的移动APP开发平台与您直接签单，以专业的APP开发技术基础作为项目如期上线的可靠保障。 

 2. 保上线

  APICloud CTO亲自为每个项目进行评估并指派资深项目监理，保质保量准时交付。APICloud承诺最终提交至苹果及各大安卓市场审核通过，让客户无后顾之忧。

 3. 便宜

  基于APICloud跨平台开发技术，一套前端代码直接生成苹果和安卓两个平台应用，降低70%传统开发成本。 APICloud聚合各种常用功能模块和几乎所有国内第三方云服务，一键接入，免去重复开发成本。 APICloud的引擎技术允许一套代码完美适配百余种屏幕尺寸，几十个主流手机品牌和各版本Android、iOS系统。 

 4. 快 

  APICloud为开发团队提供海量原生应用功能模块、云数据库等功能，实现高效开发，显著缩短开发周期。 App开发、发布、运营一站搞定，Android、iOS系统升级一键完成。 基于APICloud平台所编写的代码标准、易读，交付后便于快速上手运营维护。

这么多优势的apicloud现在不学等待何时，学了就能涨工资！！！

开发准备阶段

开发app之前，肯定是有设计稿的，建议设计稿为750*1080

这样的好处显而易见，前端开发人员只需要量出设计搞得实际尺寸然后/2便可以得到实际px值，可以说非常方便。

用appcloud开发app不同于H5开发，其实不用考虑过多适配问题，可以不用rem，百分比之类的，你所需要的就是api自带的框架，这里不详细介绍，可以自己看文档

给你页面加上：<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />

就可以了。

建议页面布局，能用宽度尽量用100%，不能用的可以用到弹性布局，display:flex;非常方便，然后实在不行就再写实际的尺寸，高度的话一般按照设计稿来。

下面介绍一下apicloud一些基础的知识点，我自己开发app用到一些非常常用的方法。

（1）首先每个页面都需要用到

此事件是在api对象准备完毕后产生，在每个Window或Frame的HTML代码中都需要监听此事件，以确定APICloud扩展对象已经准备完毕，可以调用了。

apiready = function() {
    bMap = api.require("bMap");        
}

openWin()

这个方法主要是加载api提供的框架

你要在默认的index里面配置一下默认的首页地址

页面的跳转页

api.openWin({
    name: 'page1',
    url: './page1.html',
    pageParam: {
        name: 'test'
    }
});

closeWin：

关闭 window

若当前正在进行 openWin、closeWin 等带动画过渡的 window 操作，调用此方法会失效

closeWin({params})

closeToWin：

关闭到指定 window，最上面显示的 window 到指定 name 的 window 间的所有 window 都会被关闭

若当前正在进行 openWin、closeWin 等带动画过渡的 window 操作，调用此方法会失效

closeToWin({params})

（2）openFrame这方法相当于打开页面的子窗口，子窗口是镶嵌在父窗口里面的。

api.openFrame({
      name: 'cityselect_frame',
      url: 'cityselect_frame.html', 
      rect: {//位置及大小参数
            x:0,
            y:50, 
            w:'auto',
            h:'auto' 
           }, 
      pageParam:{ 
            name:'test'
 } 
 });

（3）openFrameGroup

打开frame组

若frame组已存在，则会把该frame组显示到最前面。frame组打开后，当前页面加载完成后，页面会预加载后面指定个数页面

openFrameGroup({params}, callback(ret, err))

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

这个方法相当于页面呢菜单栏，点击菜单栏切换中中间内容。

（4）储存方法

 // apicloud存储全局信息
api.setPrefs({
    key: 'user_id',
    value: ret.id //赋值给user_id
});
// apicloud获取存储在全局里的值
user_id = api.getPrefs({
    sync: true,
    key: 'user_id'
});
// apicloud清除存储信息
api.removePrefs({
    key: 'user_id'
});
// apicloud向下一页传参
api.openWin({
    name: 'qgxq_head',
    url: '../list/qgxq_head.html',
    pageParam: {
        goods_id: id,
        region_id: region_id,
        area_id: area_id
    }
});
// apicloud获取上页参数
var ret = api.pageParam.data;
// jq获取自定义data值
// <div id="text" value="123"  data-name="黑哒哒的盟友"><div>
// JQUERY取值：$("#text").data("name");
api.showProgress({
    style: 'default',
    animationType: 'fade',
    title: '努力加载中...',
    text: '先喝杯茶...',
    modal: false
});
api.hideProgress();

（5）监听

/////////////发送监听///////////////////////////////////
api.sendEvent({
    name: 'login',
    extra: {
        key1: 1,
    }
});
////////////////接受监听///////////////////////////////
api.addEventListener({
    name: 'login'
}, function(ret, err) {
    //coding...
    //                  alert(JSON.stringify(ret))
    if (ret.value.key1 == 1) {
        getData()
    }
});
///////////////获取app缓存/////////////////////////
api.getCacheSize(function(ret) {
    var size = ret.size;
    cache = (size / 1024 / 1024).toFixed(2) + "M";
    $("#cache").text(cache);
});
//////////////清除app缓存/////////////////////////
function clearhuancun() {
    api.showProgress({
        style: 'default',
        animationType: 'fade',
        title: '努力提交中...',
        text: '先喝杯茶...',
        modal: false
    });
    api.clearCache(function() {
        api.hideProgress();
        api.toast({
            msg: '清除完成'
        });
        cache = "0M";
        $("#cache").text(cache);
    })
}

（6）下拉刷新和下拉加载

/////////下拉刷新//////////
api.setRefreshHeaderInfo({ //调用UI组件 显示顶部下拉刷新组件，页面必须设置为弹动。setRefreshHeaderInfo({params}, callback(ret, err))
    visible: true, //可选 是否可见
    loadingImg: 'widget://image/refesh.png', //上拉下拉的图片
    bgColor: '#fff', //加载信息的背景颜色
    textColor: '#ccc', //加载文字的颜色
    textDown: '下拉刷新...', //下拉时提醒文字
    textUp: '松开刷新...', //松开时提醒文字
    showTime: true //是否显示更新时间
}, function(ret, err) {
    user_id = api.getPrefs({
        sync: true,
        key: 'user_id'
    });
    user_rank = api.getPrefs({
        sync: true,
        key: 'user_rank'
    });
    api.showProgress({
        style: 'default',
        animationType: 'fade',
        title: '努力加载中...',
        text: '先喝杯茶...',
        modal: false
    });
    duqu(user_id, user_rank);
})
//停止刷新
api.refreshHeaderLoadDone();
 
 
////////////上拉加载start/////////
var page = 1;
api.addEventListener({ //上拉加载只能采用绑定自定义事件的办法来实现，没有UI组件
    name: 'scrolltobottom', //绑定事件Window或者Frame页面滑动到底部事件，字符串类型
    extra: {
        threshold: 0 //设置距离底部多少距离时触发，默认值为0，数字类型
    }
}, function(ret, err) {
 
    getDataPage();
});
var page = 1; //page在AJAX请求前要递增page++
api.addEventListener({ //上拉加载只能采用绑定自定义事件的办法来实现，没有UI组件
    name: 'scrolltobottom', //绑定事件Window或者Frame页面滑动到底部事件，字符串类型
    extra: {
        threshold: 0 //设置距离底部多少距离时触发，默认值为0，数字类型
    }
}, function(ret, err) {
 
    getDataPage();
});
 
function getDataPage() {
    page++;
    api.ajax({
        url: url,
        method: 'get',
        timeout: 30,
        dataType: 'json',
        returnAll: false,
        data: {
            values: { //you参数
                page: page
            },
        }
    }, function(ret, err) {
        if (ret) {
            //  alert(JSON.stringify(ret))
 
        }
    })
}
/////////////上拉加载end//////////

（7）apicloud提供的ajax请求

url：

  • 类型：字符串
  • 默认值：无
  • 描述：请求地址

encode：

  • 类型：布尔
  • 默认值：true
  • 描述：（可选项）是否对url进行编码。默认或传true时，Android将始终对url编码，而iOS只有在url不合法（如存在中文字符）的时候才进行编码。如果url中有特殊字符需要编码的，建议先在js层进行编码，然后此参数传false。

tag：

  • 类型：字符串
  • 默认值：无
  • 描述：（可选项）该字段用于传给cancelAjax方法来取消请求，如果传入该字段，请保证各个ajax的tag字段唯一

method：

  • 类型：字符串
  • 默认值：get
  • 描述：（可选项）异步请求方法类型
  • 取值范围：
    get
post
put
delete
head
options
trace
patch

cache：

  • 类型：布尔
  • 默认值：true
  • 描述：（可选项）是否缓存，若缓存，下次没网络时请求则会使用缓存，仅在get请求有效

timeout：

  • 类型：数字
  • 默认值：30
  • 描述：（可选项）超时时间，单位秒

dataType：

  • 类型：字符串
  • 默认值：json
  • 描述：（可选项）返回数据类型。若该字段传json，接收到服务器返回的数据后会尝试将其转换成JSON对象，如果无法转成JSON对象，将返回数据类型错误
  • 取值范围：
json        //返回数据为 JSON 对象
text        //返回数据为字符串类型

charset：

  • 类型：字符串
  • 默认值：utf-8
  • 描述：（可选项）当响应头里面没有返回字符集编码时，使用此编码来解析数据

headers：

  • 类型：JSON 对象
  • 默认值：无
  • 描述：（可选项）设置请求头数据。建议里面的key使用首字母大写的形式，如 User-Agent

report：

  • 类型：布尔
  • 默认值：false
  • 描述：（可选项）是否实时返回上传文件进度

returnAll：

  • 类型：布尔
  • 默认值：false
  • 描述：（可选项）是否需要返回所有 response 信息（包括响应头、消息体、状态码），为 true 时，返回的头信息获取方法(ret.headers)，消息体信息获取方法(ret.body)，状态码获取方法(ret.statusCode)

data：

  • 类型：JSON 对象
  • 默认值：无
  • 描述：（可选项）POST 数据，method 为 get 时不传。以下字段除了 values 和 files 可以同时使用，其它参数都不能同时使用。
  • 内部字段：
{
    stream："",  //以二进制流的方式提交文件。stream为文件路径（字符串类型），支持绝对路径，以及fs://、cache://、box://等文件路径协议。可直接使用其他端API返回的结果，如api.getPicture回调的ret.data等
    body："",    //以纯文本的方式提交数据，body支持字符串及JSON对象。提交JSON对象时，需设置application/json类型的Content-Type头
    values：{},  //以表单方式提交参数（JSON对象）, 如 {"field1": "value1", "field1": "value2"} (直接传JSON对像.)
    files：{}    //以表单方式提交文件，支持多文件上传（JSON对象）,如 {"file": "path"}，也支持同一字段对应多文件：{"file":["path1","path2"]}。文件路径，支持绝对路径，以及fs://、cache://、box://等文件路径协议。可直接使用其他端API返回的结果，如api.getPicture回调的ret.data等.
}

certificate：

  • 类型：JSON 对象
  • 默认值：无
  • 描述：（可选项）用于https请求开启双向认证的情况下，客户端配置p12安全证书设置。
  • 内部字段：
{
    path:'',            //p12证书路径，支持fs://、widget://、cache://等文件路径协议，字符串类型
    password:''            //证书密码，字符串类型
}

callback(ret, err)

ret：

  • 类型：JSON对象或字符串
  • 描述：通常情况下直接为服务器返回的数据，在一些情况下则会有所不同，依赖于传入的dataType、returnAll参数，以及上传文件时是否返回上传进度。
// returnAll参数传true时，内部字段为：
{
    statusCode:                 //状态码，数字类型
    headers: {},            //响应头，JSON对象
    body: ''                //消息体，即服务器返回的数据。若dataType为json，那么body为JSON对象，否则为字符串
}

// 上传文件时，若report字段传true返回上传进度时，原服务器返回数据会被放在body字段里面，内部字段为：
{
    progress: 100,          //上传进度，0.00-100.00
    status: '',             //上传状态，数字类型。（0：上传中、1：上传完成、2：上传失败）
    body: ''                //上传完成时，服务器返回的数据。若dataType为json，那么body为JSON对象，否则为字符串
}

err：

  • 类型：JSON 对象
  • 内部字段：
{
    statusCode: 400,        //网络请求状态码，数字类型
    code:0,                    //错误码，数字类型。（0：连接错误、1：超时、2：授权错误、3：数据类型错误）
    msg:''                    //错误描述，字符串类型
    body:                    //服务器返回的原始数据
}

// 表单方式提交数据或文件
api.ajax({
    url: 'http://192.168.1.101:3101/upLoad',
    method: 'post',
    data: {
        values: {
            name: 'haha'
        },
        files: {
            file: 'fs://a.gif'
        }
    }
}, function(ret, err) {
    if (ret) {
        api.alert({ msg: JSON.stringify(ret) });
    } else {
        api.alert({ msg: JSON.stringify(err) });
    }
});

// 提交JSON数据
api.ajax({
    url: 'http://192.168.1.101:3101/upLoad',
    method: 'post',
    headers: {
        'Content-Type': 'application/json;charset=utf-8'
    },
    data: {
        body: {
            name: 'haha'
        }
    }
}, function(ret, err) {
    if (ret) {
        api.alert({ msg: JSON.stringify(ret) });
    } else {
        api.alert({ msg: JSON.stringify(err) });
    }
});

（8）对了，还有一个比较实用的方法

getCacheSize

获取缓存占用空间大小，缓存包括下载的缓存文件、拍照临时文件以及网页缓存文件等，计算可能需要花费一些时间

getCacheSize({params}, callback(ret, err))

sync：

  • 类型：布尔
  • 默认值：false
  • 描述：执行结果的返回方式。为false时通过callback返回，为true时直接返回。

callback(ret, err)

ret：

  • 类型：JSON 对象
  • 内部字段：
{
    size:        //缓存大小，单位为Byte，数字类型。（-1：无存储设备、-2：正在准备USB存储设备、-3：无法访问存储设备）
}
//异步返回结果：
api.getCacheSize(function(ret) {
    var size = ret.size;
});

//同步返回结果：
var size = api.getCacheSize({
    sync: true
});

clearCache

清除缓存，包括下载的文件、拍照临时文件、网页缓存文件等，清除时可能需要消耗一定时间。

clearCache({params}, callback(ret, err))

api.clearCache(function() {
    api.toast({
        msg: '清除完成'
    });
});


avatar
文章
阅读
粉丝