thinkphp Mobile using a concise tutorial _php tutorial

First, the basic knowledge

1. Type of mobile app

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

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

Nativeapp is developed in native language and users need to download and install the mobile app. 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 to run the app, we need to repeat the development in multiple languages several times.
Compared to Nativeapp, WebApp development is much simpler, with HTML,CSS,JS can be developed webapp, and developed once across multiple platforms. But WebApp need users to open the phone browser input URL to access, and not like Nativeapp can call the phone's camera, contacts and other functions. WebApp Html,css,js Pictures and other static resources on the server, users need to download, will consume more users of traffic. While Nativeapp static resources are locally on the phone.

Hybridapp The advantages of Nativeapp and WebApp respectively. We can use HTML,CSS,JS to develop, compatible with multiple platforms. Users also want to download the installation, and can call the phone's camera, contacts and other functions, Hybridapp static resources are also on the phone local.

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

2. General architecture of mobile app

Many mobile app data are dynamically acquired, we need to provide an interface to the app, let the app request the interface to obtain data. Whether you are developing Navtiveapp or HYBRIDAPP, you need to provide an interface to your app.

The traditional way of Hybridapp development is that we need to develop an interface program for the app, and we will write the Ajax code of the calling interface with JS.
If you use TPM development, you do not have to write the interface program intentionally, and you do not have to write Ajax calling interface programs. We develop mobile clients in the same way as we develop our website,
You assign a template variable in the action and use a template variable in the template. When we package the template into an app, the app automatically requests the action and then renders the corresponding template, which automatically returns the JSON-formatted data when the action is requested.

3. Other mobile phone development knowledge

We want to develop a good mobile app, but also need to learn more about mobile phone development knowledge. The size of the phone is not the same, all our interfaces are generally not written in fixed size, to do responsive design. We recommend that you understand the knowledge of responsive design. You can also combine some UI frameworks, such as Bootstrap and Purecss, with their own responsive support.
We recommend that you read the "Mobile WebApp development Required Knowledge"
Http://www.qianduan.net/mobile-webapp-develop-essential-knowledge.html

Second, the environment construction

First you need to create 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
Copy the files that are downloaded from the TPL directory into your project folder under the TPL directory. Copy the SwitchMobileTplBehavior.class.php to the Lib/behavior directory under the project directory and copy the TemplateMobile.class.php file to the Thinkphp/extend/driver Under the/template.
The project needs to open layout and configure it in the project configuration file:

' Layout_on ' =>true

Under the project's Conf folder, create the tags.php code:

<?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 {$time} seconds to {$url}! ";  if (!headers_sent ()) {    //redirect    if (0 = = = $time) {/      /Mobile client jumps 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  = "
 
   ";    if ($time! = 0)      $str. = $msg;    Exit ($STR);  } }

Editor Open tpl/index.html file, modify code

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

Then we found in 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 Baidu to solve.
Note: The package command requires networking and can be packaged with third-party packaging tools such as PhoneGap if not networked.

The package command can also be followed by more parameters:
PHP build.php

Parameter description:

platform : Enter Android or iOS, the default is Android, and now it doesn't support iOS packaging, so please look forward to it.
Name : The default is TPM.
Package : The app's name, such as: Com.think.yourname, is usually a reverse order of a domain name. Default is CN.THINKPHP.TPM
Version : app release, default = 1.0

Three instructions for use

1. Operating principle

Before we deployed the project to find that thinkphp opened the layout, in fact, the browser to browse the site using the layout file is tpl/layout.html, and packaged into a mobile app, layout file is actually tpl/index.html, We use the editor to open the tpl/index.html file, found inside 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:

Loading in progress ...

The TPM places the results of each render template in a layer with the ID of main. The class ajax_wait layer 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 app does not use PHP runtime environment, parsing thinkphp template tag is js,thinkphp most of the template label can be used normally, but there are some limitations, such as template tags can not be used in PHP functions, so also can not be used in the template U function.
The 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 the controller cannot be omitted. Such as

Action cannot be omitted. You cannot omit grouping if you have groups. The usage of other labels does not change.

TPM non-implemented tags are: 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. The URL address format is:/action/method

3. Templates for standalone mobile apps

If we want the site template and the mobile app template to be detached, you can define the project configuration:

' Tpm_theme ' = ' mobile '

Then create a mobile folder under the TPL directory. Place the mobile app's template in the Mobile folder. If this is the browser to browse the site home page, the program renders the template is tpl/index/index.html, if the mobile app is open, the rendering of the homepage template is tpl/mobile/index/index.html.

4. Configuration Instructions

To load Tpm.js and run the TPM in the tpl/index.html file, 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 portal file address, HTTP start.
Api_index: first requested Controller method, default is/index/index
The following examples illustrate these configuration items.
Suppose we create a project, the browse address of the portal file is http://www.xxx.com/index.php, we want the mobile app to open the first page is not the homepage, but the landing page, the landing page of the browse address is assumed to be:
Http://www.xxx.com/index.php/Index/login

Then the tpm.run of the following parameters:

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

If your project does the processing of the hidden portal file, then Api_base can also not write the portal file, configured as:

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

If you only want to configure the Api_base parameter, the other parameters use the default value, passing only one URL as the parameter:

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

5. Elemental Monitoring

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