apicloud使用指南

ApiCloud

ApiCloud平台介绍

ApiCloud首页
在线教程文档
ApiCloud是一个国内的Hybird APP平台，提供Hybird APP一站式开发服务。可以将使用HTML、CSS和JS制作的应用直接编译为能在安卓和IOS平台上运行的APP。另外，其所提供的代码托管和在线编译服务，可以大大节省开发时间和开发成本。

环境搭建

注册账号

https://www.apicloud.com/signup

Alt text

下载IDE

http://www.apicloud.com/devtools

Alt text

安装手机调试APP

可以在开发软件的帮助菜单中找到以下二维码：

Alt text

创建应用

Alt text

Alt text

删除默认生成的launch和icon文件夹。

APP开发

配置config.xml

https://docs.apicloud.com/Dev...

<!--应用的ID和版本号，这里的版本号没有任何用处-->
<widget id="A6948895441294" version="0.0.1">  <!--启动时自动打开的页面，即名字为root的window中显示的页面--><content src="index.html"/><!--APP背景（一般无需设置）--><preference name="appBackground" value="rgba(0,0,0,0)"/><!--window的默认背景（一般无需设置）--><preference name="windowBackground" value="rgba(0,0,0,0)"/>  <!--frame的默认背景（一般无需设置）--><preference name="frameBackgroundColor" value="rgba(0,0,0,0)"/> <!--是否自动关闭启动页--><preference name="autoLaunch" value="true"/><!--是否自动云端更新（一般无需设置）--><preference name="autoUpdate" value="true"/><!--是否允许云端修复（一般无需设置）--><preference name="smartUpdate" value="false"/><!--是否是DEBUG模式（一般无需设置）--><preference name="debug" value="true"/><!--是否是沉浸式样式--><preference name="statusBarAppearance" value="true"/>
</widget>

沉浸式样式

Alt text

简单开发

使用HTML、CSS和JS以及它们的衍生框架制作出移动端网页，并在制作时注意以下问题：

1、每个页面的head部分加入

<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">

2、使用api.css作为CSS Reset使用。
3、尽量不要使用jQuery等比较重的前端框架去直接操作DOM。
4、布局主要使用适配 -webkit- 的弹性盒子布局。

编译打包

1、将整个项目的代码进行提交（右键项目—云端同步—提交）。
2、在开发者控制台（https://www.apicloud.com/console）中打开项目并继续进行以下步骤。
3、端设置：设置安卓图标（144像素的png图像）和IOS图标（1024像素的png图像）。
4、证书：提供对应平台的证书，安卓证书可以在线生成，IOS证书需要使用IOS开发者账号在IOS官方获取。
5、代码：根据代码更新日志确认代码已经上传完毕。
6、模块：将项目中所有使用的模块添加。
7、云编译：填写应用名称和英语名称；选择平台、类型；填写版本号；点击云编译。

补充：3位版本号的一般计算规则

1、不影响功能的页面更新或显示性错误修复时增加最小的版本号。
2、没有增加和删除功能，只是对现有功能进行更新，而且能兼容旧版本的数据时增加中间的版本号。
3、增加或删除功能，或者对现有功能进行更新后不能再兼容旧版本数据时增加最大的版本号。

三大原生布局系统

固然，使用原本的HTML+CSS+JS就能完成布局和视图切换。但是，为了更好的原生兼容性和运行速度，推荐使用ApiCloud封装好的原生布局系统： window 、 frame 和 widget 。

window

在APP中，window指用户看到的整个屏幕。如果是非沉浸式样式，window的绘制起点（x=0 y=0）为通知栏以下的左上角；如果是沉浸式样式，window的绘制起点（x=0 y=0）为整个用户屏幕的左上角。

window的宽度和高度是自动决定的，程序员无法干涉。

frame

frame是指的用户视图的某个局部，它有自己的绘制起点和宽高。除非特殊场景需要（比如地图），frame不能超出window以外。

在创建一个frame时，程序员可以指定x、y、宽和高。

widget

考虑到运行效率和实现难度，有些效果使用HTML+CSS+JS不是很合适。此时，就要使用ApiCloud封装好的原生模块去显示。

注意：widget一定会处于布局的最上层，而且本身不参与页面流，一般需要在页面中使用其它布局为其预留位置。

tapmode

在需要监听点击事件的标签（包括a标签）中加入 tapmode 属性可以取消掉手机端JS对于点击事件的300ms延迟（主要针对IOS系统，安卓系统使用viewport禁止缩放后会自动取消这个延迟）。

另外，tapmode属性可以接受一个class名作为属性值，当用户按住这个标签时，会自动使用这个class；当用户松手后，会删除这个class。

api和$api

api和$api是ApiCloud封装的两个JS对象，可以在JS代码中直接使用。

api主要封装一些直接与安卓系统或IOS系统进行交互的native方法（比如获取手机电量，调起摄像头，引入其他模块，进行数据存取等）。

$api是类似于jQuery的前端辅助框架，比jQuery更加轻量级。（需要引入api.js）

api的主要用法

https://docs.apicloud.com/Cli...

因为api对象需要和系统进行交互，因此需要等待这个对象初始化完毕。需要访问这个对象的代码要放在以下结构中执行($api中大部分方法无此限制)：

apiready = function(){//在这里里面才可以访问api对象，否则会报api没有定义的错误。
}

常用属性

//当前网络类型 
api.connectionType
"unknown"        //未知
"ethernet"       //以太网
"wifi"           //wifi
"2g"             //2G网络
"3g"             //3G网络
"4g"             //4G网络
"none"           //无网络//window宽度，数字类型，以像素为单位
api.winWidth
//window高度，数字类型，以像素为单位
api.winHeight//以json形式返回打开页面时传递的参数，配合api.openWin()和api.openFrame()中的pageParam属性使用
api.pageParam//widget协议对应的目录，为只读目录，不要在应用运行期间向此目录写入
api.wgtRootDir
//fs协议对应的目录
api.fsDir
//cache协议对应的目录
api.cacheDir

调用api对象相关方法时的通用形式

//api对象上的方法（核心API）
api.方法名(参数,回调函数);
//引用其他模块
var module = api.require("模块名");
module.方法名(参数,回调函数);//参数均为json参数
//如果有回调函数，那么遵循这种格式：
function(ret,err){//ret为方法成功执行时的结果//err为方法执行失败时的结果
}

文件协议

有很多应用都需要读写手机的本地文件，这本身可以通过api对象或部分模块中提供的方法来实现。在读写文件时，需要一个文件路径来指定要读写的文件，为了方便表示文件的路径，ApiCloud封装了多种文件协议。
注意：文件协议只能在JS方法中使用。如果要在HTML或CSS中使用，也要经过JS中转一下。

widget://

与项目的根目录对应，可以在APP运行期间用来在JS里直接获取开发过程使用的文件。这个是只读目录，不能在APP运行期间向内写入。

fs://

使用fs模块时常用的读写目录，可用于永久存储一些文件（如下载功能）。

cache://

应用缓存目录。

配置存取

当需要存储的数据比较多时，可以使用文件来存储。但大多数应用需要的存储量不是很大（比如用户对当前应用的主题选择、不同网络下的资源获取、音量、是否允许通知等），此时就可以使用配置存取的api来操作。

prefs相关

由系统底层实现，理论上无容量限制。

//存值，值必须为字符串
api.setPrefs({key:"键",value:"值"});
//取值
var 值 = api.getPrefs({key:"键",sync:true});
//删除
api.removePrefs({key:"键"});

storage相关

由HTML5新对象localStorage实现，有容量限制。

//存值，如果值为对象，则必须是可以被json序列化的对象
$api.setStorage("键",值);
//取值
var 值 = $api.getStorage("键");
//删除
$api.rmStorage("键")
//清空
$api.clearStorage()

窗口操作

api.openWin()

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/254129.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

halcon对光源打光不均匀进行平场矫正

halcon对光源打光不均匀进行平场矫正

* Image Acquisition 01: Code generated by Image Acquisition 01 *******预处理&#xff0c;生成RGB三通道的平场矫正的图像 *1.绘制检测ROI *2.对检测的ROI进行平场矫正 *3.平场矫正方法采用均值对减方法 read_image (ImageWhite, C:/Users/Administrator/Desktop/平场矫正/…
阅读更多...
金属圆柱求取倾斜角度

金属圆柱求取倾斜角度

方法1&#xff1a; count_seconds (Seconds1)read_image (Image, 9_7750_f3d301de6764d94.jpg)get_image_size (Image, Width, Height)dev_open_window (0, 0, Width, Height, black, WindowHandle)dev_display (Image)rgb1_to_gray (Image, GrayImage)dev_display (GrayImage)…
阅读更多...
PhpStudy 升级 MySQL 版本到5.7

PhpStudy 升级 MySQL 版本到5.7

1&#xff1a;备份当前数据库数据、 最好是导成 SQL 文件2&#xff1a;备份 PhpStudy 下的 MySQL 文件夹、以防升级失败、还可以使用旧版本的数据库3&#xff1a;下载MySQL5.7、解压、然后放在 PhpStudy 下的 MySQL 文件夹下地址&#xff1a;https://dev.mysql.com/downloads/f…
阅读更多...
使用直线标定板进行相机畸变校正，并且进行9点标定（halcon）

使用直线标定板进行相机畸变校正，并且进行9点标定（halcon）

直线标定板图片&#xff1a; 机械吸头位置图片&#xff1a; 处理代码 read_image (Image, 直线标定板图片/Left201118140641772.bmp) get_image_size (Image, Width, Height) dev_close_window () dev_open_window_fit_image (Image, 0, 0, -1, -1, WindowHandle) dev_display…
阅读更多...
【Java MyBatis Generator】使用generator自动生成Dao，Mapping和实体文件

【Java MyBatis Generator】使用generator自动生成Dao，Mapping和实体文件

具体请参照&#xff1a; http://blog.csdn.net/fengshizty/article/details/43086833 按照上面博客地址&#xff0c;下载Generator的依赖包&#xff1a; 如下是我的配置文件&#xff1a; 1 <?xml version"1.0" encoding"UTF-8"?>2 <!DOCTYPE ge…
阅读更多...
h5移动端设备像素比dpr介绍

h5移动端设备像素比dpr介绍

首先介绍一下概念 devicePixelRatio其实指的是window.devicePixelRatio window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。 公式表示就是&#xff1a;window.devicePixelRatio 物理像素 / dips 好了&#xff0c;到了这里有出…
阅读更多...
halcon直线标定板对相机标定的效果评估（对比矫正前后、对比标定板矫正效果）

halcon直线标定板对相机标定的效果评估（对比矫正前后、对比标定板矫正效果）

原图 程序源码 * gen_caltab (7, 7, 0.0025, 1/2.5, GB025标定板.descr, GB025标定板.ps) * Calibration 01: Code generated by Calibration 01 * CameraParameters : [0.048105,-44.0585,8.31518e-006,8.3e-006,641.37,588.269,1280,1024] * CameraPose : [-0.000849522,-0.…
阅读更多...
【QQ输入法】QQ输入法-剪切板 释放内存

【QQ输入法】QQ输入法-剪切板 释放内存

发现一个神奇的情况&#xff1a; 清除和关闭的操作&#xff1a; 1. 2.右键 3.点击 4.清空 5.最后需要关闭 QQ输入法的进程
阅读更多...
真的要做一辈子的程序员吗？来自10年程序员的心声

真的要做一辈子的程序员吗？来自10年程序员的心声

经常听一些同学说&#xff1a;不知道下一份工作该去哪类公司做些什么&#xff0c;我的职场人际一团糟老板不重视我&#xff0c;我现在成长的非常慢所以又想跳槽了&#xff0c;我看不到公司的发展前景好迷茫&#xff0c;其实这一切的困惑都来源于没有做好职业规划或者你根本就没…
阅读更多...
网络编程之 TCP / UDP 及其流程比较

网络编程之 TCP / UDP 及其流程比较

TCP与UDP的区别 1、基于连接与无连接 2、对系统资源的要求&#xff08;TCP较多&#xff0c;UDP少&#xff09;3、UDP程序结构较简单 流模式与数据报模式 4、TCP保证数据正确性&#xff0c;UDP可能丢包 5、TCP保证数据顺序&#xff0c;UDP不保证具体编程时的区别 1、socket()的参…
阅读更多...
Tomcat在Linux上的安装与配置

Tomcat在Linux上的安装与配置

Tomcat在Linux上的安装与配置 1、 jdk下载地址&#xff1a; http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html tomcat下载地址:http://tomcat.apache.org/download-70.cg 2、jdk安装与配置.&#xff08;rpm包&#xff09; (1)jdk安装…
阅读更多...
使用halcon选择点拟合成直线求直线角度

使用halcon选择点拟合成直线求直线角度

原图 源码 read_image (Image, 0.bmp) dev_clear_window () dev_open_window_fit_image (Image, 0, 0, -1, -1, WindowHandle) dev_display (Image)binary_threshold (Image, Region, max_separability, dark, UsedThreshold) connection (Region, ConnectedRegions) select_s…
阅读更多...
Linux网络/firewalld和netfilter/netfilter/iptables语法

Linux网络/firewalld和netfilter/netfilter/iptables语法

为什么80%的码农都做不了架构师&#xff1f;>>> linux网络相关 查看网卡网络信息 ifconfig 命令查看网卡网络信息&#xff0c;比如ip、网关、子网掩码等&#xff0c;但是安装centos7的版本或者某些未知原因&#xff0c;此命令提示找不到&#xff0c;我们可以使用Yu…
阅读更多...
Chrome开发者工具详解(4)-Profiles面板

Chrome开发者工具详解(4)-Profiles面板

Chrome开发者工具详解(4)-Profiles面板 如果上篇中的Timeline面板所提供的信息不能满足你的要求&#xff0c;你可以使用Profiles面板&#xff0c;利用这个面板你可以追踪网页程序的内存泄漏问题&#xff0c;进一步提升程序的JavaScript执行性能。 概述 当前使用的Chrome最新版为…
阅读更多...
halcon通过点拟合圆形，鼠标选点

halcon通过点拟合圆形，鼠标选点

原图 源码 read_image (Image, 0.bmp) dev_clear_window () dev_open_window_fit_image (Image, 0, 0, -1, -1, WindowHandle) dev_display (Image)binary_threshold (Image, Region, max_separability, dark, UsedThreshold) connection (Region, ConnectedRegions) select_s…
阅读更多...
LINUX多播编程

LINUX多播编程

一.单播&#xff0c;广播和多播 1.单播用于两个主机之间的端对端通信&#xff0c;广播用于一个主机对整个局域网上所有主机上的数据通信。单播和广播是两个极端&#xff0c;要么对一个主机进行通信&#xff0c;要么对整个局域网上的主机进行通信。实际情况下&#xff0c;经常需…
阅读更多...
cas单点登录搭建

cas单点登录搭建

Cas Server下载&#xff1a;http://developer.jasig.org/cas/ Cas Client下载&#xff1a;http://developer.jasig.org/cas-clients/ 测试环境&#xff1a; jdk&#xff1a;java version "1.8.0_60" tomcat&#xff1a;apache-tomcat-7.0.65 mysql&#xff1a;mysql5…
阅读更多...
689D Magic Odd Square 奇数幻方

689D Magic Odd Square 奇数幻方

1 奇数阶幻方构造法 (1) 将1放在第一行中间一列; (2) 从2开始直到nn止各数依次按下列规则存放&#xff1a;按 45方向行走&#xff0c;向右上&#xff0c;即每一个数存放的行比前一个数的行数减1&#xff0c;列数加1 (3) 如果行列范围超出矩阵范围&#xff0c;则回绕。例如1在第…
阅读更多...
Java单例的常见形式

Java单例的常见形式

2019独角兽企业重金招聘Python工程师标准>>> Java单例的常见形式 本文目的&#xff1a;总结Java中的单例模式 本文定位&#xff1a;学习笔记 学习过程记录&#xff0c;加深理解&#xff0c;便于回顾。也希望能给学习的同学一些灵感 一、非延迟加载单例类 public cla…
阅读更多...
U-Boot启动过程完全分析

U-Boot启动过程完全分析

1.1 U-Boot 工作过程 U-Boot启动内核的过程可以分为两个阶段&#xff0c;两个阶段的功能如下&#xff1a; &#xff08;1&#xff09;第一阶段的功能 硬件设备初始化 加载U-Boot第二阶段代码到RAM空间 设置好栈 跳转到第二阶段代码入口 &#xff08;2&#x…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023