汉枫LPB100 定制网页说明【官方文档】
HF-LPB100 定制网页说明HF-LPB100模块支持自由修改定制网页，网页定制规则具体如下： 1. HTML文件命名规则中文网页以 “_cn” 结尾，英文网页以 “_en” 结尾，如：index_cn.html、index_en.html。编写好的html文件通过使用LPB_WEB_Tools.exe工具生成有效bin文件烧写进HF-LPB模块即可。 2. 参数获取规则网页文件中通过动态区传参来获取和设置HF-LPB模块中的参数，请在每个页面的< script>标签中加入如下代码： <script type="text/javascript">/*<%CONFIG_VAR(wifi_mode, CFG_WMODE);%>*/ function init() { document.form_wmode.wifi_mode.value=wifi_mode; } </script> 当打开页面时，返回页面内容为： <script type="text/javascript">var wifi_mode = "AP"; function init() { document.form_wmode.wifi_mode.value=wifi_mode; } </script> wifi_mode为页面中的一个变量，可以自由定义，CFG_WMODE 是汉枫定义的动态变量名，表示工作模式包括AP、STA、APSTA，可以根据“定制网页CONFIG列表.xls”文件获取所有参数对应的动态变量名及其值的含义。 3. HTML文件编写HTML文件编写规则与普通的HTML完全相同，但是需要把JS放在同一页面的< script >标签中，CSS放在< style >标签中。 4. 用例下面以“模式设置页面”为例：页面如下： HTML源码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <script type="text/javascript"> *******此处写需要获取的变量值，以动态区获取：********/*<% CONFIG_VAR(wifi_mode, CFG_WMODE); %>*/ function init() { document.form_wmode.wifi_mode.value=wifi_mode; } </script><style>.div_c{ margin-left:50px; margin-right:50px; margin-top:50px; margin-bottom:50px;}.w_s15_b{ color:White; font-size:15px; font-weight:bold;}.sp_120{ width:10px; height:120px; }.lab_4{ margin-left:70px; margin-right:50px; color:white; font-size:13px;}.sp_20{ height:20px; width:500px;}.tr{ text-align:center;}.in_body{ margin-top:0px; margin-left:0px; margin-right:0px; margin-bottom:0px; background-color:transparent;}.btn{ width:66px; height:27px; border-style:none; border-radius:3px 3px 3px 3px; font-size:14px; color:#0163AC; cursor:pointer;}</style></head><body class="in_body" onload="init()"> <div class="div_c" style="font-family:微软雅黑"> <form name= "form_wmode" method="post" action="do_cmd_cn.html"> <divstyle="height:400px;"> <font class="w_s15_b">模式选择</font> <div class="sp_120"></div> <div class="lab_4" style="margin-left:120px">模式选择：<select name="wifi_mode" style="width:150px"><option value="APSTA">AP+STA模式</option><option value="AP">AP 模式</option><option value="STA">STA 模式</option></select> </div> <div class="sp_20"></div> <div style="width:10px; height:10px"></div> <div style="width:100%;" class="tr"><input onclick="submit()" type="button" class="btn" value="保存"/></div> </div> </form> </div></body></html> 通过模块内嵌的WEB服务器解析后的页面代码如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <script type="text/javascript">*******根据动态区获取相应的变量值******** var wifi_mode = "AP"; function init() { document.form_wmode.wifi_mode.value=wifi_mode; } </script><style>.div_c{ margin-left:50px; margin-right:50px; margin-top:50px; margin-bottom:50px;}.w_s15_b{ color:White; font-size:15px; font-weight:bold;}.sp_120{ width:10px; height:120px; }.lab_4{ margin-left:70px; margin-right:50px; color:white; font-size:13px;}.sp_20{ height:20px; width:500px;}.tr{ text-align:center;}.in_body{ margin-top:0px; margin-left:0px; margin-right:0px; margin-bottom:0px; background-color:transparent;}.btn{ width:66px; height:27px; border-style:none; border-radius:3px 3px 3px 3px; font-size:14px; color:#0163AC; cursor:pointer;}</style></head><body class="in_body" onload="init()"> <div class="div_c" style="font-family:微软雅黑"> <form name= "form_wmode" method="post" action="do_cmd_cn.html"> <divstyle="height:400px;"> <font class="w_s15_b">模式选择</font> <div class="sp_120"></div> <div class="lab_4" style="margin-left:120px">模式选择：<select name="wifi_mode" style="width:150px"><option value="APSTA">AP+STA模式</option><option value="AP">AP 模式</option><option value="STA">STA 模式</option></select> </div> <div class="sp_20"></div> <div style="width:10px; height:10px"></div> <div style="width:100%;" class="tr"><input onclick="submit()" type="button" class="btn" value="保存"/></div> </div> </form> </div></body></html>更新时间：2014.10.31
页:
[1]