MetInfo帮助中心
网站首页
新手建站
米拓流程
使用手册
常见问题
模板制作教程
商业模板修改教程
应用开发教程
应用开发文档
轻松开发企业应用
[TOC] `文档更新日期:2020.1.13` ##应用demo [应用示例文件下载](../upload/file/app_test.zip "应用示例文件下载")(更新日期:2020.1.10) demo地址:`网站后台地址/#/app/test` demo地址(传统地址方式加载):`网站后台地址/?n=test&c=index&a=doindex` ##后台地址栏路由 `网站根目录/后台文件夹名/#/`后面的字符串就是各个模块的页面路由和参数。 路由结构:`(模块/应用名)/模板文件路径(可继续加目录,后一个为文件名)../?参数名=值&参数名=值...`(应用路由需要加`app/`前缀); 参数数据会传到模板文件中的默认变量`$data`中。 路由参数中可定义模板文件加载前的预处理方法,执行预处理方法的返回值会输出到模板文件中的默认变量`$data['handle']`中。 路由参数定义预处理方法:`(模块/应用名)/模板文件路径../?n=(模块/应用名)&c=类名&a=方法名&其他参数...`。(路由中的参数会合并为一个数组传到预处理方法的唯一变量中,当`n`的值和模板文件的模块/应用名一样时,可以不写该值) 例如: ```php 路由:'app/shop/index/?n=shop&c=index&a=dogetlist&id=1&type=1' 加载模板文件:'app/app/shop/admin/templates/index.php' 预处理方法:'app/app/shop/admin/index.class.php'=>index类=>dogetlist方法名 public function dogetlist(){ // 打印结果 array( id=>1, type=>1 ) reurn array(1,2); } 模板文件中: dump($data['handle']); // 打印结果 array(1,2) ``` **后台路由文件:**`app\static\admin\js\routers.js`。定义需要加载的页面的模板文件和css/js文件。 ###后台各模块js的格式 ```js (function(){ var that=$.extend(true,{}, admin_module),//模块信息 obj=that.obj;//模块dom ... // 页面再次加载时执行的操作 TEMPLOADFUNS[that.hash]=function(){ ... }; })(); ``` ##模板文件 模板文件直接写业务代码即可,不需要调用公用头部底部,页面会显示在后台右侧区块。 后台模板标签和前台模板的标签一样,包括`
`、`
`等,变量加载的写法也一样,字段间的中括号用`.`代替 ### 模板默认变量 - $data:包括预处理方法返回的数据,以及请求路径传过来的参数 - $c:系统参数 - $word:语言文字 - $url:系统各路径 包括: ```php $url['own']:模板所属模块的前/后端目录 $url['own_tem']:模板所属模块的模板目录 $url['own_name']:模板所属模块的路由,例如:`网站根目录/后台文件夹名/index.php?lang=cn&n=(模块/应用名)& ``` ###include标签 ```html
``` `file`值前缀代表的解析值: - **app:**当前模块/应用的模板目录`app/(模块/应用名)/(前后端名)/templates/`; 例如在简介模块后台页面模板中调用`
`,file解析为`app/system/about/admin/templates/index.php`。 - **apps:**系统应用目录`app/app/`; - **sys:**系统模块目录`app/system/`; - **pub:**系统模块/应用公用模板目录`app/system/include/templates/当前端(admin、web)/`; - **sys_admin:**系统模块/应用后台公用模板目录(旧)`app/system/include/public/ui/admin/`; - **sys_web:**系统模块/应用前台公用模板目录(旧)`app/system/include/public/ui/admin/`; - **site:**网站根目录; - **ui_v2:**前台模板前端框架目录`public/ui/v2/`; - **ui_ajax:**前台模板列表页默认列表循环文件目录`public/ui/v2/module/ajax/`; ##metui.use(module) **js中执行该函数可调用系统或自定义的模块/插件文件。** **module:**模块/插件名,例如`metui.use('form')`; 查看前端框架定义的模块/插件配置`app/static/js/configs.js`; 默认会调用该模块/插件文件:`app/static/modules/(模块/插件文件名)/(模块/插件文件名).js`。 自定义模块/插件文件路径(`不能和已定义模块/插件名相同`): 例如: ```js metui.modules[模块/插件名]={ css:{ 路径1, 路径2 }, // 没有则不定义,如只有一个css文件,则可以定义为单个路径字符串,如———css:'style' js:'模块/插件名' } // 文件路径不要写后缀名,默认调用【app/static/modules/(模块/插件名)/】下的文件 调用模块/插件: metui.use(模块/插件名); // 路径前缀解析值 #static:'app/static/', #modules:'app/static/modules/', #fonts:'app/static/fonts/', #sys:'app/system/', #app:'app/app/' // 例如:js:'#modules/form/form.js',路劲解析为'app/static/modules/form/form.js' ``` ##ajax加载模板页面代码 `一般用不到,只有特殊需求才用到此方法` ```js path:模板文件路径,// 不需要写后缀名,前缀规则和
标签一样,只不过前缀前要加'#',不加前缀时框架会默认添加前缀‘#sys/’ // 路径后面也可以添加输出到模板页面的参数,也可以自定义预处理方法,参数及预处理方法规则与后台地址路由的规则一样 data:自定义输出到模板页面的参数 html:返回的模板页面html代码 metLoadTemp(path,data,function(html){ }) ``` ## tab页面模板 ### 普通模式切换tab 多个页面通过同个tab进行切换时,每个tab页面头部都要插入如下格式代码 ```php 'test',url=>'#/app/test'), // 等于array(title=>'test',url=>'#/app/test/index'),默认会加载&c=index&a=doindex的方法 // 此处路由规则和后台地址栏路由规则一致 array(title=>'asdas',url=>'#/app/test/info',target=>1)// target等于1为新窗口打开 ); ?>
...页面内容 ``` ![](../upload/202001/157848020349249.png) ### ajax模式切换tab 该方式不需要每个tab子页面都引入`pub/head_tab`,由引导页index和其余tab子页面组成,地址栏地址为引导页路由,引导页格式如下 ```php 'test',url=>'app/test'), // 等于array(title=>'test',url=>'app/test/index'),默认会加载&c=index&a=doindex的方法 // 此处路由规则和后台地址栏路由规则一致 array(title=>'info',url=>'app/test/info',target=>1)// target等于1为新窗口打开 ); ?>
``` ### 表格ajax加载 表格中的html依然可以用以前的接口返回内容,详情见`测试应用demo` js代码规范如下 ``` /* 应用后台模板js规范: 在应用的模板文件夹下的js文件夹中创建跟应用名称相同的js文件 例如:test应用后台模块的模板文件夹下创建test.js app/app/test/admin/templates/js/test.js */ $(function(){ var that=$.extend(true,{}, admin_module); // 模板页面的ajax表格加载方法 TEMPLOADFUNS['应用名称/模板文件名称']=function () { M.component.commonList(); }; // 例如:test应用的后台模板文件test_a.php中有个表格,则表格加载方法如下 TEMPLOADFUNS['test/test_a']=function () { M.component.commonList(); }; // 如果是应用tab选项卡页面不是以ajax模式切换,即应用模板的tab导航中没有定义$head_tab_ajax=1;,则要加上一行以下代码 TEMPLOADFUNS[that.hash](); }); ``` ##应用模板加载传统方式 - 加载方式 7.0加载应用模板是先加载后台首页侧栏,再加载应用模板代码,传统方式为直接加载应用模板代码 传统方式路由:`后台地址?n=应用名&c=类名&a=方法名&target=1`,测试应用地址:`后台地址?n=test&c=index&a=doindex&target=1`。 ![](../upload/202001/157848053276952.png) - 页面结构 ```php
业务代码...
``` 如果不想显示头部tab切换和返回顶部按钮,地址栏后加参数`notab=1`。 `传统方法的tab切换地址定义和调用都在后台定义`,详情见`测试应用demo` - css、js调用 `系统自动调用应用css/js文件夹中和应用同名的文件。` js初始化表格的方式和7.0机制的方式写法略有不同 ```js $(function(){ metui.use('table',function(){ var table_id='#test-table'; $(table_id).attr({'data-table-ajaxurl':$(table_id).data('ajaxurl')}); $('.test-form1').metDataTable(); }); }); ```