HYBBS APP模板开发规范

模板开发涉及技术：

  • HTML

  • CSS

  • JavaScript

  • 初级 PHP


模板引擎介绍 模板编译引擎还是一样使用HYPHP，依然支持HOOK,RE插件机制。依然支持{if for include foreach 等快捷标签}，APP模板虽然仍然支持PHP语言，但会有很大限制，无法再使用PHP语言输出数据到模板。


模板开发规范 

头部文件必须命名为 header

尾部文件必须命名为 footer

后缀可以是.php或.html  (推荐使用.php) 

使用php作为模板后缀第一句代码必须是

<?php !defined('HY_PATH') && exit('HY_PATH not defined.'); ?>
下面才是正式模板内容


header 头部文件head标签内必须提前定义三个常量

<script type="text/javascript">
  //定义内核所需常量
  window.VIEW_VERSION = '{#VIEW_VERSION}_'; //模板版本
  window.DATA_VERSION = '{#DATA_VERSION}_'; //数据缓存版本
  window.exp = '{#EXP}';
</script>

然后到注入HTML5+API支持

<!-- 提前注入HTML5+ API -->
<script src="html5plus://ready"></script>

最后加载核心JS文件

<!-- 核心JS资源 -->
<script src="{#RES_WWW}js/core.js?var={#CORE_VERSION}"></script>

核心部分已完成

APP还需要加载 共用资源

<!-- 公用Js资源 -->
<script src="{#RES_WWW}js/mui.min.js?var={#JS_VERSION}"></script>
<script src="{#RES_WWW}js/function.js?var={#JS_VERSION}"></script>
<script src="{#RES_WWW}js/jquery.min.js?var={#JS_VERSION}"></script>
<script src="{#RES_WWW}js/webviewGroup.js?var={#JS_VERSION}"></script>
  
<!-- CSS -->
<link rel="stylesheet" href="{#RES_WWW}css/mui.min.css?var={#CSS_VERSION}"/>
这里可以加上你自己模板的css以及js文件

APP默认采用MUI作为UI基础


APP初始化HTML5+API

<script>
mui.init();
</script>


以上内容组成

<?php !defined('HY_PATH') && exit('HY_PATH not defined.'); ?>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <title>标题</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-siteapp"/>
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="format-detection" content="telephone=no">
  <meta name="format-detection" content="email=no">
  
  
<script type="text/javascript">
  //定义内核所需常量
  window.VIEW_VERSION = '{#VIEW_VERSION}_'; //模板版本
  window.DATA_VERSION = '{#DATA_VERSION}_'; //数据缓存版本
  window.exp = '{#EXP}';
</script>
<!-- 提前注入HTML5+ API -->
<script src="html5plus://ready"></script>
<!-- 核心JS资源 -->
<script src="{#RES_WWW}js/core.js?var={#CORE_VERSION}"></script>
<!-- 公用Js资源 -->
<script src="{#RES_WWW}js/mui.min.js?var={#JS_VERSION}"></script>
<script src="{#RES_WWW}js/function.js?var={#JS_VERSION}"></script>
<script src="{#RES_WWW}js/jquery.min.js?var={#JS_VERSION}"></script>
<script src="{#RES_WWW}js/webviewGroup.js?var={#JS_VERSION}"></script>
  
<!-- CSS -->
<link rel="stylesheet" href="{#RES_WWW}css/mui.min.css?var={#CSS_VERSION}"/>
<link rel="stylesheet" href="{#THEME_WWW}css/app.css?var={#CSS_VERSION}"/> 自己模板 CSS
<link rel="stylesheet" href="{#THEME_WWW}icon/iconfont.css?var={#CSS_VERSION}"/> 自己模板的图标
<script>
//初始化HTML5+API
mui.init();
</script>


</head>
<body>


额外内容

快捷重启APP 用于调试

<script>
//双击APP页面  重启APP
  $(window).dblclick(function(){
    plus.runtime.restart(); //重启APP API
  });
</script>


1
登录后才可发表内容