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. 这款软件在设计上确实是花了一些心事,只要稍加点拨,哪怕是再小白的人也能学会.下面我就做一个入门教 ...
随机推荐
- 220403 考试爆炸记 （T1T2）
T1 最大约数和 先放一下我考时的代码.(没想到能A过洛谷的数据,可能是洛谷的数据有点弱) #include<bits/stdc++.h> using namespace std; int ...
- kubernetes Tcp流量可视化
kubernetes Tcp流量可视化 使用k8spacket和grafana的node graph插件可以查看kubernetes pod的TCP相关信息,如connection.bytes.和du ...
- 一键生成通用高亮代码块到剪贴板，快捷粘贴兼容 TT/WX/BJ 编辑器
有些在线图文编辑器不支持直接插入代码块,但可以直接粘贴 HTML 格式的高亮代码块. 花了一点时间研究了一下各家的编辑器,规则却各不相同.有的要求代码块被包含于 <code> ... &l ...
- Linux家族谱系
I II III VI unix linux Redhat Centos Debian Ubuntu SUSE Android BSD freeBSD NetBSD openBSD ...
- 我的Vue之旅 09 数据数据库表的存储与获取实现 Mysql + Golang
第四期 · 将部分数据存储至Mysql,使用axios通过golang搭建的http服务器获取数据. 新建数据库 DROP DATABASE VUE; create database if not e ...
- ES6 学习笔记（三）原始值与引用值
总结: 1.原始值,表示单一的数据,如10,"abc",true等. 1.1. ES的6种原始值: Undefined.Null.Boolean.Number.String.Sym ...
- 记录因Sharding Jdbc批量操作引发的一次fullGC
周五晚上告警群突然收到了一条告警消息,点开一看,应用 fullGC 了. 于是赶紧联系运维下载堆内存快照,进行分析. 内存分析 使用 MemoryAnalyzer 打开堆文件 mat 下载地址:htt ...
- 关于.Net和Java的看法-一个小实习生经历
目录 背景 带着疑惑 生活中的迷茫 开始实训 实习 再看java 总结 背景 笔者是一个专科院校的一名普通学生,目前就职于某三线城市的WEB方面.Net开发实习生,在找实习期间和就业期间的一些看法,发 ...
- MindStudio模型训练场景精度比对全流程和结果分析
摘要:MindStudio是一套基于华为昇腾AI处理器开发的AI全栈开发平台 本文分享自华为云社区<MindStudio模型训练场景精度比对全流程和结果分析>,作者:yd_24730208 ...
- SpringCloudAlibaba 微服务组件 Nacos 之配置中心源码深度解析
大家好,这篇文章跟大家聊下 SpringCloudAlibaba 中的微服务组件 Nacos.Nacos 既能做注册中心,又能做配置中心,这篇文章主要来聊下做配置中心时 client 端的一些设计,主 ...