APICloud 入门教程窗口篇
什么是窗口，窗口可以理解为一屏幕内容的一个基本载体，里面可以放导航，图片，视频，文字等组成一屏幕内容。
不同的窗口组成一个APP, 例如购物APP有【首页】，【购物车】，【我的】等不同的窗口。不同的窗口之间可以进行跳转。
api.openWin 打开一个window窗口。window窗口是全屏的，不可设置大小。
api.openFrame 打开一个frame窗口。frame 窗口可以设置大小。
openWin示例代码：
api.openWin({
name: 'firstpage', //窗口名称，自定义，和页面名称可不一致
url:'html/firstpage.html' //页面地址url
})
firstpage.html 页面代码：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-color: blue;
} p {
color: #fff;
font-size: 20px;
margin-top: 60px;
}
</style>
</head> <body>
<p>首页 firstpage</p>
<script>
apiready = function () {
api.openFrame({
name: 'back',
url: 'back.html',
rect: {
marginLeft: 0,
marginTop: 0, //相对父页面上外边距的距离，数字类型
h: 50
},
pageParam: {
name: 'test'
}
});
}
</script>
</body> </html>
openFrame 示例代码：
api.openFrame({
name: 'back',
url: 'back.html',
rect: {
marginLeft: 0,
marginTop: 0, //相对父页面上外边距的距离，数字类型
h: 50
},
pageParam: {
name: 'test'
}
});
下面举一个例子，用window+frame 组合实现一个首页加一个返回按钮。如下图，“返回” 所在的back.html 是用openFrame 打开的一个frame窗口。下面蓝色全屏页面（fistpage.html）是openWin 打开的一个window窗口。
项目目录示例图：
有了基础的 openWin 和 openFrame ，我们就可以灵活运用，组合出多种多样的布局，满足实际的项目需求。
openWin 和 openFrame 各有30多个参数，这里不一一细讲了，具体可到官方文档查看学习。
https://docs.apicloud.com/Client-API/api#33
下面讲解高级布局窗口 tabLayout
api.openTabLayout
打开tabLayout布局
本方法继承了openWin方法的所有参数，同时在此基础上增加了navigationBar、tabBar等参数，来设置和使用原生的顶部导航栏和底部标签栏，可以通过closeWin方法来关闭页面。
如果在首页需要使用tabLayout，可以将相关参数配置在JSON文件中，再在config.xml中将content的值设置成该JSON文件的路径，例如：
// 创建一个app.json文件，放置在widget目录下
{
"name": "root",
"tabBar": {
"frames": [{
"title": "页面一",
"name": "page1",
"url": "widget://html/page1.html"
}, {
"title": "页面二",
"name": "page2",
"url": "widget://html/page2.html"
}, {
"title": "页面三",
"name": "page3",
"url": "widget://html/page3.html"
}],
"list": [{
"text": "页面一",
"iconPath": "widget://image/tab_1.png",
"selectedIconPath": "widget://image/tab_1_hov.png"
}, {
"text": "页面二",
"iconPath": "widget://image/tab_2.png",
"selectedIconPath": "widget://image/tab_2_hov.png"
}, {
"text": "页面三",
"iconPath": "widget://image/tab_3.png",
"selectedIconPath": "widget://image/tab_3_hov.png"
}]
}
}
config.xml中将content的值设置成该JSON文件的路径:
实现一个示例效果如下 ：
高级窗口的优势 ，代码量较少，可灵活配置顶部或底部按钮。
高级窗口需要了解的事件：
tabitembtn
监听tabLayout中tabBar项的点击事件。默认点击每一项时会切换到对应的页面，如果监听了此事件则页面不会自动切换过去，可以通过setTabBarAttr设置选中项
callback(ret, err)
ret:
- 描述：tabBar项点击事件的回调
- 内部字段：
{
index: //点击的项的索引，从0开始，数字类型
}
示例代码:
api.addEventListener({
name:'tabitembtn'
},function(ret, err){
var index = ret.index + 1;
alert('点击了第'+index+'项');
});
可参看官方出的TabLayout示例代码和官方文档进行学习。下面是链接。
https://developer.yonyou.com/thread-123685-1-1.html
https://docs.apicloud.com/Client-API/api#openTabLayout
APICloud 入门教程窗口篇的更多相关文章
- 最新hadoop入门教程汇总篇（附详细图文步骤）
关于hadoop的分享此前一直都是零零散散的想到什么就写什么,整体写的比较乱吧.最近可能还算好的吧,毕竟花了两周的时间详细的写完的了hadoop从规划到环境安装配置等全部内容.写过程不是很难,最烦的可 ...
- IOS开发入门教程-总结篇-写给狂热的编程爱好者们
程序发轻狂,代码阑珊,苹果开发安卓狂!--写给狂热的编程爱好者们 写在前面的话 学习iOS应用程序开发已有一段时间,最近稍微闲下来了,正好也想记录一下前阶段的整个学习过程.索性就从最基础的开始,一步一 ...
- Vue入门教程 第一篇 （概念及初始化）
注:为了本教程的准确性,部分描述引用了官网及网络内容. 安装Vue 1.使用npm安装vue: npm install vue 2.下载使用js文件: https://vuejs.org/js/vue ...
- Golang简易入门教程——面向对象篇
本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是golang专题的第9篇文章,我们一起来看看golang当中的面向对象的部分. 在现在高级语言当中,面向对象几乎是不可或缺也是一门语言 ...
- ASP.NET MVC4 新手入门教程特别篇之一----Code First Migrations更新数据库结构（数据迁移）修改Entity FrameWork 数据结构（不删除数据）
背景 code first起初当修改model后,要持久化至数据库中时,总要把原数据库给删除掉再创建(DropCreateDatabaseIfModelChanges),此时就会产生一个问题,当我们的 ...
- CodeIgniter 入门教程第一篇：信息发布
一.MVC CodeIgniter 采用MVC架构即:控制层.模型层和视图层. 对应Application下面的文件夹 (图1): 所有新建文件以.php结尾 视图层 view 文件夹放入HTML ...
- Vue入门教程 第二篇 （数据绑定与响应式）
数据绑定 Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统: <div id="app"> {{ message }} </ ...
- 【零基础】Selenium:Webdriver图文入门教程java篇（附相关包下载）
一.selenium2.0简述 与一般的浏览器测试框架(爬虫框架)不同,Selenium2.0实际上由两个部分组成Selenium+webdriver,Selenium负责用户指令的解释(code), ...
- Fakeapp 入门教程（1）：安装篇！
在众多AI换脸软件中Fakeapp是流传最广,操作最简单的一款,当然他同样也是源于Deepfakes. 这款软件在设计上确实是花了一些心事,只要稍加点拨,哪怕是再小白的人也能学会.下面我就做一个入门教 ...
随机推荐
- POJ2728 Desert King （最小生成树、0/1分数规划）
显然的0/1分数规划问题,用二分来解决,检验mid,就用prim算法求最小生成树,看总边权是否大等于0即可验证. 1 #include<bits/stdc++.h> 2 using nam ...
- 如何规范App广告的隐私获取，让用户拥有更多知情权？
随着互联网的不断普及,越来越多老百姓使用智能设备触达互联网.但用户经常发现自己无意间提到的东西,打开App就收到相关产品的广告推送,甚至有人怀疑手机App是通过麦克风来窃取自己平时聊天信息中的关键词进 ...
- 十、RHEL Podman命令
Podman介绍 Podman 是一个开源的容器运行时项目,可在大多数 Linux 平台上使用.Podman 提供与 Docker 非常相似的功能.正如前面提到的那样,它不需要在你的系统上运行任何守护 ...
- fastjson反序列化漏洞历史CVE学习整理
fastjson 1.2.24反序列化漏洞复现 先写一个正常的使用 fastjson的web服务 我们使用 springboot创建 主要是pom.xml 里面要添加fastjson fastjson ...
- JS逆向实战1——某省阳光采购服务平台
分析 其实这个网站基本没有用到过什么逆向,就是简单的图片base64加密 然后把连接变成2进制存成文件 然后用ocr去识别即可 !! 注意 在获取图片连接 和对列表页发起请求时一定要用一个请求,也就是 ...
- golang实现一个简单的http代理
代理是网络中的一项重要的功能,其功能就是代理网络用户去取得网络信息.形象的说:它是网络信息的中转站,对于客户端来说,代理扮演的是服务器的角色,接收请求报文,返回响应报文:对于web服务器来说,代理扮演 ...
- 嵌入式-C语言基础：理解形参和实参的区别
#include<stdio.h> //实参:函数原型中声明函数后面带的参数 int test(int x)//函数原型 { //函数体 printf("test里面的x地址=% ...
- perl大小写转换函数uc和lc
$side = uc $attrs[0]; #把attrs[0]转换成大写,然后给side变量赋值. $gender = lc $attrs[1]; #把attrs[1]转换成小写,然后给gender ...
- Quartz的使用
Quartz的使用 可以下载该项目进行测试查看:https://gitee.com/zhou-jiahao/quartz_demoq 1 初始Quartz 如果你的定时任务没有分布式需求,但需要对任务 ...
- Go语言核心36讲37
你好,我是郝林,今天我们继续来分享并发安全字典sync.Map的内容. 我们在上一篇文章中谈到了,由于并发安全字典提供的方法涉及的键和值的类型都是interface{},所以我们在调用这些方法的时候, ...