TPM There are many features that not only ThinkPHP and combined, can be combined with their existing interface. There are some accessories plug-in to help us achieve some common features
First, the basics
1 mobile phone type APP
Application of mobile terminals have these types: WebApp, NativeApp, HybridApp.WebApp is the mobile site, you need to access your phone's browser.
NativeApp is the native language development, users need to download and install the mobile application. NativeApp high development costs, each platform development language is different, such as the development language is IOS APP object C, Android system need to use Java development, WindowsPhone you need to use C # development. So if we need to do a multi-platform APP can run, you need to repeat the development of multiple languages.
Relative to NativeApp it, WebApp development much easier, with html, css, js can develop WebApp, and the development time across multiple platforms. But WebApp require the user to open the mobile browser enter the URL to access, but can not call the phone's camera, address book and other functions like NativeApp. WebApp of html, css, js pictures and other static resources on the server, users need to download, users will consume more traffic. The static resources NativeApp local mobile phone.
HybridApp and the NativeApp WebApp and their respective advantages. We can use html, css, js development, compatible with multiple platforms. Users have to download and install, and can call the phone's camera, address book and other functions, static resources HybridApp also local phone.
We also know ThinkPHP templates with HTML, CSS, JS development. So we wonder if it is packaged ThinkPHP template directly into the phone APP? Open so that we can have both a desktop site, mobile site and mobile APP, so only the birth of TPM. TPM allows us to ThinkPHP templates packaged into a HybridApp.
2 general architecture of the phone APP
Many of the phone APP data is acquired dynamically, we need to provide an interface to the APP, APP make a request interface to obtain data. Whether you are a developer NavtiveApp or HybridApp, you are required to provide an interface to the APP.The traditional way to develop HybridApp any course we need to develop an interface for the APP program, we have to use to write js ajax code call interface.
If you are using TPM development, do not deliberately write interface program, do not write the program ajax call interface. We develop the site in a manner to develop mobile client, assign a template variable in Action, use the template variables in the template. When we packaged into templates APP, APP can automatically request Action, and then render the corresponding template, this time the request Action, Action will automatically return json format data.
Other handset development of knowledge 3
We want to develop a good phone APP, also need to learn more handset development. Phone the size of the sample sizes, all our interface generally can not be written as a fixed size, it does responsive design. I suggest that you look at knowledge responsive design. Some UI frameworks may also be incorporated, such as bootstrap, purecss their own support is responsive.I suggest that you re-read the "end mobile webapp development of essential knowledge."
Second, build environment
First you need to create a project that contains ThinkPHP TPM. You can ThinkPHP on the official website to download the TPM , you can also get in on github.Download the file, copy the files in Tpl directory to your project folder Tpl directory. Copy SwitchMobileTplBehavior.class.php to the project directory under the Lib / Behavior directory, copy the file to the TemplateMobile.class.php ThinkPHP / Extend / Driver / Template.
Projects need to open layout, project configuration in the configuration file:
'LAYOUT_ON'=>true
Tags.php established under the project Conf folder code:
Array return (
'action_begin' => Array ( 'SwitchMobileTpl')
)
If you want to jump mobile client support page, you need to modify core files ThinkPHP / Common / functions.php in the redirect function was revised as follows:
the redirect function (URL $, $ Time = 0, = $ MSG '') {
// URL address to support a plurality of rows
$ url = str_replace (array ( " \ n", "\ r"), '', $ url);
IF (empty ($ MSG))
$ MSG = "after the system will automatically jump to the {$ time} seconds URL} $ {!";
IF {(headers_sent ()!)
// the redirect
IF ($ 0 === Time) {
// header mobile client jump transmitted the redirect
IF (defined ( 'IS_CLIENT') && IS_CLIENT) {
IF ( '' == __ the APP __) {!
$ URL = substr ($ URL, strlen (__ APP__));
}
header ( 'the redirect:'. $ URL);
} the else {
header ( 'the Location:' $ URL.);
}
} else {
header("refresh:{$time};url={$url}");
echo($msg);
}
exit();
} else {
$str = "";
if ($time != 0)
$str .= $msg;
exit($str);
}
}
Editor opens Tpl / index.html file, modify the code
TPM.run("http://yourappurl");
Will be revised as real URL address to access your project.
Then, we can be packaged into templates directory phone APP.
First open your command line, cd to the template directory, run the command:
php build.php
Then we found in the template directory will generate a mobile phone APP file, we can install the phone above.
Command line packager need your environment to open zip and curl extensions , if you are unsure if your own Baidu resolved.
Note: Package command requires networking, if not networked then you can use third-party tools such as packaged phonegap package.
Packaging commands can be followed by parameters:
PHP build.php
Parameters:
Platform : enter android or ios, android default, IOS does not currently support package, we stay tuned.
name : application name, the default is TPM.
Package Penalty for : name of the application package, such as: com.think.yourname, typically a domain name in reverse order. The default is cn.thinkphp.tpm
Version : application version, the default is 1.0
Links: https://pan.baidu.com/s/1v5gm7n0L7TGyejCmQrMh2g extraction code: x2p5
free to share, but serious limitations of X, should click on the link or links fail Search plus population group number 936 682 608 .
Instruction III Use
1 operating principle
Before we found ThinkPHP opened the layout, in fact layout files while browsing the site browser is Tpl / layout.html, and packaged into the phone APP, layout file is actually Tpl / index.html, we edit the deployment project open Tpl / index.html file, and found a loaded multi-js file: TPM.js. When running on the phone APP, TPM.js ThinkPHP file is responsible for parsing the template tag and automatically request interface.Tpl / index.html in need two layers:
TPM will render the results of each template into the ID of the main layer. class for the layer ajax_wait is displayed when the request interface, we can define ajax_wait style in css file.
2 Template Tags
We know that in the mobile phone APP did not use the PHP runtime environment, resolve ThinkPHP template tag is js, ThinkPHP most of template tags can be used normally, but there are some restrictions, such as PHP template tags can not function, so it can not use U function in the template.Supported ThinkPHP template labels: 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 tag bit usage limits, file attribute must specify the controller and method, the controller can not be omitted. Such as
You can not be omitted Action. If a packet is not the packet will be omitted. Other usage labels intact.
TPM unrealized labels: defined, define, etc.
TPM unrealized __URL __, __ PUBLIC __, __ ROOT __, __ SELF__ substitution variables such as template.
We need to write a fixed URL in the template, begin with a slash. URL address format is: / Action / method
3 independent phone APP template
If we want to website templates and phone APP separate template, you can define the project configuration:'TPM_THEME'=>'mobile'
Then create a folder in the mobile Tpl directory. Place the template in the mobile phone APP folder. If this is a browser to browse the Web page, the program is rendered template Tpl / Index / index.html, if it is to open the phone APP, rendering the page template is Tpl / mobile / Index / index.html.
4 configuration instructions
Tpl / index.html file to load and run TPM.js TPM, TPM code is run:TPM.run(config)
TPM.run config parameter passed is CI. Delivered in the form of objects. The main configuration can be set are:
api_base : project file entry address, beginning http.
API_Index : the first request controller method, the default is / Index / index
illustrates the configuration at the following items.
Suppose we create a project file browser address entry is http://www.xxx.com/index.php, we would like to open the phone APP The first page is not home, but the landing page, the browser address of the landing page It is assumed:
http://www.xxx.com/index.php/Index/login
so TPM.run pass parameters as follows:
TPM.run ({
api_base: 'HTTP: //www.xxx.com/index.php',
API_Index: '/ Index / the Login'
});
If your project is done a deal with the entrance hidden files, then you can also api_base do not write an entry file, configured to:
TPM.run ({
api_base: 'HTTP: //www.xxx.com',// Note, do not end with a slash
API_Index:' / Index / Login '
});
If you want to api_base this configuration parameters, other parameters default value, only a URL passed as a parameter:
TPM.run ( 'http://www.xxx.com')
5 elements monitor
We do some js effect, often listens element event, for example:《script》
$(document).ready(function(){
$('#id').click(function(){
alert('click');
});
});
《script》
This code listens element click event, but this monitor may fail in the TPM, because this way the listener can not listen to the elements of the nascent, and TPM interface rendering the interface template is requested after the newborn, newborn content will on Tpl / index.html file in the main layer. To be in the TPM for elements of this nascent event listener, you can use TPM.ready, used as follows:
《script》
TPM.ready(function($){
$('#id').click(function(){
alert('click');
});
});《script》
TPM There are many features that not only ThinkPHP and combined, can be combined with their existing interface. There are some accessories plug-in to help us achieve some common features. Other advanced uses we will continue to use the document release, stay tuned.
TPM was first released, there may be a lot of deficiencies in the hope that we can be understanding. To provide valuable advice to us, we will continue our efforts to continue to improve good TPM. Let's open the door and the majority of TPer mobile Internet together.