如何开发到家h5

来自ECJiaWiki
跳转至: 导航搜索

第一步:在h5/extras/controller目录下面创建一个控制器文件

例如:创建一个“touch”的控制器。(touch_controller.php)

h5开发说明11

注:该控制器名必须在contents/app/下有对应的应用,否则无法找到;

第二步:增加控制器方法并加载路由配置

增加init方法:

h5开发说明12

在h5/extras/configs/route.php文件中增加touch/index/init路由:

h5开发说明13

第三步:加载所需css和js

在ecjia-touch.dwt.php下加载所需css和js文件,如加载ecjia_city.css和ecjia.touch.js:

h5开发说明2

h5开发说明1

第四步:创建并显示模板文件

在h5下创建模板文件,例如:创建一个“index.dwt.php”文件:

h5开发说明3

访问第二步创建的路由touch/index/init,显示模板文件:

h5开发说明4

增加模板缓存:

h5开发说明5

第五部:调用接口数据

加载页面数据

例如:调用HOME_DATA接口数据:

h5开发说明6

注:HOME_DATA 常量 需要在apps/touch/classes/ApiRequest/ApiConst.php文件中配置:

h5开发说明7

加载分页数据

例如加载推荐店铺数据,首先需要在分页加载数据的模板页面写对应的模板:

h5开发说明8

   注:data-toggle="asynclist"固定不变,data-loadimg="{$theme_url}dist/images/loader.gif"为加载动画
   data-url="{url path='touch/index/ajax_suggest_store'}"为请求的url,也需要在路由文件中配置,参考步骤2
   data-page="1"默认为1,如需从第n页加载则为n
   ajax_suggest_store方法中请求接口数据,将数据渲染到模板页面返回:

h5开发说明9

注:被渲染的模板用

    <!-- {block name="ajaxinfo"} -->
    内容
    <!-- {/block} -->
包裹,一般为lbi文件:

h5开发说明10