apicloud学习心得

最新推荐文章于 2023-03-17 21:18:31 发布

张长弓丶

最新推荐文章于 2023-03-17 21:18:31 发布

阅读量521

点赞数 1

分类专栏：工作总结文章标签：学习

本文链接：https://blog.csdn.net/a_pioneer/article/details/103117947

版权

工作总结专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了APICloud的开发模式，包括HTML+CSS+JS+APICloud扩展API的结合使用。讲解了APICloud扩展API的调用方式，强调了核心模块与扩展模块的不同引用方式。详细阐述了调试APP的步骤，从开发控制台到真机或模拟器的调试配置。此外，列举了APICloud常用的方法事件，如下拉刷新、事件广播等，并提出了开发中应注意的问题，如交互响应的300ms延迟、界面参数传递、代码组织和文件命名规范，以及如何优化安装包大小和使用正确的网络通信方式。

摘要由CSDN通过智能技术生成

APICloud的应用开发模式：
HTML+CSS+JS+APICloud扩展API
在这里插入图片描述
APICloud扩展API的调用方式：

核心模块在 window.api 对象下，不需要单独引用，可以直接调用 api.methodName(param, callback);
扩展模块需要 require 引入，遵守 CommonJS 规范

var module = api.require('moduleName');
module.methodName(param, callback); param: {} //参数，是一个JSON对象 
callback: function(ret, err){} //回调函数，是一个Function对象，方法调用的结果通过此函数返回

基本目录结构
在这里插入图片描述
调试app
1.进入“开发控制台”
点击我们的项目
选择模块，再选择自定义Loadder

2.选择自定义，如果是在真机上调试就扫码下载，用模拟器的话就直接点击后面的下载，然后在电脑上的模拟器中运行
3.填写你apiCloud开发工具所在电脑的IP地址和端口（下一步查看IP地址和端口）
在这里插入图片描述

4.打开你的开发工具查看IP地址和端口，选择“帮助”——>“wifi真机同步IP和端口”，在右则就能看到一个IP地址和端口

5.同步app，右击项目，选择全量同步
全量同步与增量同步的区别：全量同步是将所有的文件全部重新更新到手机端，增量同步只将有更改的文件同步到手机上。在这里插入图片描述
APICloud常用的方法事件
1.api.setRefreshHeaderInfo：执行下拉操作。哪个页面加载此功能，下拉刷新功能就在哪个页面。

api.setRefreshHeaderInfo({
    loadingImg: 'widget://image/refresh.png',
    bgColor: '#ccc',
    textColor: '#fff',
    textDown: '下拉刷新...',
    textUp: '松开刷新...'
}, function(ret, err) {
    //在这里从服务器加载数据，加载完成后调用api.refreshHeaderLoadDone()方法恢复组件到默认状态

});

2.将任意一个自定义事件广播出去，这个事件能在任何页面通过addEventListener监听收到。

api.sendEvent({
      name: 'myEvent',
      extra: {key1:'value1', key2:'value2'}
});

api.addEventListener({
   name: 'myEvent'
}, function(ret){
      if(ret && ret.value){
       var value = ret.value;
        alert(value.key1 + ' , ' + value.key2);
    }
});

3.打开和关闭页面

//打开页面
api.openWin({
    name: 'page1',//页面名字
    url: './page1.html',//页面地址
    pageParam: {
        name: 'test'//携带的参数
    }
});
//若当前正在进行 openWin、closeWin 等带动画过渡的 window 操作，调用此方法会失效`在这里插入代码片`
//关闭当前window，使用默认动画
api.closeWin();

//关闭指定window，若待关闭的window不在最上面，则无动画
api.closeWin({
    name: 'page1'
});

4.初始化

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

5.监听设备网络

//有网络
api.addEventListener({
    name:'online'
}, function(ret, err){        
    alert('已连接到网络');
});
ret:
{
    connectionType:''            //当前网络连接类型，如2g、3g、4g、wifi等
}

//无网络
api.addEventListener({
    name:'offline'
}, function(ret, err){        
    alert('断网了');
});

6.屏幕分辨率宽高和当前window宽高

//当前分辨率宽高
var screenWidth = api.screenWidth;  // 比如：当前分辨率宽 640
var screenHeight = api.screenHeight;  // 比如：当前分辨率高 960

//当前window宽高
var winWidth = api.winWidth;  // 比如：当前window宽 320
var winHeight = api.winHeight;  // 比如：当前window高 568

7.提示框

//alert，弹出带一个按钮的对话框，更多按钮的对话框请使用confirm方法
api.alert({
    title: 'testtitle',
    msg: 'testmsg',
}, function(ret, err) {

});

//confirm，弹出带两个或三个按钮的confirm对话框
api.confirm({
    title: 'testtitle',
    msg: 'testmsg',
    buttons: ['确定', '取消']
}, function(ret, err) {
    var index = ret.buttonIndex;
});

//prompt，弹出带两个或三个按钮和输入框的对话框
api.prompt({
    buttons: ['确定', '取消']
}, function(ret, err) {
    var index = ret.buttonIndex;
    var text = ret.text;
});

//showProgress，显示进度提示框
api.showProgress({
    title: '努力加载中...',
    text: '先喝杯茶...',
    modal: false
});

//hideProgress，隐藏进度提示框
hideProgress()

//toast，弹出一个定时自动关闭的提示框
api.toast({
    msg: '网络错误',
    duration: 2000,
    location: 'bottom'
});

对于开发中要注意的问题

交互响应：点击事件必须处理click事件的300ms延迟问题，优化点击响应速度，建议通过为可点击的元素增加tapmode属性来优化点击速度。
界面之间参数传递：可以使用pageParam来实现，但要避免使用过大的pageParam。
网页代码组织：尽量将同一个界面的HTML、CSS和JS代码写在一个html文件中，提高页面加载速度；公用的CSS、JS尽量少和小，不要在html页面中随意加载无用的CSS或JS文件；尽量减少页面中的link或script标签的使用。
文件命名规范：要有统一规范，如首页Windowhome文件命名为home.html，首页Frame文件命名为home_frame.html，所有文件名(网页和资源文件)避免使用中文命名、也不要包含大写字母。
安装包大小：云编译生成的安装包的大小由4部分内容组成：引擎、模块、网页文件和资源文件。引擎的大小是固定的（Android约为400K，iOS约为1.2M），应该控制减少模块、网页文件和资源文件的大小，删除无用的模块和文件。
网络通信方式：必须使用api.ajax，并且设置合适的超时时间，并进行超时和请求失败的异常情况。