冰狐智能辅助
首页
文档&下载
移动端
微服务
社区
码农教程
管理中心
关于我们
登录/注册
ui函数

setupUI(安装ui)

安装UI，必须在main函数中第一个调用setupUI函数，否则系统不会创建ui。
参数：
参数名 类型 默认值 说明 
<template>
    <linear orientation="vertical">
        <linear orientation="horizontal" width="matchParent">
            <text id="show" text="demo" size="26" gravity="center" layoutWeight="1"/>
            <edit text="haha" gravity="center" layoutWeight="2"/>
            <button id="btn" text="按钮" gravity="center" layoutWeight="1" onClick="onClick"/>
        </linear>
        <spinner id="select" entries="苹果|香蕉|橘子"/>
        <image src="https://www.baidu.com/img/bd_logo1.png" width="30" height="50"/>
    </linear>
</template>
function main() {
    setupUI();
}

ui(获取ui控件)

获取ui控件。
参数：
参数名 类型 默认值 说明
id string 必填 ui控件的id 
function main() {
    ui('name').setText('hello');
}

createUI(动态创建界面)

动态创建ui，返回node对象。（注意：可以使用容器的add方法来显示该控件）
参数：
参数名 类型 默认值 说明
template string 必填 ui的模版 
<template>
    <linear id="gp" orientation="vertical">
        <linear orientation="horizontal" width="matchParent">
            <text id="show" text="demo" size="26" gravity="center" layoutWeight="1"/>
            <edit text="haha" gravity="center" layoutWeight="2"/>
            <button id="btn" text="添加" gravity="center" layoutWeight="1" onClick="onClick"/>
            <button id="btn_remove" text="删除" gravity="center" layoutWeight="1" onClick="onRemoveClick"/>
        </linear>
        <spinner id="select" entries="苹果|香蕉|橘子"/>
        <image src="https://www.baidu.com/img/bd_logo1.png" width="30" height="50"/>
    </linear>
</template>

function main() {
    setupUI();
}

function onClick(event) {
    var node = createUI(`<template><button id="my_btn" text="围观" width="matchParent" onClick="onMyClick"/></template>`);
    // 在容器的最前面添加
    ui('gp').add(node, 0)
}

openUI

打开新的ui界面。
参数：
参数名 类型 默认值 说明
scriptName string 必填 ui脚本名 
function main() {
    openUI('newUI');
}

closeUI

关闭当前ui界面。
参数：
参数名 类型 默认值 说明 
closeUI();

showDialog

显示对话框。
参数：
参数名 类型 默认值 说明
type integer 必填 类型，0表示消息对话框，1表示带编辑功能的对话框
data object 必填 显示的数据
title string 必填 标题
buttonArray array 必填 按键信息，数组元素为对象{type: '', text: '', fn: function},type支持positive、neutral、negative，fn表示对应的处理函数，text表示按钮显示文本 
showDialog(0, '是否确认运行该程序', '运行', [{type:'positive', text:'确定', fn: OnConfirmExe}, {type:'negative', text:'取消'}]);

showPopupMenu

显示弹出菜单。
参数：
参数名 类型 默认值 说明
view Node 必填 控件
items array 必填 菜单数据，数组项为{id: 'id', text: 'hi'}
fn function 选填 菜单处理函数 
<template>
    <linear>
        <listView id="lv" onItemLongClick="onItemLongClick"/>
    </linear>
</template>

function main() {
    setupUI();
}

function onUIResume() {
    var listview = ui('lv');
    listview.setData(['hello', 'world']);
}

function onItemLongClick(view, position) {
    console.log('item long click position:' + position);
    showPopupMenu(view, [{id: 0, text:'编辑'}, {id: 1, text:'删除'}], OnMenuItemClick);
}

function OnMenuItemClick(id) {
    console.log('click menu item:' + id);
}

createFloatDialog

显示悬浮对话框。
参数：
参数名 类型 默认值 说明
scriptName String 必填 ui脚本，用于显示悬浮对话框页面和相关事件处理
config Object 选填 {bgColor:'#ffffff', borderColor:'#000000'} 
// ui_test为悬浮对话框的ui脚本
createFloatDialog('ui_test', {bgColor: '#FFFFFF', borderColor: '#000000'})

destroyFloatDialog

销毁悬浮对话框。
参数：
参数名 类型 默认值 说明 
destroyFloatDialog()

配置悬浮按钮

configFloatButton，配置悬浮按钮，支持定制自己的悬浮按钮。
参数：
参数名 类型 默认值 说明
options Object 必填 可选参数：{enableButtons: true, showStartAndStop: true, slider:{width: 50, height: 80, leftMargin: 10, bgColor:'', runningBgColor:'', image:'asset:sff.png', runningImage:'asset:stop.png'}, show: true, showButtons: true, showToast: true, y:1500, itemStyle:{textColor:'#00FF00', textSize: 12, borderColor:'#555555', bgColor:'#111111', width: 100, height: 100, image:'asset:sff.png', vGap: 10, hGap: 10}, items:[{id:'a1', text:'ss'}, {id:'a2', text:'feg'}]}。enableButtons表示是否开启弹出的按钮。show表示是显示还是关闭悬浮按钮。showButtons表示是否显示按钮。showStartAndStop表示是否关闭开始和停止按钮。showToast表示是否显示toast。slider表示定制滑块的样式，可以定制滑块的宽高、与按钮的距离、滑块背景颜色、滑块图片等，支持asset，http和本地图片。y表示指定悬浮按钮在垂直方向距离手机顶部的距离。itemStyle表示按钮样式，textColor指定文本颜色，textSize指定文本大小，borderColor指定边框颜色，bgColor指定背景颜色，width和height分别指定item的尺寸，image和runningImage指定item图片，支持asset，http和本地图片，vGap和hGap用于设置按钮水平和垂直间隔（可用于实现按钮圆形布局）。items表示自己定制的按钮，id唯一表示按钮，text表示显示的文本。按钮事件处理请见cbFloatButton。 
function main() {
    configFloatButton({showStartAndStop: true, show: true, showToast: true, y:1500, items:[{id:'a1', text:'设置'}, {id:'a2', text:'显示'}]})
    // configFloatButton({show: true})

    // 使用旧版本中的开始和停止按钮效果
    // configFloatButton({enableButtons: false, slider:{width:40, height: 40, image: 'asset:play.png', runningImage:'asset:stop.png', runningBgColor:'#00ffffff', bgColor:'#00ffffff'}})
}

onUIResume

系统回调函数，当UI显示时系统会自动调用，开发者可以在这里进行ui的一些初始化操作。
参数：
参数名 类型 默认值 说明 
function onUIResume() {
    // 设置ui
    ui('item').setText('hello');
}

onUIPause

系统回调函数，当UI消失时系统会自动调用，开发者可以在这里释放一些资源。
参数：
参数名 类型 默认值 说明 
function onUIPause() {
    // 释放资源
    console.log('界面消失了');
}

onBackPressed

系统回调函数，当按返回键时系统会自动调用。
参数：
参数名 类型 默认值 说明 
function onBackPressed() {
    console.log('按下back键');
}