ThinkPHP Mobile使用方法简明教程

一、基础知识

1.手机app的类型

移动端的应用有这几种：webapp，nativeapp，hybridapp。

webapp 就是手机网站，需要用手机浏览器访问。

nativeapp是用原生语言开发，用户需要下载安装的手机应用。 nativeapp的开发成本很高，每个平台的开发语言都不一样， 比如ios的开发语言是object c ， android系统的app需要用java开发， windowsphone 则需要用 c# 开发。那么我们如果需要做一个多平台都能运行的app，需要用多种语言重复开发多次。
相对于nativeapp来说, webapp开发就简单多了， 用html,css,js就可开发webapp， 而且开发一次跨多个平台。但是webapp 需要用户打开手机浏览器输入网址才能访问，而且不能像nativeapp 能调用手机的摄像头，通讯录等功能。webapp的html,css,js图片等静态资源在服务器上，用户需要下载，会消耗用户更多的流量。 而nativeapp的静态资源在手机本地。

hybridapp中和了nativeapp和webapp各自的优势。 我们可以用html,css,js 开发，兼容多个平台。用户也要下载安装，并能调用手机的摄像头、通讯录等功能， hybridapp的静态资源也在手机本地。

我们知道thinkphp的模板也是用html,css,js 开发的。所以我们想能否将thinkphp的模板直接打包成手机app？让我们能一次开放同时拥有电脑版网站，手机版网站和手机app， 因此才有了tpm的诞生。tpm能让我们将thinkphp的模板打包成一个hybridapp。

2.手机app的一般架构

很多手机app的数据都是动态获取的，我们需要给app提供接口，让app请求接口获取数据。 不管你是开发navtiveapp 还是 hybridapp， 都需要给app提供接口。

传统的hybridapp 开发方式任然需要我们为app开发一个接口程序， 我们还要用js写调用接口的ajax的代码。
如果使用tpm开发，不用特意写接口程序，也不用写ajax调用接口的程序 。 我们还是按照开发网站的方式开发手机客户端，在
action中指派模板变量， 在模板中使用模板变量。 当我们将模板打包成app时，app能自动请求action，然后渲染对应的模板，这时候请求action时，action会自动返回json格式数据。

3.其他手机开发的知识

我们要开发好手机app，还需要了解更多手机开发的知识。 手机的尺寸大小不一样，所有我们的界面一般不能写成固定尺寸的， 要做响应式设计。 建议大家了解一下响应式设计的知识。 也可以结合一些ui框架，如bootstrap、purecss 他们自带对响应式的支持。
建议大家再阅读一下《移动端webapp开发必备知识》
http://www.qianduan.net/mobile-webapp-develop-essential-knowledge.html

二、环境搭建

首先你需要建立一个包含tpm的thinkphp项目。 你可以在thinkphp官方网站上下载tpm， 也可以中github中获得。 github的地址是：
https://github.com/liu21st/extend/tree/master/extend/tool/tpm
将下载的文件中， tpl目录下的文件复制到你的项目文件夹下tpl目录中。将switchmobiletplbehavior.class.php 复制到 项目目录下 lib/behavior 目录下，将templatemobile.class.php 文件复制到 thinkphp/extend/driver/template 下。
项目需要开启layout ， 在项目配置文件中配置：

'layout_on'=>true

在项目的conf文件夹下建立tags.php ,代码为：

<?php 
 return array( 
 'action_begin'=>array('switchmobiletpl')
 )

如果想手机客户端支持页面跳转，需要修改核心文件 thinkphp/common/functions.php 中得redirect函数，修改为：

function redirect($url, $time=0, $msg='') {
  //多行url地址支持
  $url    = str_replace(array("\n", "\r"), '', $url);
  if (empty($msg))
    $msg  = "系统将在{$time}秒之后自动跳转到{$url}！";
  if (!headers_sent()) {
    // redirect
    if (0 === $time) {
      //手机客户端跳转发送redirect的header
      if(defined('is_client') && is_client){
        if(''!==__app__){
          $url=substr($url,strlen(__app__));
        }
        header('redirect:'.$url);
      }else{
        header('location: ' . $url);
      }
    } else {
      header("refresh:{$time};url={$url}");
      echo($msg);
    }
    exit();
  } else {
    $str  = "<meta http-equiv='refresh' content='{$time};url={$url}'>";
    if ($time != 0)
      $str .= $msg;
    exit($str);
  }
 }

编辑器打开tpl/index.html文件，修改代码

tpm.run("http://yourappurl"); 

将网址修改为你项目的真实访问地址。
然后，我们可将模板目录打包成手机app 。
首先打开你的命令行， cd 到模板目录， 运行命令：

php build.php 

然后我们发现在模板目录会生成手机app文件， 我们在手机上面安装即可。
命令行打包程序需要你的环境开启zip和curl扩展，如果不清楚的话请自行百度解决。
注意：打包命令需要联网，如果没有联网的话 可以用第三方打包工具例如phonegap打包。

打包命令还可以跟更多参数：
php build.php <platform> <name> <package> <version>

参数说明：

platform ：输入android或ios, 默认为android，现在还不支持ios打包，大家敬请期待。
name ：应用名称， 默认为tpm 。
package： 应用的包名，如：com.think.yourname ，一般为一个域名的倒序。 默认为 cn.thinkphp.tpm
version: 应用版本， 默认为1.0

三 使用说明

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 中需要有这两个层：

<div id="main"></div>
 <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的传参如下：

tpm.run({
  api_base:'http://www.xxx.com/index.php',
  api_index:'/index/login'
 });

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

tpm.run({
  api_base:'http://www.xxx.com',//注意，末尾不带斜杠
  api_index:'/index/login'
 });

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

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

5.元素监听

我们做一些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>

tpm还有很多特性，它不仅能和thinkphp结合， 也可以结合自己已有的接口。还有一些附件插件帮助我们实现一些常用功能。