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. 这款软件在设计上确实是花了一些心事,只要稍加点拨,哪怕是再小白的人也能学会.下面我就做一个入门教 ...
随机推荐
- struts2 标签总结
<s:if>判断字符串的问题: 1.判断单个字符:<s:if test="#session.user.username=='c'"> 这样是从session ...
- StampedLock：一个并发编程中非常重要的票据锁
摘要:一起来聊聊这个在高并发环境下比ReadWriteLock更快的锁--StampedLock. 本文分享自华为云社区<[高并发]一文彻底理解并发编程中非常重要的票据锁--StampedLoc ...
- TF-GNN踩坑记录(一)
引言 Batch size作为一个在训练中经常被使用的参数,在图神经网络的训练中也是必不可少,但是在TF-GNN中要求使用 merge_batch_to_components() 把batch之后的图 ...
- Java注解（1）：码农的小秘
很多码农在写代码的时候不太爱写注释,结果任务一多,时间一长,需求一改,就完全不知道当初自己都干了些啥了.好在现在大多数编程语言都有注释功能,能够在代码里面做一些备注,不至于时间长了忘掉.但这些注释只是 ...
- kali配置
IP设置 配置文件:/etc/networking/interface 临时IP ifconfig eth0 192.168.31.111/24 永久IP auto eth0 #iface eth0 ...
- python 网络爬虫全流程教学，从入门到实战（requests+bs4+存储文件）
python 网络爬虫全流程教学,从入门到实战(requests+bs4+存储文件) requests是一个Python第三方库,用于向URL地址发起请求 bs4 全名 BeautifulSoup4, ...
- LOJ2325「清华集训 2017」小Y和恐怖的奴隶主
题目链接 首先dp很显然,\(f(i,s)\)表示到了第i轮,各种血量人数的情况为s今后的期望攻击boss次数.那么有\(f(i,s)=\frac{1}{num+1}*\sum_{s->s'}( ...
- 小程序 wx.navigateTo和 wx.redirectTo区别
wx.navigateTo 官方解释: 意思就是说. A页面跳转B页面 B页面做了操作,点击保存,再跳转回A页面 此时,如果点击左上返回按钮,仍然可以跳转回B页面,而且里面的数据是操作之前的数据 wx ...
- golang中的nil接收器
索引:https://waterflow.link/articles/1666534616841 我们先看一个简单的例子,我们自定义一个错误,用来把多个错误放在一起输出: type CustomErr ...
- Springboot 一行代码实现文件上传 20个平台！少写代码到极致
大家好,我是小富~ 技术交流,公众号:程序员小富 又是做好人好事的一天,有个小可爱私下问我有没有好用的springboot文件上传工具,这不巧了嘛,正好我私藏了一个好东西,顺便给小伙伴们也分享一下,d ...