帮助中心

# 快速开始

实例DEMO用简短的易理解的代码展示了自定义的绝大部分功能：使用素材库素材，前后端交互，用户自定义函数调用七巧Plus系统函数库

  • 需求：页面展示七巧Plus官方图标，提供一个按钮，点击按钮调用服务端提供接口，并在页面渲染出接口返回结果

  • 操作步骤：创建应用，低代码管理模块的素材库上传七巧Plus官方图标，pc业务建模搭建自定义页面进行代码编写，前端代码引用素材库资源，调用服务端接口，获取响应报文并渲染，服务端提供获取当前登录用户函数并构建字符串返回

# 模板代码

  • index.html
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>示例</title>
</head>

<body>
  <div id="app"><img src="http://qiqiao-public-1251782781.cos.ap-guangzhou.myqcloud.com/2efc32ee89074e919afa2219e3cace53/material/5e01b388fb38ac29dfaea413/七巧Plus/七巧Plus.png" /></div>
  <button type="submit" onclick="text()">点击调用服务端代码</button>
  <h1 id="responseVal"></h1>
</body>
</html>
  • index.css
#app img{
    width: 600px;
}
  • index.js
function text(){
	let params = ['world']
	applyApi('hello', params).then(response => {
		if (response.data.code === 0) {
			 // 调用成功业务代码
			  console.log('调用成功',response.data)
			  document.getElementById('responseVal').innerHTML = response.data.data
		}else{
			  console.log('调用失败')
		}
	})
}
  • 服务端代码
var API = {
    hello:function(name){
        var user = FUNC.getCurrentUser();
        return "hello "+ name + "!"+  "<br>当前登录用户:" + user.getName();
    }
        
}

var FUNC = {
    getCurrentUser:function(){
        var userId = $.context.getCurrentUserId();
        return $.contact.getUserById(userId);
    }
}

# 页面效果

  • 页面渲染

15771713051755.png

点击按钮，调用服务端代码并渲染返回结果

15771713593294.png

1 / 0