A concise tutorial on how to use ThinkPHP Mobile_PHP tutorial

1. Basic knowledge

1. Type of mobile APP

There are several types of mobile applications: WebApp, NativeApp, and HybridApp.

WebApp is a mobile website and needs to be accessed using a mobile browser.

NativeApp is a mobile application developed in native language and users need to download and install it. The development cost of NativeApp is very high, and the development language of each platform is different. For example, the development language of IOS is object C, Android system APP needs to be developed with Java, and Windows Phone needs to be developed with C#. So if we need to make an APP that can run on multiple platforms, we need to develop it multiple times in multiple languages.
Compared with NativeApp, WebApp development is much simpler. WebApp can be developed using html, css, and js, and it can be developed across multiple platforms at once. However, WebApp requires the user to open the mobile browser and enter the URL to access it, and it cannot call the phone's camera, address book and other functions like NativeApp. WebApp's html, css, js images and other static resources are on the server, and users need to download them, which will consume more user traffic. The static resources of NativeApp are local to the mobile phone.

HybridApp neutralizes the respective advantages of NativeApp and WebApp. We can develop with html, css, and js, and are compatible with multiple platforms. Users also need to download and install it, and can call the phone's camera, address book and other functions. The static resources of HybridApp are also local to the phone.

We know that ThinkPHP templates are also developed using HTML, CSS, and JS. So we wonder if we can package ThinkPHP templates directly into mobile APPs? It allows us to open the computer version of the website, the mobile version of the website and the mobile APP at the same time, so the birth of TPM was born. TPM allows us to package ThinkPHP templates into a HybridApp.

2. General architecture of mobile APP

Many mobile APP data are obtained dynamically. We need to provide an interface for the APP so that the APP can request the interface to obtain data. Whether you are developing NavtiveApp or HybridApp, you need to provide an interface for the APP.

The traditional HybridApp development method still requires us to develop an interface program for the APP, and we also need to use js to write the ajax code that calls the interface.
If you use TPM to develop, you don't need to write an interface program specifically, nor do you need to write an ajax program to call the interface. We still develop the mobile client in the same way as we develop websites, in
Assign template variables in Action and use template variables in templates. When we package the template into an APP, the APP can automatically request Action and then render the corresponding template. When requesting Action at this time, Action will automatically return json format data.

3. Knowledge of other mobile phone development

To develop a good mobile APP, we also need to know more about mobile phone development. The sizes of mobile phones are different, so our interface generally cannot be written in a fixed size and needs to be designed in a responsive manner. It is recommended that everyone learn about responsive design. It can also be combined with some UI frameworks, such as bootstrap and purecss, which have built-in support for responsiveness.
It is recommended that you read "Essential Knowledge for Mobile Webapp Development" again
http://www.qianduan.net/mobile-webapp-develop-essential-knowledge.html

2. Environment setup

First you need to create a ThinkPHP project containing TPM. You can download TPM from the ThinkPHP official website or get it from github. The address of Github is:
https://github.com/liu21st/extend/tree/master/Extend/Tool/TPM
Copy the files in the Tpl directory of the downloaded file to the Tpl directory in your project folder. Copy SwitchMobileTplBehavior.class.php to the Lib/Behavior directory in the project directory, and copy the TemplateMobile.class.php file to ThinkPHP/Extend/Driver/Template.
The project needs to enable layout and configure it in the project configuration file:

'LAYOUT_ON'=>true

Create tags.php in the Conf folder of the project, the code is:

<&#63;php 
 return array( 
 'action_begin'=>array('SwitchMobileTpl')
 )

If you want the mobile client to support page jumps, you need to modify the redirect function in the core file ThinkPHP/Common/functions.php to:

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);
  }
 }

Open the Tpl/index.html file in the editor and modify the code

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

Change the URL to the real access address of your project.
Then, we can package the template directory into a mobile APP.
First open your command line, cd to the template directory, and run the command:

php build.php 

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

打包命令还可以跟更多参数：
php build.php 8edcac60151209924b9c7e8734e08ab8 8a11bc632ea32a57b3e3693c7987c420 6112fef22dc3bff574b3ebf52fb7ce22 3d689bd3819ead35ed794427bd12f459

参数说明：

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 also has many features. It can not only be combined with ThinkPHP, but also with its own existing interfaces. There are also some attachment plug-ins that help us implement some common functions.

http://www.bkjia.com/PHPjc/825331.htmlwww.bkjia.comtruehttp: //www.bkjia.com/PHPjc/825331.htmlTechArticle1. Basic knowledge 1. Types of mobile APPs There are several types of mobile applications: WebApp, NativeApp, and HybridApp. WebApp is a mobile website that needs to be accessed using a mobile browser. NativeApp is...