# 变更记录
| 产品版本 | 更新内容 | 更新日期 |
| --- | --- | --- |
| V6.0.0 | 优化了扩展JS中引入第三方文件的方式，支持相对路径引用 | 2023-10-18 |
之前带大家学习了[《如何调用扫码、拍照等移动客户端的API？》](https://vip.kingdee.com/article/168047584139834112)一文，文中给大家介绍了苍穹平台目前已经集成的一些常用办公APP的能力（包括云之家、企业微信、钉钉和welink）。
不过也有很多用户不是使用这些APP，那么我们要怎么在苍穹未集成的APP里实现自己的需求呢？
苍穹平台为此提供了前端扩展JS的能力，不仅可以扩展在移动端app的能力，pc端也可以用哦～
这篇文章将给大家揭秘～
本文列举了两个关于扩展JS的使用场景（移动端和pc端各一个），希望对于大家有所启发，当前端标准功能不满足业务需求时，可以考虑使用扩展JS为前端赋能。
## 场景一
客户想在某个第三方APP中打开审批界面，在移动端审批完成之后，关闭苍穹界面，并刷新待办列表。
但是由于苍穹没有集成该APP关闭页面的API，这就需要二开处理下，在扩展JS里面实现一个关闭页面的方法，再调用APP的关闭API。
首先，我们需要先找一下该APP有没有关闭页面接口的相关文档，一般的APP官网或者开放平台都会有相关资料。如果是企业内部开发OA软件，可以找OA的开发人员咨询一下。
* 如果当前使用的APP功能比较完善，有对外开放的API，那我们就可以引用app的JS桥文件，然后调用其提供的关闭接口
扩展JS的代码如下：
```js
// index_m.js
(function () {
/**
* 自定义app插件入口
* @param {*} loadjs 加载app需要的js资源，可选
* @param {*} releaseResource 释放根页面资源，可选
* @param callback 插件安装回调，插件生效，最后必须调用：callback({success:true})
*/
window.initKDPlugin = function ({ loadjs, releaseResource }, callback) {
// loadjs的第一个参数是一个地址，需要根据实际情况进行修改（重要！），用于引用第三方JS桥文件
// JS桥文件是线上地址时，可以直接作为第一个参数传递，比如“http://xxx.com/jssdk.js”
// 如果是本地文件，可以上传到跟index_m.js同级的目录，再通过./jsbridge.js相对路径引用
// 如果需要引用多个JS文件，可以传递一个数组，比如['./jssdk1.js', './jssdk2.js']
loadjs('./jsbridge.js', () => {
window.KDPlugin = {
closeWebView: function () {
try {
releaseResource()// 通知释放服务器页面资源
} catch (error) {
console.error('releaseResource', error)
}
// todo: 调用第三方的APP接口关闭当前网页窗口（重要！）
}
}
callback({ success: true })
})
}
})();
```
* 如果当前使用的app没有提供API，那也有办法解决：我们可以跳转到app的中间拦截页面，该中间页面会关闭当前浏览器窗口
扩展JS的代码如下：
```js
// index_m.js
(function () {
window.initKDPlugin = function ({ loadjs, releaseResource }, callback) {
window.KDPlugin = {
closeWebView: function () {
try {
releaseResource()// 通知释放服务器页面资源
} catch (error) {
console.error('releaseResource', error)
}
// todo: 跳转到中间拦截界面（重要！）
location.href = 'https://xxx.com/exit.do'
}
}
callback({ success: true })
}
})();
```
## 场景二
客户的苍穹系统集成了很多异构系统，基本上都是采用模拟登录的方式，有些加密方式需要一些参数，需要从后端数据库取数传过去。需要苍穹提供方法可以往前端localStorage中写数据，在异构系统中再去从localStorage中取数据。
这种场景就可以通过web端扩展JS来实现，扩展JS代码如下：
```js
// index.js
(function () {
/**二开扩展PC端js
* 注意：扩展的js默认是在平台的js前运行，如需扩展的js在平台的js后运行，需要在写在window.afterLoaded中，如下
* window.afterLoaded = function (){
* // your code
* }
*/
// 这个场景不需要在平台js运行后执行，可以直接写在这里
window.KDPluginExtend = {
setLocalStorage: function (data = {}, callback) {
var key = data.key
var value = data.value
if (typeof value === 'object') {
value = JSON.stringify(value)
}
window.localStorage.setItem(key, value)
/**
* 调用callback，会发送customEvent请求给后台（这个场景不需要）
* 注意callback的参数格式（如下）
* success是固定参数，data的值可以自定义
*/
// callback({
// success: true,
// data: data
// })
}
}
})();
```
后端插件示例如下：
```java
// 插件代码
HashMap map = new HashMap();
map.put("method", "setLocalStorage");
HashMap args = new HashMap();
args.put("key", "xxx");
args.put("value", "xxx");
map.put("args", args);
this.getView().executeClientCommand("callAPPApi", map);
```
如果有客户端回调请求，可以在以下方法监听：
```java
//如调用该App方法会有回调，则进该事件
@Override
public void customEvent(CustomEventArgs e) {
String eventName = e.getEventName();
String value = e.getEventArgs();
String key = e.getKey();
if(key.equals("callAppMethod")){
if(eventName.equals("setLocalStorage")) {
// 相关逻辑处理...
}
}
}
```
## 如何使用扩展JS
1. **下载自定义JS模板**
使用管理员登录苍穹，然后点击 系**统管理 -> 登录页配置 -> 高级设置 -> 下载模板**，解压后有两个文件 index.js 和 index_m.js
* **index.js** 用于扩展web端的页面
* **index_m.js **用于扩展移动端页面
2. **自定义JS开发**
这里就可以用上我们刚刚学过的扩展代码啦～
3. **上传自定义JS文件**
将编写好的自定义JS文件压缩后上传至刚刚打开的登录页配置页面，并点击保存即可。
