程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 網頁編程 >> PHP編程 >> PHP綜合 >> ThinkPHP Mobile使用方法簡明教程

ThinkPHP Mobile使用方法簡明教程

編輯:PHP綜合

一、基礎知識

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結合, 也可以結合自己已有的接口。還有一些附件插件幫助我們實現一些常用功能。

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved