一、背景
移动端的应用有三种：WebApp，NativeApp，HybridApp。
1、WebApp 就是手机网站，需要用手机浏览器访问。
图1——移动版 图2——淘宝网手机版
2、NativeApp是用原生语言开发，用户需要下载安装的手机应用。 NativeApp的开发成本很高，每个平台的开发语言都不一样， 比如IOS的开发语言是Object C ， Android系统的APP需要用Java开发， WindowsPhone 则需要用 C# 开发。那么我们如果需要做一个多平台都能运行的APP，需要用多种语言重复开发多次。
相对于NativeApp来说, WebApp开发就简单多了， 用html,css,js就可开发WebApp， 而且开发一次跨多个平台。但是WebApp 需要用户打开手机浏览器输入网址才能访问，而且不能像NativeApp 能调用手机的摄像头，通讯录等功能。WebApp的html,css,js图片等静态资源在服务器上，用户需要下载，会消耗用户更多的流量。 而NativeApp的静态资源在手机本地。
3、HybridApp中和了NativeApp和WebApp各自的优势。 我们可以用html,css,js 开发，兼容多个平台。用户也要下载安装，并能调用手机的摄像头、通讯录等功能， HybridApp的静态资源也在手机本地。我们知道ThinkPHP的模板也是用HTML,CSS,JS 开发的。所以我们想能否将ThinkPHP的模板直接打包成手机APP？让我们能一次开放同时拥有电脑版网站，手机版网站和手机APP， 因此才有了TPM的诞生。TPM能让我们将ThinkPHP的模板打包成一个HybridApp。
二、TMP与Phonegap和AppCan对比
PhoneGap是免费的，但是它需要特定平台提供的附加软件，例如iPhone的iPhone SDK，Android的Android SDK等，也可以和DW5.5配套开发。使用PhoneGap只比为每个平台分别建立应用程序好一点点，因为虽然基本代码是一样的，但是你仍然需要为每个平台分别编译应用程序。
传统的HybridApp 开发方式任然需要我们为APP开发一个接口程序， 我们还要用js写调用接口的ajax的代码。如果使用TPM开发，不用特意写接口程序，也不用写ajax调用接口的程序 。
Phonegap只是提供本地API，以及一个打包器，大部分的UI、UE的都是交由Phonegap推荐的jquerymobile，sencha touch等js+css框架来实现。而为何Phonegap比较受大家关注呢，一方面是它出来比较早，推广时间较长；另一方面它是开源的，很多android native开发者都对其进行了插件扩展，能够满足一些开发需求。
TMP相对Phonegap来说做了进一步的封装，但是是刚出来的，存在的问题还是挺多了。官方还在进一步的完善。
三、TPM Demo
图1——安卓客户端版 图2——WebApp版
四、TPM环境搭建
首先你需要建立一个包含TPM的ThinkPHP项目。
1、 Tpl目录下的文件复制到你的项目文件夹下Tpl目录中。将SwitchMobileTplBehavior.class.php 复制到 项目目录下 Lib/Behavior 目录下，将TemplateMobile.class.php 文件复制到 ThinkPHP/Extend/Driver/Template 下。
2、项目需要开启layout ， 在项目配置文件中配置：'LAYOUT_ON'=>true
3、在项目的Conf文件夹下建立tags.php ,代码为：
<?php
return array(
'action_begin'=>array('SwitchMobileTpl')
)
4、编辑器打开Tpl/index.html文件，修改代码：TPM.run("http://yourappurl");
将网址修改为你项目的真实访问地址。然后，我们可将模板目录打包成手机APP 。 首先打开你的命令行， cd 到模板目录， 运行命令：php build.php
然后我们发现在模板目录会生成手机APP文件， 我们在手机上面安装即可。 命令行打包程序需要你的环境开启zip和curl扩展，如果不清楚的话请自行百度解决。
注意：打包命令需要联网，如果没有联网的话 可以用第三方打包工具例如phonegap打包。
打包出现的问题：
1、开启zip和curl扩展
2、网络异常: TPM.run("http://yourappurl");网址修改为你项目的真实访问地址加’/index.php/’
3、Application Error The connection to the server was
unsuccessful.(file:///android_asset/www/index.html)：站点在局域网或互联网能够正常访问
5、打包命令还可以跟更多参数：php build.php <platform> <name> <package> <version>
参数说明：
platform ：输入android或ios, 默认为android，现在还不支持IOS打包，大家敬请期待。
name ：应用名称， 默认为TPM 。
package： 应用的包名，如：com.think.yourname ，一般为一个域名的倒序。 默认为 cn.thinkphp.tpm
version: 应用版本， 默认为1.0
五、TPM运行原理
之前我们在部署项目的时候发现ThinkPHP开启了layout，其实浏览器浏览网站时使用的layout文件是Tpl/layout.html， 而打包成手机APP后，layout文件其实是 Tpl/index.html ， 我们用编辑器打开 Tpl/index.html文件， 发现里面多加载了一个js文件：TPM.js 。 在手机APP上运行时,TPM.js文件负责解析ThinkPHP模板标签和自动请求接口。
Tpl/index.html 中需要有这两个层：
<div id="main"></div>
<div class="ajax_wait">正在加载中...</div>
TPM会把每次渲染模板的结果放到ID为main的层中。 class为ajax_wait的层 是在请求接口的时候会显示，我们可以在css文件中定义ajax_wait的样式。
六、TPM模版标签
在手机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
七、TPM独立手机APP的模板
我们如果希望网站模板和手机APP模板分离，可以定义项目配置: 'TPM_THEME'=>'mobile'
然后在Tpl目录下建立一个mobile文件夹。 在mobile文件夹中放置手机APP的模板。 这样如果是浏览器浏览网站首页，程序渲染的模板是Tpl/Index/index.html， 如果是手机APP打开，渲染的首页模板是 Tpl/mobile/Index/index.html .
八、TPM元素监听
我们做一些js效果，往往会监听元素事件，比如：
<script>
$(document).ready(function(){
$('#id').click(function(){
alert('click');
});
});<script>
这段代码监听一个元素的点击事件，但在TPM中这样监听可能会失效， 因为这种监听方式不能监听到新生的元素， 而TPM 的界面都是 请求接口渲染模板后新生的， 新生的内容会放在Tpl/index.html 文件中main层中。在TPM中要对这种新生的元素进行事件监听，可以使用TPM.ready，用法如下：
<script>
TPM.ready(function($){
$('#id').click(function(){
alert('click');
});
});<script>