苍穹登录页支持两种定制方式，“配置式”和“代码式”，下面详细介绍两种方式的使用场景：

1.配置式

管理员账号登录，进入‘系统管理->登录页配置’里配置登录页每个区域的内容，如下图标注了各个部分对应的登录页区域 。

该方式可以配置登录页面的大部分内容，满足了大部分企业的定制需求，普通实施人员就能轻松配置。如果客户的需求更复杂，如左侧图片能不能换成视频播放或者是多图片轮播方式？甚至登录页能不能完全个性化？

答案是：能！如何实现？请看下面的方法。

2.代码式

实现原理：苍穹登录页会将部分dom元素的id和登录页的执行声明周期的方法暴露出来。客户化开发可以自行编写JS，在不同的生命周期中，实现需要的逻辑即可，故该方式需要有客户化开发能力。

通过下面的例子详细介绍该方式如何实现把登录页面上的图片换成了视频播放的方式。

思路：拿到了dom元素的id就可以更改页面的结构、样式以及行为。如下图, 为视频添加了一个点击事件，点击视频alert了一串文字。

1. 如图我们暴露了五个DOM元素的id，左侧图片imgPart、右侧整体formpart、右下脚链接 linksBox、右侧输入框区域content、右侧小图片区域logo，通过操作相应dom的id可以实现登录页元素的个性化替换。移动端支持扩展js但并未暴露dom元素的id。

2. 编写代码：

（1）移动端扩展js文件命名为login_index_m.js，PC端扩展js文件命名为login_index.js。

（2） 将代码写在loginBeforeLoad里会在登录代码执行之前执行，将代码写在loginAfterLoad里会在登录页面加载完成后执行。

（3） 通过window.__kd_custome_js__可获得当前扩展js的位置。

（4）请注意如果loginBeforeLoad不为空但是内部没有执行callback那么登录页面将不会渲染。

（5）部分dom是动态创建的，需要监听页面改变，然后重新为元素绑定事件。

（6）代码示例如下：

(function () {
  // 登录代码加载前调用
  window.loginBeforeLoad = function (callback) {
    //   ... do something
    // 如果需要继续执行登录的代码则执行callback 否则不执行 注意:如果不执行callback登录页面不渲染
    callback()
  }
  /* 登录代码加载后调用
   *左侧容器部分暴露了盒子的id(imgPart) 二开可以获取这个id并根据需求修改这个盒子的内容
   *将方法挂载到window.loginAfterLoad 在页面加载完后会调用这个方法
   */
  window.loginAfterLoad = function (key) {
    // 修改左侧图片部分
    if (key === 'imgPart') {
      var imgPart = function () {
        var banner = document.getElementById('imgPart')
        var currentUrl = window.__kd_custome_js__.slice(0, window.__kd_custome_js__.indexOf('/login_index.js')) + '/img/'
        var videoUrl = currentUrl + 'kingdee.mp4'
        var video = document.createElement('video')
        video.src = videoUrl
        video.autoplay = true
        video.loop = true
        video.muted = true
        video.style.cssText = 'height:100%'
        banner.appendChild(video)
      }
      return imgPart
    }
    // 修改右下角链接
    if (key === 'linksBox') {
      var linksBox = function () {
        var linksBox = document.getElementById('linksBox')
        linksBox.innerHTML = '<a class="LoginWrapper_a_orJD undefined" href="https://www.baidu.com" target="_blank">百度</a>'
      }
      return linksBox
    }
    // 修改右上角图片
    if (key === 'logo') {
      var logo = function () {
        console.log('kingdee')
      }
      return logo
    }
    // 其他操作写在此处
    if (key === 'other') {
      var other = function () {
        console.log('kingdee')
        var formPart = document.getElementById('formPart')
        formPart.style.cssText = 'background-color: #fff'
      }
      return other
    }
  }
})()

3. 上传扩展js

(1) 如果需要其他资源如视频、图片、第三方库等，可以放在js文件(login_index.js/login_index_m.js)的同级目录下。

(2) 将login_index_m.js与login_index.js 与其它资源一起压缩（注意是一起压缩，不要放在一个文件里再去压缩）。

(3) 在平台‘系统管理-登录页配置’，点击‘高级设置’展开扩展JS上传页面，上传刚刚压缩的文件。

1. 如果扩展JS未生效，要看后端返回的扩展JS（window.__kd_custome_js_）路径是否正确。

2. 扩展js代码报错可能会导致页面不渲染, 建议在扩展js内部增加异常处理, 例如在function内用try catch包裹代码。

3. 由于我们不知道开发人员在扩展js里做了什么，无法对扩展js进行安全方面的处理，所以使用扩展js可能会带来安全风险，不要滥用扩展js，使用前请与您的安全部门确认风险是否可控，尽量不要在扩展js内发送网络请求，修改input内容等操作。