HYBBS APP模板开发规范模板开发涉及技术:
模板引擎介绍 模板编译引擎还是一样使用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>
|