thinkphp Mobile Use method Concise Tutorial _php Example

First, basic knowledge

1. Type of mobile app

There are several applications for the mobile end: Webapp,nativeapp,hybridapp.

WebApp is a mobile web site that needs to be accessed by a mobile browser.

Nativeapp is developed using native language, users need to download and install mobile apps. Nativeapp development costs are high, each platform development language is different, such as iOS development language is Object C, Android app needs Java development, WindowsPhone need to use C # development. So if we need to do a multi-platform can run the app, need to repeat the development of multiple languages multiple times.
Compared to Nativeapp, WebApp development is much simpler, with HTML,CSS,JS can be developed webapp, and development across multiple platforms. But WebApp need users to open a mobile browser to enter the Web site to access, and not like Nativeapp can call the phone's camera, address book and other functions. WebApp Html,css,js Pictures and other static resources on the server, users need to download, users will consume more traffic. And Nativeapp's static resources are on the phone locally.

Hybridapp neutralized the advantages of Nativeapp and WebApp. We can use HTML,CSS,JS development, compatible with multiple platforms. Users also want to download the installation, and can call the phone's camera, address books and other functions, hybridapp static resources in the mobile phone local.

We know that the thinkphp template is also developed with HTML,CSS,JS. So we want to be able to thinkphp template directly packaged into a mobile phone app? Let us be open at the same time have a computer version of the website, mobile phone version of the Web site and mobile app, so that the emergence of the TPM. The TPM allows us to package thinkphp templates into a hybridapp.

2. Mobile phone app's general architecture

Many mobile app data are dynamically acquired, and we need to provide an interface to the app to get the data from the app request interface. Whether you are developing Navtiveapp or HYBRIDAPP, you need to provide an interface to the app.

The traditional Hybridapp development way still need us to develop an interface program for the app, we also want to use JS write to invoke the AJAX code of the interface.
If you are developing with TPM, you do not need to write the interface program intentionally, nor do you need to write an Ajax calling interface program. We still develop the mobile phone client in the way of developing the website,
Action to assign a template variable to use in the template. When we package the template as an app, the app automatically requests the action and then renders the corresponding template, and when the action is requested, the action automatically returns the JSON format data.

3. Other mobile phone development knowledge

We need to develop a mobile app and learn more about cell phone development. Mobile phone size is not the same size, all of our interface can not be written in a fixed size, to do the response design. Suggest that you understand the knowledge of response design. You can also combine some UI frameworks, such as Bootstrap and PURECSS, to support them with their own response.
Suggest that you read again "mobile End webapp Development Prerequisite Knowledge"
Http://www.qianduan.net/mobile-webapp-develop-essential-knowledge.html

Second, the environment to build

First you need to build a thinkphp project that contains the TPM. You can download the TPM on the official website of thinkphp, or you can get it in GitHub. GitHub's address is:
Https://github.com/liu21st/extend/tree/master/Extend/Tool/TPM
In the downloaded file, copy the files in the TPL directory to your project folder under the TPL directory. Copy the SwitchMobileTplBehavior.class.php to the Lib/behavior directory under the project directory and copy TemplateMobile.class.php files to Thinkphp/extend/driver /template under.
The project needs to be open layout and configured in the project configuration file:

' Layout_on ' =>true

In the project's Conf folder to establish tags.php, the code is:

<?php return 
 Array (' 
 action_begin ' =>array (' Switchmobiletpl ')
 )

If you want to support the mobile phone client page jump, you need to modify the core file thinkphp/common/functions.php redirect function, modified to:

function Redirect ($url, $time =0, $msg = ') {
  //multiline URL address support
  $url    = str_replace (Array ("\ n", "\ R"), ", $url);
  if (empty ($msg))
    $msg  = "The system will automatically jump to {$time} seconds after {$url}! ";
  if (!headers_sent ()) {
    //redirect
    if (0 = = $time) {
      //Mobile client jumps to send 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);
  }
 }

Editor opens tpl/index.html file, modifies code

Tpm.run ("Http://yourappurl"); 

Change the URL to the real access address for your project.
We can then package the template catalog into a mobile app.
First open your command line, CD to the template directory, and run the command:

PHP build.php 

Then we found that the template directory will generate mobile app files, we can install on the phone.
Command-line Packager requires your environment to open zip and curl extensions, if not clear, please own Baidu solution.
Note: Packaging commands need to be networked and packaged with Third-party packaging tools such as PhoneGap if there is no networking.

Packing commands can also be followed by more parameters:
PHP build.php <platform> <name> <package> <version>

Parameter description:

platform : Enter Android or iOS, the default is Android, and now do not support iOS packaging, please look forward to.
Name : applies the names and defaults to the TPM.
Package: The application of the package name, such as: Com.think.yourname, generally a domain name in reverse order. Default is CN.THINKPHP.TPM
Version : applied versions, defaults to 1.0

Three use instructions

1. Operating principle

Before we deployed the project to find thinkphp opened the layout, in fact, browser browsing the site using the layout file is tpl/layout.html, and packaged into mobile phone app, layout file is actually tpl/index.html, We use the editor to open the tpl/index.html file, found that there is more than a JS file: Tpm.js. When running on the mobile app, the Tpm.js file is responsible for parsing the thinkphp template label and the automatic request interface.
These two layers are required in tpl/index.html:

<div id= "main" ></div>
 <div class= "ajax_wait" > Loading ...</div>

The TPM places the results of each render template into a layer with ID main. The layer with class ajax_wait is displayed when the interface is requested, and we can define the ajax_wait style in the CSS file.

2. Template Label

We know that in the mobile phone app does not use PHP to run the environment, parsing thinkphp template tag is js,thinkphp most of the template tags can be used, but there are some restrictions, such as template tags can not use PHP functions, so also can not use the U function in the template.
Supported thinkphp template tags are: 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.

The include tag is limited in use, and the file attribute must specify the controller and method and cannot omit the controller. Such as

<include file= "Action:method"/>

Action cannot be omitted. Groups cannot be omitted if they are grouped. The usage of other labels is unchanged.

The TPM's not implemented label is: Defined,define, etc.

The TPM does not implement template substitution variables such as __url__,__public__,__root__,__self__.

You need to write a fixed URL in the template, starting with a slash. URL address format:/action/method

3. Independent mobile phone app template

If we want to separate the site template from the Mobile app template, we can define the project configuration:

' Tpm_theme ' => ' mobile '

Then create a mobile folder under the TPL directory. Place the phone app template in the Mobile folder. So if it is browser browsing the homepage, the program renders the template is tpl/index/index.html, if is the mobile phone app opens, renders the homepage template is tpl/mobile/index/index.html.

4. Configuration Instructions

tpl/index.html files need to load tpm.js and run the TPM, the code to run the TPM is:

Tpm.run (config)

The config parameter passed by Tpm.run is a configuration item. Passed as an object. The main configurations you can set are:
api_base: Project Entry file address, HTTP start.
Api_index: First-requested controller method, default is/index/index
The following examples illustrate these configuration items.
Let's say we created a project, the browse address of the entry file is http://www.xxx.com/index.php, we want the first page of the mobile app to open is not the homepage, but the landing page, the landing page's browsing address is assumed to be:
Http://www.xxx.com/index.php/Index/login

Then Tpm.run's arguments are as follows:

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

If your project does a hidden entry file processing, then Api_base can also not write the entry file, configured to:

Tpm.run ({
  api_base: ' http://www.xxx.com ',//Note that the end is not with a slash
  api_index: '/index/login '
 });

If you only want to configure api_base this parameter, the other parameters use the default value, passing only one URL as an argument:

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

5. Element monitoring

We do some JS effect, will often listen to element events, such as:

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

This code listens for an element's click event, but in the TPM it may fail because this listener cannot listen to the new elements, and the TPM interface is new to the request interface rendering template, and the new content is placed in the main layer of the tpl/index.html file. To monitor this new element in the TPM, you can use Tpm.ready, as follows:

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

TPM also has a lot of features, it can not only combine with thinkphp, also can combine their existing interfaces. There are also some add-on plug-ins to help us implement some common functions.