apicloud模块和html,APICloud教程
APICloud教程
原创
xxxpjgl2019-06-09 18:45:15©著作权
©著作权归作者所有：来⾃51CTO博客作者xxxpjgl的原创作品，如需转载，请注明出处，否则将追究法律责任
⼀、通过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(){
//
/
/查询数据库
//判断是否有新数据
//更新新数据
})
}
```
定义的⽅法统⼀放在：
```
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 使⽤专⽤和共⽤⽹络
这样：在代码中可以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 = tionType; //⽐如： 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、
手机上可以打html与css的appapi.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是所要关闭页⾯的全名称
```
四、沉浸式效果实现
在l⽂件配置是否开启:
沉浸式效果配置说明
在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)
打电话
短信
相机
录⾳
位置
开机启动
控制振动/闪光灯/屏幕休眠
联系⼈

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。