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. 这款软件在设计上确实是花了一些心事,只要稍加点拨,哪怕是再小白的人也能学会.下面我就做一个入门教 ...
随机推荐
- C++面向对象编程之类模板、函数模板等一些补充
1.static数据 和 static函数: 对于 非static函数 在内存中只有一份,当类对象调用时,其实会有该对象的this pointer传进去,那个函数就知道要对那个对象进行操作: stat ...
- input框限制只能输入数字的两种方法
方法一: <input type="text" oninput="value=value.replace(/[^\d.%]/g,'')"> 方法 ...
- Vue中组件化编码使用、实现组件之间的参数传递（实战练习二）
上一章节实现的是静态页面的设计.这一章节实现将数据抽取出来.通过组件间参数的传递来实现 上一章节链接地址:https://blog.csdn.net/weixin_43304253/article/d ...
- 微服务 Zipkin 链路追踪原理(图文详解)
一个看起来很简单的应用,可能需要数十或数百个服务来支撑,一个请求就要多次服务调用. 当请求变慢.或者不能使用时,我们是不知道是哪个后台服务引起的. 这时,我们使用 Zipkin 就能解决这个问题. 由 ...
- 「MySQL高级篇」MySQL之MVCC实现原理&&事务隔离级别的实现
大家好,我是melo,一名大三后台练习生,死去的MVCC突然开始拷打我! 引言 MVCC,非常顺口的一个词,翻译起来却不是特别顺口:多版本并发控制. 其中多版本是指什么呢?一条记录的多个版本. 并发控 ...
- Django Admin save 重写 保存
在 django admin管理控制台中,用户按下"Save and add another",表单的字段值仍然填充最后插入的值 并且保存 在ModelAdmin中添加选项save ...
- 河北首家城商行传统核心业务国产化，TDSQL突破三“最”为秦皇岛银行保驾护航
11 月 1 日,秦皇岛银行新一代分布式核心系统成功投产并稳定安全运行超过三个月,标志着秦皇岛银行数字化转型应用和服务水平登上了一个新台阶. 这是秦皇岛银行有史以来规模最大.范围最广.难度最高的一次系 ...
- SpringBoot 自动装配原理
早期的Spring项目需要添加需要配置繁琐的xml,比如MVC.事务.数据库连接等繁琐的配置.Spring Boot的出现就无需这些繁琐的配置,因为Spring Boot基于约定大于配置的理念,在项目 ...
- 如何查看mysql数据目录位置
mysql> show global variables like "%datadir%"; +---------------+-----------------+ | Va ...
- 2022-11-09 Acwing每日一题
本系列所有题目均为Acwing课的内容,发表博客既是为了学习总结,加深自己的印象,同时也是为了以后回过头来看时,不会感叹虚度光阴罢了,因此如果出现错误,欢迎大家能够指出错误,我会认真改正的.同时也希望 ...