ThinkPHP Mobile使用方法簡単教程

7898 ワード

一、基礎知識
1.携帯アプリの種類
モバイル端末の応用にはこれらの種類があります。WebApp、NativeApp、HyridApp。
WebAppは携帯サイトで、携帯ブラウザでアクセスする必要があります。
NativeAppはネイティブ言語で開発され、ユーザーはインストールされた携帯電話アプリケーションをダウンロードする必要があります。NativeAppの開発コストはとても高く、プラットフォームごとに開発言語が異なります。例えば、IOSの開発言語はobject C、AndroidシステムのAPPはJavaで開発する必要があります。WindowsPhoneはCで開発する必要があります。私たちはマルチプラットフォームで実行できるAPPを作る必要があれば、多言語で何度も繰り返し開発する必要があります。
NativeAppに対して、WebAppは開発が簡単で多くなりました。これを使って、css、jsはWebAppを開発することができます。しかし、WebAppはユーザーが携帯ブラウザを開いてURLを入力してからアクセスする必要があります。また、NativeAppのように携帯電話のカメラや通信録などの機能を起動することができません。WebAppのhtml、css、jsのピクチャーなどの静的な資源はサーバーの上で、ユーザーはダウンロードしなければならなくて、ユーザーのもっと多い流量を使うことができます。NativeAppの静的資源は携帯電話のローカルにあります。
HybridAppはNativeAppとWebAppのそれぞれの強みを中和しました。私達はhtmlを使うことができて、css、jsは開発して、複数のプラットフォームを互換します。ユーザーもインストールをダウンロードして、携帯電話のカメラや通信記録などの機能を呼び出すことができます。HyridAppの静的な資源も携帯電話のローカルにあります。
ThinkPHPのテンプレートもHTML、CSS、JSで開発されていることを知っています。ですから、ThinkPHPのテンプレートを直接携帯アプリに包んでもらえますか？一回開放して同時にコンピュータ版のウェブサイトを持つことができて、携帯版のウェブサイトと携帯APP、そのためTPMの誕生があります。TPMはThinkPHPのテンプレートをHyridAppに包装してくれます。
2.携帯APPの一般的なアーキテクチャ
多くの携帯APPのデータはダイナミックに取得されています。APPにインターフェースを提供して、APPにデータを取得してもらう必要があります。NavtiveAppを開発するにも、HybiridAppを開発するにも、APPにインターフェースを提供する必要があります。
従来のHybridAppの開発方式は、APPのためのインターフェースプログラムを開発する必要があります。また、インターフェースを呼び出すajaxのコードをjsで書く必要があります。
TPMを使って開発すれば、わざわざインターフェースプログラムを書く必要もないし、ajax呼び出しインターフェースのプログラムを書く必要もないです。私達はやはりウェブサイトを開発する方式によって携帯電話のクライアントを開発して、
アクションではテンプレート変数を割り当て、テンプレート変数を使用します。テンプレートをAPPに包装すると、APPは自動的にアクションを要求し、対応するテンプレートをレンダリングすることができます。ここでアクションを要求すると、アクションは自動的にJsonフォーマットデータに戻ります。
3.他の携帯電話の開発知識
私たちは携帯アプリを開発したいです。携帯の開発についてもっと知る必要があります。携帯のサイズは違っています。私たちのインタフェースは固定サイズではなく、応答式の設計をします。応答式設計の知識を知ることをお勧めします。また、いくつかの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ディレクトリにコピーします。Switch MobileTplBehavior.class.phpをプロジェクトディレクトリ下のLib/Behaviorディレクトリにコピーして、TemplateMobile.class.phpファイルをThinkPHP/Exted/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("
", "\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.ファイルを開いて、コードを修正します。

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

ウェブサイトをあなたのプロジェクトの実際のアクセスアドレスに修正します。
それから、テンプレートのカタログを携帯アプリに包装します。
まず、あなたのコマンドラインを開きます。cdはテンプレートディレクトリに行き、コマンドを実行します。


php build.php

そして、私たちはテンプレートディレクトリで携帯アプリのファイルを作成することを発見しました。携帯電話にインストールすればいいです。
コマンドラインのパッケージはあなたの環境が必要です。zipとcurlの拡張は不明なら自分で解決してください。
注意：梱包コマンドはネットワークが必要です。もしネットワークがないなら、第三者包装ツール、例えばphonegapで包装してもいいです。
パッケージコマンドはさらに多くのパラメータと一緒に使用できます。
php build.php
パラメータの説明:
plotform：Androidまたはiosを入力して、デフォルトはAndroidです。まだIOSパッケージはサポートされていません。ご期待ください。
name：名称を適用して、デフォルトはTPMです。
package：アプリケーションのパッケージ名、例えば：comp.think.yournameは、一般的にドメイン名の倒順です。デフォルトはcn.thinkphp.tpmです。
version:アプリケーションバージョン、デフォルトは1.0です。
三使用説明
1.運転原理
以前、私達はプロジェクトを展開する時にThinkPHPがlayoutを開いていることを発見しました。実はブラウザでウェブサイトを閲覧する時に使うlayoutファイルはTpl/layoutです。携帯APPに包装した後、layoutファイルはTpl/indexです。エディタでTpl/index.ファイルを開けました。携帯アプリで動作する場合、TPM.jsファイルはThinkPHPテンプレートラベルと自動要求インターフェースの解析を担当します。
Tpl/index.にはこの二つの層が必要です。


<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、empy、notempty、present、not present、eq、neq、heq、nheq、egt、gt、elt、if、elseife、else、switch、case、default、in、beintwen、berten、betwene。
includeラベルは使用に制限があります。file属性はコントローラと方法を明記しなければなりません。コントローラを省略することはできません。如き


<include file="Action:method" />

アクションは省略できません。グループがある場合もグループは省略できません。他のラベルの使い方は変わりません。
TPM未実現のラベルは、defined、defineなどがあります。
TPMが実現していないURL_，_PUBLIC_，_ROOT_，_SELF_uなどのテンプレートに変数を置換します。
皆さんはテンプレートに固定URLを書いて、スラッシュで始めます。URLアドレスフォーマットは：／アクション／method
3.独立携帯APPのテンプレート
私達がウェブサイトのテンプレートと携帯APPテンプレートの分離を望むなら、プロジェクトの配置を定義できます。


'TPM_THEME'=>'mobile'

そしてTplディレクトリの下にmobileフォルダを作成します。モバイルフォルダには、携帯APPのテンプレートを配置します。このようにブラウザがウェブサイトのトップページをブラウズするならば、プログラムのレンダリングするテンプレートはTpl/Index/index.で、もし携帯APPが開けるならば、レンダリングするトップページのテンプレートはTpl/mobile/Index/index.です。
4.配置説明
Tpl/index.ファイルにTPM.jsをロードし、TPMを実行する必要があります。TPMを実行するコードは：


TPM.run(config)

TPM.run転送のconfigパラメータは構成項目である。オブジェクト形式で伝える。設定できる主な設定は以下の通りです。
api_base：プロジェクトの入り口のファイルの住所、http先頭。
api_index：最初に要求されたコントローラの方法は、デフォルトは/Index/indexです。
これらの構成項目を例に挙げて説明します。
プロジェクトを作成したと仮定します。入り口のファイルの閲覧住所は？http://www.xxx.com/index.php 私達は携帯アプリの最初のページはトップページではなく、登録ページの閲覧住所を仮定したいです。
http://www.xxx.com/index.php/Index/login
TPM.runの参は以下の通りです。

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

もしあなたのプロジェクトがエントランスファイルを隠す処理をしたら、appi_ベースは入口ファイルを書かなくてもいいです。

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

アプリだけをセットしたいならベースというパラメータは、他のパラメータはデフォルト値を使用して、一つのURLだけをパラメータとして伝達します。

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

5.元素傍受
私達はいくつかjsの効果をして、よく元素の事件を傍聴します。

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

このコードは一つの要素のクリックイベントを傍受しますが、TPMでこのように傍受すると失効する可能性があります。このような傍受方式では新入生の要素を傍受できません。TPMのインターフェースはすべてインターフェースにテンプレートをレンダリングしてから新しくなります。新しい内容はTpl/index.ファイルの中にmain層に置かれます。TPMにおいてこのような新生元素に対してイベントの傍受を行うには、TPM.readyを使用することができます。使い方は以下の通りです。

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

TPMはまだ多くの特性があります。ThinkPHPと結合するだけでなく、自分の持っているインターフェースと結合することもできます。いくつかの添付プラグインがあります。私たちの一般的な機能を実現してくれます。

Node.jsを利用して大量にハイビジョンの妹のピクチャーの実例の教程をつかみ取ります。

WeChatアプリでwatchとcomputedを使う方法