TPM（ThinkPHP Mobile）使用简明教程

三 使用说明

1 运行原理

之前我们在部署项目的时候发现ThinkPHP开启了layout，其实浏览器浏览网站时使用的layout文件是Tpl/layout.html， 而打包成手机APP后，layout文件其实是 Tpl/index.html ， 我们用编辑器打开 Tpl/index.html文件， 发现里面多加载了一个js文件：TPM.js 。 在手机APP上运行时,TPM.js文件负责解析ThinkPHP模板标签和自动请求接口。

Tpl/index.html 中需要有这两个层：

1. <div id="main"></div>
2.  <div class="ajax_wait">正在加载中...</div>

TPM会把每次渲染模板的结果放到ID为main的层中。 class为ajax_wait的层 是在请求接口的时候会显示，我们可以在css文件中定义ajax_wait的样式。

2 模板标签

我们知道在手机APP中并没用PHP运行环境，解析ThinkPHP模板标签的是js，ThinkPHP的大部分模板标签都可以正常使用，但也有一些限制，比如模板标签中不能用PHP的函数，所以也不能在模板中使用U函数。

支持的ThinkPHP模板标签有：

volist,foreach,for,empty,notempty,present,notpresent,eq,neq,heq,nheq,egt,gt,elt,lt,if,elseif,else,switch,case,default,in,notin,between,notbetween,include。

include标签在使用时有点限制，file属性必须写明控制器和方法，不能省略控制器。 如

<include file="Action:method" />

不能省略Action。如果有分组也不能省略分组。 其他标签的用法不变。

TPM未实现的标签有： defined，define等

TPM未实现 __URL__，__PUBLIC__，__ROOT__，__SELF__ 等模板替换变量。

大家需要在模板中写固定的URL ， 以斜杠开头。URL地址格式为： /Action/method

3 独立手机APP的模板

我们如果希望网站模板和手机APP模板分离，可以定义项目配置:

'TPM_THEME'=>'mobile'

然后在Tpl目录下建立一个mobile文件夹。 在mobile文件夹中放置手机APP的模板。 这样如果是浏览器浏览网站首页，程序渲染的模板是Tpl/Index/index.html， 如果是手机APP打开，渲染的首页模板是 Tpl/mobile/Index/index.html .

4 配置说明

Tpl/index.html文件中需要加载TPM.js以及运行TPM ， 运行TPM的代码是：

TPM.run(config)

TPM.run传递的config参数是配置项。 以对象形式传递。 可以设置的主要配置有：

api_base： 项目入口文件地址, http开头。

api_index： 首次请求的控制器方法，默认为/Index/index

下面举例说明一下这些配置项。

假设我们创建了一个项目， 入口文件的浏览地址是 http://www.xxx.com/index.php , 我们想手机APP打开的第一个页面不是首页，而是登陆页，登陆页的浏览地址假设是： 

http://www.xxx.com/index.php/Index/login

那么TPM.run的传参如下：

1. TPM.run({
2.     api_base:'http://www.xxx.com/index.php',
3.     api_index:'/Index/login'
4.  });

如果你的项目做了隐藏入口文件的处理，那么api_base也可以不写入口文件，配置为：

1. TPM.run({
2.     api_base:'http://www.xxx.com',//注意，末尾不带斜杠
3.     api_index:'/Index/login'
4.  });

如果只想配置api_base这个参数，其他参数使用默认值，只传递一个网址作为参数：

TPM.run('http://www.xxx.com')

5 元素监听

我们做一些js效果，往往会监听元素事件，比如：

1. <script>
2. $(document).ready(function(){
3.     $('#id').click(function(){
4.     alert('click');
5. });
6. });
7.  <script>

这段代码监听一个元素的点击事件，但在TPM中这样监听可能会失效， 因为这种监听方式不能监听到新生的元素， 而TPM 的界面都是 请求接口渲染模板后新生的， 新生的内容会放在Tpl/index.html 文件中main层中。在TPM中要对这种新生的元素进行事件监听，可以使用TPM.ready，用法如下：

1. <script>
2. TPM.ready(function($){
3. $('#id').click(function(){
4.     alert('click');
5. });
6. });<script>

TPM还有很多特性，它不仅能和ThinkPHP结合， 也可以结合自己已有的接口。还有一些附件插件帮助我们实现一些常用功能。 其他高级的用法我们会陆续发布使用文档，大家敬请期待。

 TPM(ThinkPHP Mobile)下载地址：http://down.admin5.com/php/tpm.html

 3/3   首页 上一页 1 2 3