APICloud开发记录手册

最新推荐文章于 2024-05-22 16:28:25 发布

春风吹又生

最新推荐文章于 2024-05-22 16:28:25 发布

阅读量2.3k

点赞数

分类专栏： apicloud 文章标签： apicloud

本文链接：https://blog.csdn.net/AnoiaDream/article/details/83502894

版权

这篇博客详细记录了APICloud的开发流程，包括创建项目、API的使用、 WeiUI集成、Git管理、自定义模块开发等关键步骤，并提供了相关工具和资源的链接，旨在帮助开发者更好地理解和操作APICloud平台。

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

APICloud开发记录【持续】

文章目录

APICloud开发记录【持续】

1、开发要求

Web Storm 2018.1

2、创建项目

2.1 WebStorm插件操作

基本插件安装：https://docs.apicloud.com/Dev-Tools/webStorm-apicloud-plugin
WebStorm Wifi真机同步和Wifi真机预览：https://docs.apicloud.com/Dev-Tools/webStorm-wifi-sync

(1) 除了IOS一块，其余均建议阅读并操作
在这里插入图片描述

(2) 将webStorm-APICloud加入到项目中
在这里插入图片描述

(3) 安装好需要的插件
在这里插入图片描述

2.2 网页创建

https://www.apicloud.com 官网注册账号
https://www.apicloud.com/console 点击【创建应用】

具体创建应用操作步骤：https://docs.apicloud.com/APICloud/creating-first-app

2.3 下载代码

(1) 采用SVN下载代码，然后导入到Web Storm
在这里插入图片描述
(2) 采用Subversion

https://docs.apicloud.com/Dev-Tools/webStorm-apicloud-plugin#a16

2.4 App创建以及测试

(1) 新建一个底部导航应用
在这里插入图片描述
(2) 启动Wifi真机测试

开启服务
手机输入ip以及端口，点击连接；然后在Web Storm中右键项目，点击【Wifi真机同步】

3、Api的方法

具体API：https://docs.apicloud.com/Client-API/

API.js文档：https://docs.apicloud.com/Front-end-Framework/framework-dev-guide#37

3.1 监听返回键

    api.addEventListener({
            name: 'keyback'
        }, function (ret, err) {
            api.confirm({
                title: '提示',
                msg: "确认退出应用?",
                buttons: ['确定', '取消']
            }, function (ret, err) {
                var index = ret.buttonIndex;
                if (index == 1) {
                    api.closeWin();
                }
                return;
            });
        });

3.2 拨打电话

    api.call({
            type: 'tel', // 直接拨打，无任何提示
            number: '10086' // 电话号码
        });

参数说明：https://docs.apicloud.com/Client-API/api#7

3.3 跨页面执行js脚本

execScript:在指定 window 或者 frame 中执行脚本，对于 frameGroup 里面的 frame 也有效，若 name 和 frameName 都未指定，则在当前 window 中执行脚本，具体执行逻辑见补充说明。

execScript({params})

文档的地址：https://docs.apicloud.com/Client-API/api#18

4、config.xml文件说明

<?xml version="1.0" encoding="UTF-8"?><widget id="A6080528176396" version="0.0.1">
    <name>demo1_nav</name>  <!--app的名称-->
    <description>
        Example For APICloud.
    </description>
    <author email="developer@apicloud.com" href="http://www.apicloud.com">
        Developer
    </author>
    <content src="grid.html"/>  <!--默认app进入的主页地址-->
	<preference name="appBackground" value="rgba(0,0,0,0)"/>
	<preference name="windowBackground" value="rgba(0,0,0,0)"/>
	<preference name="frameBackgroundColor" value="rgba(0,0,0,0)"/>
	<preference name="autoLaunch" value="true"/>
	<preference name="autoUpdate" value="true"/>
	<preference name="smartUpdate" value="false"/>
	<preference name="debug" value="false"/>
	<preference name="statusBarAppearance" value="true"/>
	<permission name="location"/>
	<permission name="internet"/>
	<access origin="*"/>
</widget>

配置文件详细说明：https://docs.apicloud.com/Dev-Guide/app-config-manual

5、 WeiUI集成

5.1 将样式以及JS加入到项目中

下载zip，将build中的weui.css样式文件加入到项目中的css文件夹中

https://github.com/lihongxun945/jquery-weui/releases

5.2 weiUI官网

在WeiUi官网查看对应组件的样式，并移植到页面中

6、上拉刷新

如果页面条目过多，需要进行分页显示，用户上滑数据加载下一页数据，具体实现如下：

6.1 父页面[只有header]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo-header</title>
    <!--标准mui.css-->
    <link rel="stylesheet" href="../../css/mui.min.css">
    <!--App自定义的css-->
    <link rel="stylesheet" type="text/css" href="../../css/app.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/my.css"/>
</head>
<body>
<header class="mui-bar mui-bar-nav" id="topbar">
    <a class="  mui-icon mui-icon-left-nav mui-pull-left" href="#" onclick="goBeforePage()"></a>
    <h1 class="mui-title" id="title">示例</h1>
</header>

<div class="mui-content">
    <ul class="mui-table-view mui-table-view-chevron" id="showResult">


    </ul>
</div>
<script src="../../js/mui.js"></script>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../js/request.js"></script>
<script type="text/javascript" src="../../js/dot.min.js"></script>
<script type="text/javascript" src="../../js/toastUtils.js"></script>
<script type="text/javascript" src="../../js/error.js"></script>
<script type="text/javascript">
 
    apiready = function () {
        var header = $api.byId('topbar');
        //适配iOS7+，Android4.4+状态栏沉浸式效果，详见config文档statusBarAppearance字段
        // $api.fixStatusBar(header);
        //动态计算header的高度，因iOS7+和Android4.4+上支持沉浸式效果，
        //因此header的实际高度可能为css样式中声明的44px加上设备状态栏高度
        //其中，IOS状态栏高度为20px，Android为25px
        var headerH = $api.offset(header).h;
        //frame的高度为当前window高度减去header和footer的高度
        var frameH = api.winHeight - headerH;
        api.openFrame({
            name: 'detection-search-result-list',
            url: './detection-search-result-list.html',
            rect: {
                x: 0,
                y: headerH,
                w: api.winWidth,
                h: frameH
            },
            pageParam: {
                itemsId: api.pageParam.itemsName,
                itemsId: api.pageParam.itemsId
            },
            bounces: true,
            bgColor: 'rgba(0,0,0,0)',
            vScrollBarEnabled: true,
            hScrollBarEnabled: true
        });

        $api.dom('#title').innerHTML = api.pageParam.itemsName;
       
    };
   
    // 返回上一个页面
    function goBeforePage() {
        api.closeWin();
    }
</script>
</body>


</html>

6.2 子页面[list页面]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>检测-检测记录</title>
    <!--标准mui.css-->
    <link rel="stylesheet" href="../../css/mui.min.css">
    <!--App自定义的css-->
    <link rel="stylesheet" type="text/css" href="../../css/app.css"/>
    <li

最低0.47元/天解锁文章

春风吹又生

关注

0
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
APICloud开发记录手册

APICloud开发手册文章目录APICloud开发手册1、开发要求2、创建项目2.1 WebStorm插件操作2.2 网页创建2.3 下载代码2.4 App创建以及测试3、Api的方法3.1 监听返回键3.2 拨打电话3.3 跨页面执行js脚本4、config.xml文件说明5、 WeiUI集成5.1 将样式以及JS加入到项目中5.2 weiui官网6、上拉刷新6.1 父页面[只有header...
复制链接

扫一扫

专栏目录