本章主要介绍 （1）前端调用方法、模板整体配置说明、底部功能按钮配置、如何获取用户输入内容 （2）全局方法使用说明： 1️⃣mask2️⃣轻提示3️⃣计时器4️⃣设置终端号5️⃣设置用户信息6️⃣popUp7️⃣调试控件

调用方法

  1. //初始化配置
  2. var appconfig = {
  3.   //部署文根
  4.   //示例：/webtest/termbase
  5.   //[必须配置]
  6.   webroot: "",
  7.   //----------------------------------
  8.   //一键设置是否需要导航栏（默认为false不显示）
  9.   //[非必须配置]
  10.   needNav:true,
  11.   //----------------------------------
  12.   //是否需要控制台（默认为false）
  13.   //[非必须配置]
  14.   needDebug:true,
  15.   //是否需要调试控件（默认为false）
  16.   //[非必须配置]
  17.   needControl:true,
  18.   //----------------------------------
  19.   //全局特效配置
  20.   //[非必须配置]
  21.   //不配置该属性的情况下，默认fadeIn淡入效果
  22.   //no:无任何特效，推荐CPU配置较低机器使用
  23.   //auto:按已配置各模板特效展示（推荐使用配置）
  24.   //传入指定特效名称，并统一采用该效果展示：推荐的效果有
  25.   //【fadeIn|fadeInDown|fadeInUp】
  26.   // 更多：https://www.yuque.com/zetawoo/h5doc/animation
  27.   //no | auto | 全局指定效果 
  28.   needAni:"no",
  29.   //----------------------------------
  30.   //自定义UI分辨率，目前内部自带两套分辨率：1024*768|1280*1024
  31.   //如果不定义width和height，将显示默认分辨率（1280*1024）
  32.   //1024*768：
  33.   //width: "1024px",
  34.   //height: "768px",
  35.   //1280*1024：
  36.   width: "1280px",
  37.   height: "1024px",
  38.   //DEBUG显示模式（默认不显示）
  39.   //赋值为DEBUG条需要显示的内容。赋值为空、undefined、null时都将不显示DEBUG模式。
  40.   debug:":::当前出入DEBUG模式::: 模拟证件号：320402198909023980|模拟患者用户ID：N00001",
  41.   //----------------------------------
  42. };
  44. //执行初始化配置
  45. ZZH5.Init(appconfig);
  47. //调用模板,入参为模板与载入数据（具体参看模板章节）
  48. ZZH5.Mod({});

模板配置

  1. {
  2.     //调用模板名（不验证大小写）
  3.     model: "AutoIndex",
  4.     //模板预配置
  5.     config: {
  6.       //统一配置
  7.       shell: {
  9.       },
  10.       //模板调用背景图
  11.       bgImg: "bg.jpg",
  13.       //⛔️暂时禁用⛔️
  14.       //模板载入时动画名
  15.       //modInAnimation: "fadeIn",
  17.       //以下是对应模板所特定支持的属性
  18.       //以下内容是样例
  19.       line1:"第一行数据内容",
  20.       // 触发事件支持两种：[ 函数名字符串 ] | [ 匿名函数 ]，
  21.       // 第一种，函数名字符串
  22.       uniClick: "AutoIndex_UniClick",
  23.       // 第二种，匿名函数
  24.       uniClick: function (value) {  
  25.         var newList = [
  26.           {
  27.             txt: '测试科室F-1-2',
  28.             disabled: false
  29.           },
  30.           {
  31.             txt: '测试科室F-1-2',
  32.             disabled: false
  33.           },]
  34.         console.error(value, newList)
  35.         return newList
  36.       },
  37.       ...
  38.     }
  39. }

功能按钮控制

  1. //type……指定左侧或者右侧。left|right
  2. //index……指定按钮的索引号。
  3. //flag……是否禁用。true|false
  4. ZZH5.Call.btnbar(type,index,flag);
  6. //示例
  7. ZZH5.Call.btnbar('left','0',false);

获取工程信息

  1. //示例
  2. ZZH5.ProInfor
  3. //可获取到数据
  4. ZZH5.ProInfor.OrgPro = "original";//基于什么版本创建
  5. ZZH5.ProInfor.Version = "2.1.1";//版本号
  6. ZZH5.ProInfor.Update = "2019-08-12";//当前项目最后更新时间

获取用户录入数据

在所有模板中，都使用ZZH5.getData()方法（返回的数据内容及格式请参看模板章节）。

MASK

ZZH5.Call.mask(…)

目前暂时不支持定时关闭

  1. ZZH5.Call.mask(true,{
  2.         //窗体宽度（非必要设置，默认600px）
  3.         width:"650px",
  4.         //内容设置,支持HTML标签
  5.         content: "输入项不能为空!",
  6.         //标题
  7.         title: "温馨提示",
  8.         //MASK类型 info|warning|loading|tip|success|error（非必要设置，默认info）
  9.         type: "info",
  10.               //非必需配置
  11.             okBtn:true,//是否有确认按钮
  12.             okText:"提交",//按钮文字，不配置默认为“确定”
  13.             onOk:"",//回调函数，不配置默认关闭弹框
  14.               //非必需配置
  15.           cancelBtn:true,//是否有取消按钮
  16.                cancelText:"qu",//按钮文字，不配置默认为“取消”
  17.             onCancel:"testFun2"//回调函数，不配置默认关闭弹框    
  18. })
  20. //#示例一:简单提示
  21. //#复制可直接使用#
  22. ZZH5.Call.mask(true,{
  23.   title: "温馨提示",
  24.   content:"页面正在加载中，请耐心等待...",
  25.   type: "info"
  26. });
  28. //#示例二:内容HTML标签化
  29. //#复制可直接使用#
  30. ZZH5.Call.mask(true,{
  31.   title: "温馨提示",
  32.   width:"800px",
  33.   content:"<div style='color:red'>页面正在加载中，请耐心等待...</div>",
  34.   type: "info"
  35. });
  37. //#示例三:关闭
  38. //#复制可直接使用#
  39. ZZH5.Call.mask(false);

轻提示

ZZH5.Call.msgTip(…)

  1. ZZH5.Call.msgTip(true,{
  2.         //内容设置,支持HTML标签
  3.         content: "输入项不能为空!",
  4.         //TIP类型 info|warning|success|error（非必要设置，默认info）
  5.         type: "warning",
  6.         //自动关闭的延时，单位秒。设为 0 时不自动关闭。（非必要设置，默认3）
  7.         duration: 5,
  8.         // contentStyle:{},
  9. })
  11. //#示例一:简单提示
  12. //#复制可直接使用#
  13. ZZH5.Call.msgTip(true,{content: "输入项不能为空!"})
  15. //#示例二:内容HTML标签化
  16. //#复制可直接使用#
  17. ZZH5.Call.msgTip(true,{
  18.         content: "<div style='font-size:30pt'>输入项不能为空!</div>",
  19.         type: "error"
  20. })
  22. //#示例三:关闭
  23. //#复制可直接使用#
  24. ZZH5.Call.mask(false);

计时器

ZZH5.Call.clockOpt(…)

  1. //#倒计时-重置#
  2. ZZH5.Call.clockOpt("reset");
  3. //#倒计时-暂停#
  4. ZZH5.Call.clockOpt("stop");
  5. //#倒计时-开始#
  6. ZZH5.Call.clockOpt("start");

设置终端号

window.ZZH5.Call.setDevInfor(…)

  1. //设置终端编号内容
  2. window.ZZH5.Call.setDevInfor('终端号:9000001');

设置用户信息

window.ZZH5.Call.setUserinfor(…) ⚠️ 在DLC_4K模式下：请参考对应的新方法调用！

  1. //💡在跳转到主页（AutoIndex）时，将自动隐藏该信息行（注意：是隐藏而非清空）
  3. //设置用户信息
  4. //title:标题
  5. //content:内容
  6. window.ZZH5.Call.setUserinfor([{ title: '用户: ', content: '陈栋华' }, 
  7.                                { title: '性别: ', content: '男' }, 
  8.                                { title: '年龄: ', content: '30' }]);
  9. //不显示用户信息时，如下设置
  10. window.ZZH5.Call.setUserinfor([])

popUp

window.ZZH5.Call.popUp(…) 打开弹出框，所在模板倒计时暂停，关闭弹出框后倒计时继续；

  1. ZZH5.Call.popUp(true,{
  2.     // -1无倒计时，不设置默认15秒
  3.     duration: 10,
  4.     //超时后回调函数，不设置默认关闭弹框
  5.     countEvent:testFun3,
  6.     title: "请确认是否缴费!",
  7.          "<div style='font-size: 30px;text-align:center'>" +"请确认是否缴费!" + "</div>",
  8.     //可配置jpg、png或gif
  9.     imgConf:{
  10.       url: "./h5/gif/invoice.gif",
  11.       style:{width:"600px",height:"380px"},
  12.     },
  13.     tip:"温馨提示：预留位置！",
  15.     okBtn:true,//是否有确认按钮
  16.     okText:"提交",//按钮文字，不配置默认为“确定”
  17.     onOk:"",//回调函数，不配置默认关闭弹框
  19.     cancelBtn:true,//是否有取消按钮
  20.     cancelText:"qu",//按钮文字，不配置默认为“取消”
  21.     onCancel:"testFun2"//回调函数，不配置默认关闭弹框
  22. })
  24. window.ZZH5.Call.popUp(false)

调试控件

needControl:true

屏幕录制2022-01-11 14.33.29.mov (11.52MB)