什么是窗口，窗口可以理解为一屏幕内容的一个基本载体，里面可以放导航，图片，视频，文字等组成一屏幕内容。

不同的窗口组成一个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示例代码和官方文档进行学习。下面是链接。

APICloud重磅推出TabLayout高级窗口组件_APICloud论坛APICloud API对象 – 手机App开发、App制作、App定制平台

APICloud 入门教程窗口篇相关推荐

微信公众号开发入门教程第一篇
微信公众号开发入门教程第一篇关键字:微信公众平台开发作者:方倍工作室在这篇微信公众平台开发教程中,我们假定你已经有了PHP语言程序.MySQL数据库.计算机网络通讯.及HTTP/XML/CSS/ ...
linux usb3.0改2.0,TX1入门教程硬件篇-切换USB2.0与USB3.0
TX1入门教程硬件篇-切换USB2.0与USB3.0 说明: 介绍如何切换TX1USB口的为2.0或3.0版本步骤: 编辑extlinux.conf文件,修改usb_port_owner_info= ...
zed相机拆机_TX2入门教程硬件篇-外接双目相机ZED
TX2入门教程硬件篇-外接双目相机ZED 说明:介绍如何在TX2安装ZED双目相机步骤:准备:接上显示屏,键盘和鼠标刷机:TX2通过jetpack3.0需要采用full模式完成刷机确保有CUDA ...
zed相机拆机_TX1入门教程硬件篇-外接双目相机ZED
TX2入门教程硬件篇-外接双目相机ZED 说明:介绍如何在TX2安装ZED双目相机步骤:准备:接上显示屏,键盘和鼠标刷机:通过jetpack3.0需要采用full模式完成刷机确保有CUDA8.0 ...
ESP32-C3入门教程基础篇（八、NVS — 非易失性存储库的使用）
前面的7节课把开发板上基本的外设都测试过一边,接下来马上就要进入wifi和蓝牙应用的测试了在此之前,还需要把掉电数据保存的功能给实现,在STM32中,可以使用内部的flash或者有些自带的EEPRO ...
ESP32-C3入门教程 WiFi篇③——WiFi SoftAP 模式开启AP热点
文章目录一.前言二.WiFi模式三.快速运行四.运行效果五.程序流程 5.1 主程序 5.2 注册事件回调函数六.关键函数 6.1 将事件回调函数注册到特定循环 6.2 设置 ESP32 ...
ESP32-C3入门教程 WiFi篇②——WiFi Station 模式连接到 AP 热点接入点
文章目录一.前言二.WiFi模式三.快速运行四.运行效果 4.1 连接失败 4.2 连接成功五.程序流程 5.1 主程序 5.2 注册事件回调函数六.关键函数 6.1 将事件回调函数注册到 ...
ESP32-C3入门教程 IoT篇⑦——微软云 Microsoft Azure 物联网 IoT Central EspAzureIoT 实战
文章目录一.前言二.微软云 Microsoft Azure 物联网 IoT 三.Azure IoT Central 实操四.编译下载运行五.源码浅析六.运行效果七.其他八.参考一.前言 ...
ESP32-C3入门教程系统篇①——FreeRTOS系统时钟Tick
文章目录一.前言二.延时函数三.计时函数四.源码详解一.前言本文基于VS Code IDE进行编程.编译.下载.运行等操作基础入门章节请查阅:ESP32-C3入门教程基础篇①--基于V ...
ESP32-C3入门教程 WiFi篇⑨——WiFi配网失败常见问题与解决办法（找不到WiFi AP | WiFi密码错误 | 距离AP过远 RSSI判断）
文章目录一.前言二.WiFi配网的常见问题三.5GHz WiFi 四.找不到WiFi AP 4.1 App限制WiFi名称的输入 4.2 设备回传配网失败错误码五.WiFi密码错误 5.1 ...

APICloud 入门教程窗口篇

api.openTabLayout

tabitembtn

callback(ret, err)

示例代码

APICloud 入门教程窗口篇相关推荐

最新文章

热门文章