一、基礎(chǔ)知識

1.手機(jī)APP的類型

移動端的應(yīng)用有這幾種：WebApp，NativeApp，HybridApp。

WebApp 就是手機(jī)網(wǎng)站，需要用手機(jī)瀏覽器訪問。

NativeApp是用原生語言開發(fā)，用戶需要下載安裝的手機(jī)應(yīng)用。 NativeApp的開發(fā)成本很高，每個(gè)平臺的開發(fā)語言都不一樣， 比如ios的開發(fā)語言是object C ， Android系統(tǒng)的APP需要用Java開發(fā)， WindowsPhone 則需要用 C# 開發(fā)。那么我們?nèi)绻枰鲆粋€(gè)多平臺都能運(yùn)行的APP，需要用多種語言重復(fù)開發(fā)多次。
相對于NativeApp來說, WebApp開發(fā)就簡單多了， 用html,css,js就可開發(fā)WebApp， 而且開發(fā)一次跨多個(gè)平臺。但是WebApp 需要用戶打開手機(jī)瀏覽器輸入網(wǎng)址才能訪問，而且不能像NativeApp 能調(diào)用手機(jī)的攝像頭，通訊錄等功能。WebApp的html,css,js圖片等靜態(tài)資源在服務(wù)器上，用戶需要下載，會消耗用戶更多的流量。 而NativeApp的靜態(tài)資源在手機(jī)本地。

HybridApp中和了NativeApp和WebApp各自的優(yōu)勢。 我們可以用html,css,js 開發(fā)，兼容多個(gè)平臺。用戶也要下載安裝，并能調(diào)用手機(jī)的攝像頭、通訊錄等功能， HybridApp的靜態(tài)資源也在手機(jī)本地。

我們知道Thinkphp的模板也是用HTML,CSS,JS 開發(fā)的。所以我們想能否將Thinkphp的模板直接打包成手機(jī)APP？讓我們能一次開放同時(shí)擁有電腦版網(wǎng)站，手機(jī)版網(wǎng)站和手機(jī)APP， 因此才有了TPM的誕生。TPM能讓我們將Thinkphp的模板打包成一個(gè)HybridApp。

2.手機(jī)APP的一般架構(gòu)

很多手機(jī)APP的數(shù)據(jù)都是動態(tài)獲取的，我們需要給APP提供接口，讓APP請求接口獲取數(shù)據(jù)。 不管你是開發(fā)NavtiveApp 還是 HybridApp， 都需要給APP提供接口。

傳統(tǒng)的HybridApp 開發(fā)方式任然需要我們?yōu)锳PP開發(fā)一個(gè)接口程序， 我們還要用js寫調(diào)用接口的ajax的代碼。
如果使用TPM開發(fā)，不用特意寫接口程序，也不用寫ajax調(diào)用接口的程序 。 我們還是按照開發(fā)網(wǎng)站的方式開發(fā)手機(jī)客戶端，在
Action中指派模板變量， 在模板中使用模板變量。 當(dāng)我們將模板打包成APP時(shí)，APP能自動請求Action，然后渲染對應(yīng)的模板，這時(shí)候請求Action時(shí)，Action會自動返回json格式數(shù)據(jù)。

3.其他手機(jī)開發(fā)的知識

我們要開發(fā)好手機(jī)APP，還需要了解更多手機(jī)開發(fā)的知識。 手機(jī)的尺寸大小不一樣，所有我們的界面一般不能寫成固定尺寸的， 要做響應(yīng)式設(shè)計(jì)。 建議大家了解一下響應(yīng)式設(shè)計(jì)的知識。 也可以結(jié)合一些UI框架，如bootstrap、purecss 他們自帶對響應(yīng)式的支持。
建議大家再閱讀一下《移動端webapp開發(fā)必備知識》
http://www.qianduan.NET/mobile-webapp-develop-essential-knowledge.html

二、環(huán)境搭建

首先你需要建立一個(gè)包含TPM的Thinkphp項(xiàng)目。 你可以在Thinkphp官方網(wǎng)站上下載TPM， 也可以中g(shù)ithub中獲得。 Github的地址是：
https://github.com/liu21st/extend/tree/master/Extend/Tool/TPM
將下載的文件中， Tpl目錄下的文件復(fù)制到你的項(xiàng)目文件夾下Tpl目錄中。將SwitchMobileTplBehavior.class.php 復(fù)制到 項(xiàng)目目錄下 Lib/Behavior 目錄下，將TemplateMobile.class.php 文件復(fù)制到 Thinkphp/Extend/Driver/Template 下。
項(xiàng)目需要開啟layout ， 在項(xiàng)目配置文件中配置：

'LAYOUT_ON'=>true

在項(xiàng)目的Conf文件夾下建立tags.php ,代碼為：

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

如果想手機(jī)客戶端支持頁面跳轉(zhuǎn)，需要修改核心文件 Thinkphp/Common/functions.php 中得redirect函數(shù)，修改為：

function redirect($url, $time=0, $msg='') {  //多行URL地址支持  $url    = str_replace(array("/n", "/r"), '', $url);  if (empty($msg))    $msg  = "系統(tǒng)將在{$time}秒之后自動跳轉(zhuǎn)到{$url}！";  if (!headers_sent()) {    // redirect    if (0 === $time) {      //手機(jī)客戶端跳轉(zhuǎn)發(fā)送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"); 

將網(wǎng)址修改為你項(xiàng)目的真實(shí)訪問地址。
然后，我們可將模板目錄打包成手機(jī)APP 。
首先打開你的命令行， cd 到模板目錄， 運(yùn)行命令：

php build.php 

然后我們發(fā)現(xiàn)在模板目錄會生成手機(jī)APP文件， 我們在手機(jī)上面安裝即可。
命令行打包程序需要你的環(huán)境開啟zip和curl擴(kuò)展，如果不清楚的話請自行百度解決。
注意：打包命令需要聯(lián)網(wǎng)，如果沒有聯(lián)網(wǎng)的話 可以用第三方打包工具例如phonegap打包。

打包命令還可以跟更多參數(shù)：
php build.php <platform> <name> <package> <version>

參數(shù)說明：

platform ：輸入Android或ios, 默認(rèn)為Android，現(xiàn)在還不支持ios打包，大家敬請期待。
name ：應(yīng)用名稱， 默認(rèn)為TPM 。
package： 應(yīng)用的包名，如：com.think.yourname ，一般為一個(gè)域名的倒序。 默認(rèn)為 cn.thinkphp.tpm
version: 應(yīng)用版本， 默認(rèn)為1.0

三 使用說明

1.運(yùn)行原理

之前我們在部署項(xiàng)目的時(shí)候發(fā)現(xiàn)Thinkphp開啟了layout，其實(shí)瀏覽器瀏覽網(wǎng)站時(shí)使用的layout文件是Tpl/layout.html， 而打包成手機(jī)APP后，layout文件其實(shí)是 Tpl/index.html ， 我們用編輯器打開 Tpl/index.html文件， 發(fā)現(xiàn)里面多加載了一個(gè)js文件：TPM.js 。 在手機(jī)APP上運(yùn)行時(shí),TPM.js文件負(fù)責(zé)解析Thinkphp模板標(biāo)簽和自動請求接口。
Tpl/index.html 中需要有這兩個(gè)層：

<div id="main"></div> <div class="ajax_wait">正在加載中...</div>

TPM會把每次渲染模板的結(jié)果放到ID為main的層中。 class為ajax_wait的層 是在請求接口的時(shí)候會顯示，我們可以在css文件中定義ajax_wait的樣式。

2.模板標(biāo)簽

我們知道在手機(jī)APP中并沒用php運(yùn)行環(huán)境，解析Thinkphp模板標(biāo)簽的是js，Thinkphp的大部分模板標(biāo)簽都可以正常使用，但也有一些限制，比如模板標(biāo)簽中不能用php的函數(shù)，所以也不能在模板中使用U函數(shù)。
支持的Thinkphp模板標(biāo)簽有： 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標(biāo)簽在使用時(shí)有點(diǎn)限制，file屬性必須寫明控制器和方法，不能省略控制器。 如

<include file="Action:method" />

不能省略Action。如果有分組也不能省略分組。 其他標(biāo)簽的用法不變。

TPM未實(shí)現(xiàn)的標(biāo)簽有： defined，define等

TPM未實(shí)現(xiàn) __URL__，__PUBLIC__，__ROOT__，__SELF__ 等模板替換變量。

大家需要在模板中寫固定的URL ， 以斜杠開頭。URL地址格式為： /Action/method

3.獨(dú)立手機(jī)APP的模板

我們?nèi)绻ＭW(wǎng)站模板和手機(jī)APP模板分離，可以定義項(xiàng)目配置:

'TPM_THEME'=>'mobile'

然后在Tpl目錄下建立一個(gè)mobile文件夾。 在mobile文件夾中放置手機(jī)APP的模板。 這樣如果是瀏覽器瀏覽網(wǎng)站首頁，程序渲染的模板是Tpl/Index/index.html， 如果是手機(jī)APP打開，渲染的首頁模板是 Tpl/mobile/Index/index.html .

4.配置說明

Tpl/index.html文件中需要加載TPM.js以及運(yùn)行TPM ， 運(yùn)行TPM的代碼是：

TPM.run(config)

TPM.run傳遞的config參數(shù)是配置項(xiàng)。 以對象形式傳遞。 可以設(shè)置的主要配置有：
api_base： 項(xiàng)目入口文件地址, http開頭。
api_index： 首次請求的控制器方法，默認(rèn)為/Index/index
下面舉例說明一下這些配置項(xiàng)。
假設(shè)我們創(chuàng)建了一個(gè)項(xiàng)目， 入口文件的瀏覽地址是 http://www.xxx.com/index.php , 我們想手機(jī)APP打開的第一個(gè)頁面不是首頁，而是登陸頁，登陸頁的瀏覽地址假設(shè)是：
http://www.xxx.com/index.php/Index/login

那么TPM.run的傳參如下：

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

如果你的項(xiàng)目做了隱藏入口文件的處理，那么api_base也可以不寫入口文件，配置為：

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

如果只想配置api_base這個(gè)參數(shù)，其他參數(shù)使用默認(rèn)值，只傳遞一個(gè)網(wǎng)址作為參數(shù)：

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

5.元素監(jiān)聽

我們做一些js效果，往往會監(jiān)聽元素事件，比如：

<script>$(document).ready(function(){  $('#id').click(function(){  alert('click');});}); <script>

這段代碼監(jiān)聽一個(gè)元素的點(diǎn)擊事件，但在TPM中這樣監(jiān)聽可能會失效， 因?yàn)檫@種監(jiān)聽方式不能監(jiān)聽到新生的元素， 而TPM 的界面都是 請求接口渲染模板后新生的， 新生的內(nèi)容會放在Tpl/index.html 文件中main層中。在TPM中要對這種新生的元素進(jìn)行事件監(jiān)聽，可以使用TPM.ready，用法如下：

<script>TPM.ready(function($){$('#id').click(function(){  alert('click');});});<script>

TPM還有很多特性，它不僅能和Thinkphp結(jié)合， 也可以結(jié)合自己已有的接口。還有一些附件插件幫助我們實(shí)現(xiàn)一些常用功能。

php技術(shù)：ThinkPHP Mobile使用方法簡明教程，轉(zhuǎn)載需保留來源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時(shí)間聯(lián)系我們修改或刪除，多謝。