前端函数文档.docVIP

前端函数

前端函数

一、概述

Yonbuilder前端函数，主要是对前端页面、数据控制，及跟后端交互（可以跟API函数进行交互）

主要功能有

取值、赋值

字符串处理

调试、服务调用等

二、前端函数调用后端函数步骤

例1：文本框支持绑定函数支持绑定值改变前，值改变后

1、本例选择值改变前，点击设置按钮

2、可以绑定前端函数，后端函数，本例选择绑定前端函数

3、点击配置按钮

三、弹窗函数设计页面，可以编写函数，左侧提供各种函数及样例

3.1页面模型脚本

获取组件的值

constvalue=viewModel.get(控件编码).getValue();--控件编码是字段名称

给组件赋值

viewModel.get(控件编码).setValue(赋值内容);

3.2字符串脚本

替换

constres=str.replace(被替换的字符串,新字符串)

拼接

constres=strArr.join(拼接符);

去除两端空白

constres=str.trim();

3.3服务调用---前端函数只能调用api函数，不能调用后端函数

注：调用api函数传参格式参考上图

3.4引用第三方JS/CSS

方式一

function(event){

varviewModel=this;

extscripturls.push(/packages/TestExternal.js);

}

方式二

function(event){

varviewModel=this;

//加载css文件

functionloadCssFile(params){

varfileref=document.createElement(link)

fileref.rel=stylesheet;

fileref.type=text/css;

fileref.href=params;

fileref.media=screen;

varheadobj=document.getElementsByTagName(head)[0];

headobj.appendChild(fileref);

}

//加载自定义样式

functionloadStyle(params){

varheadobj=document.getElementsByTagName(head)[0];

varstyle=document.createElement(style);

style.type=text/css;

headobj.appendChild(style);

style.sheet.insertRule(params,0);

}

//加载js

functionloadjs(params){

varheadobj=document.getElementsByTagName(head)[0];

varscript=document.createElement(script);

script.type=text/javascript;

script.src=params;

headobj.appendChild(script);

}

//加载css样式

loadCssFile(/jsapi_demos/static/demo-center/css/demo-center.css);

//加载js

loadjs(/maps?v=1.4.15key=9b2f6b9f4b37bfe98e4e48cb2a70c376plugin=AMap.Autocomplete);

//加载样式

loadStyle(.mycircle{border-radius:50%;width:60px;height:60px;background:#5A5AAD;text-align:center});

}