ThinkPHP の使い方に関する簡潔なチュートリアル Mobile_PHP チュートリアル

1.基礎知識

1.モバイルアプリの種類

モバイル アプリケーションには、WebApp、NativeApp、HybridApp などのいくつかの種類があります。

WebApp はモバイル Web サイトであり、モバイル ブラウザーを使用してアクセスする必要があります。

NativeApp は母国語で開発されたモバイル アプリケーションであり、ユーザーはそれをダウンロードしてインストールする必要があります。 NativeApp の開発コストは非常に高く、IOS の開発言語はオブジェクト C、Android システムの APP は Java、Windows Phone は C# など、プラットフォームごとに開発言語が異なります。 。したがって、複数のプラットフォームで実行できるアプリを作成する必要がある場合は、複数の言語で複数回開発する必要があります。
WebApp 開発は NativeApp に比べてはるかに簡単で、html、css、js を使用して開発でき、複数のプラットフォームで同時に開発できます。ただし、WebApp では、ユーザーがモバイル ブラウザを開いて URL を入力してアクセスする必要があり、NativeApp のような携帯電話のカメラ、アドレス帳、その他の機能を呼び出すことはできません。 WebApp の html、css、js 画像やその他の静的リソースはサーバー上にあり、ユーザーはそれらをダウンロードする必要があるため、より多くのユーザー トラフィックが消費されます。 NativeApp の静的リソースは携帯電話に対してローカルです。

HybridApp は、NativeApp と WebApp のそれぞれの利点を中和します。 html、css、jsを使用して開発でき、マルチプラットフォームに対応しています。ユーザーは、HybridApp をダウンロードしてインストールする必要があり、電話機のカメラ、アドレス帳、その他の機能を呼び出すこともできます。HybridApp の静的リソースも電話機に対してローカルです。

ThinkPHP テンプレートも HTML、CSS、JS を使用して開発されていることはわかっています。そこで、ThinkPHP テンプレートをモバイル APP に直接パッケージ化できないだろうか?これにより、コンピューター版の Web サイト、モバイル版の Web サイト、モバイル APP を同時に開くことができるようになり、TPM が誕生しました。 TPM を使用すると、ThinkPHP テンプレートを HybridApp にパッケージ化できます。

2. モバイルアプリの一般的なアーキテクチャ

多くのモバイル APP データは動的に取得されます。APP がデータを取得するためにインターフェイスを要求できるように、APP にインターフェイスを提供する必要があります。 NavtiveApp または HybridApp のどちらを開発している場合でも、APP のインターフェイスを提供する必要があります。

従来の HybridApp 開発方法では、依然として APP のインターフェイス プログラムを開発する必要があり、インターフェイスを呼び出す ajax コードを js を使用して記述する必要もあります。
TPM を使用して開発する場合、インターフェイス プログラムを特別に作成する必要はなく、インターフェイスを呼び出すための ajax プログラムを作成する必要もありません。 私たちは今でも、ウェブサイトの開発と同じ方法でモバイルクライアントを開発しています
アクションでテンプレート変数を割り当て、テンプレートでテンプレート変数を使用します。 テンプレートを APP にパッケージ化すると、APP は自動的にアクションをリクエストし、対応するテンプレートをレンダリングできます。この時点でアクションをリクエストすると、アクションは自動的に json 形式のデータを返します。

3. 他の携帯電話開発に関する知識

優れたモバイルアプリを開発するには、携帯電話の開発についてもっと知る必要があります。 携帯電話のサイズは異なるため、通常、インターフェイスは固定サイズで記述することができず、応答性の高い方法で設計する必要があります。 誰もがレスポンシブ デザインについて学ぶことをお勧めします。 また、ブートストラップや purecss など、応答性のサポートが組み込まれている一部の UI フレームワークと組み合わせることもできます。
「モバイル Web アプリ開発の必須知識」をもう一度読むことをお勧めします
http://www.qianduan.net/mobile-webapp-develop-essential-knowledge.html

2. 環境設定

まず、TPM を含む ThinkPHP プロジェクトを作成する必要があります。 TPM は、ThinkPHP 公式 Web サイトからダウンロードするか、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 にコピーします。
プロジェクトではレイアウトを有効にし、プロジェクト構成ファイルで構成する必要があります:

リーリー

プロジェクトのConfフォルダーにtags.phpを作成します。コードは次のとおりです:

リーリー

モバイル クライアントでページ ジャンプをサポートしたい場合は、コア ファイル ThinkPHP/Common/functions.php のリダイレクト関数を次のように変更する必要があります。

リーリー

エディターで Tpl/index.html ファイルを開き、コードを変更します

リーリー

URL をプロジェクトの実際のアクセス アドレスに変更します。

次に、テンプレート ディレクトリをモバイル APP にパッケージ化できます。
まずコマンドラインを開き、テンプレートディレクトリに移動して、次のコマンドを実行します:

リーリー

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

打包命令还可以跟更多参数：
php build.php

参数说明：

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 だけでなく、独自の既存のインターフェースとも組み合わせることができます。いくつかの一般的な機能の実装に役立つ添付プラグインもいくつかあります。

http://www.bkjia.com/PHPjc/825331.htmlwww.bkjia.comtru​​ehttp://www.bkjia.com/PHPjc/825331.html技術記事 1. 基礎知識 1. モバイル APP の種類 モバイル アプリケーションには、WebApp、NativeApp、HybridApp などの種類があります。 WebApp は、モバイル ブラウザーを使用してアクセスする必要があるモバイル Web サイトです。ネイティブアプリは...