ThinkPHPMobile simple tutorial _ PHP Tutorial

ThinkPHPMobile is a simple tutorial. I. basic knowledge 1. mobile APP types include WebApp, NativeApp, and HybridApp. WebApp is a mobile website and needs to be accessed through a mobile browser. NativeApp is basic knowledge

1. mobile APP type

Mobile applications include WebApp, NativeApp, and HybridApp.

WebAppIt is a mobile website that needs to be accessed through a mobile browser.

NativeAppIt is developed in the native language and needs to be downloaded and installed by the user. The development cost of NativeApp is very high, and the development languages of each platform are different. for example, the IOS development language is object C, Android apps need to be developed using Java, and WindowsPhone requires C # development. If we need to develop 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. webapps can be developed using html, css, and js, and can be developed across multiple platforms at a time. However, webapps can be accessed only when users open a mobile browser and enter a website address. Moreover, NativeApp cannot call the camera, address book, and other functions of the mobile phone. WebApp html, css, js images, and other static resources are stored on the server. users need to download them, which consumes more traffic. NativeApp's static resources are stored locally on the mobile phone.

HybridAppAnd the advantages of NativeApp and WebApp. We can use html, css, and js to develop and be compatible with multiple platforms. You also need to download and install the SDK and call the camera, address book, and other functions of your mobile phone. the static resources of HybridApp are also on your mobile phone.

We know that ThinkPHP templates are also developed using HTML, CSS, and JS. So can we directly package ThinkPHP templates into mobile apps? So that we can have a computer website, a mobile website, and a mobile APP at the same time, the birth of TPM came into being. TPM allows us to package ThinkPHP templates into a HybridApp.

2. general architecture of mobile apps

Data of many mobile apps is dynamically obtained. we need to provide an interface for the APP to request data from the APP request interface. Whether you are developing NavtiveApp or HybridApp, you must provide interfaces to the APP.

The traditional hybridgeapp development method requires us to develop an interface program for the APP. we also need to use js to write the ajax code that calls the interface.
If you use TPM for development, you do not need to write the interface program or the program that calls the interface through ajax. We develop the mobile client based on the website development method.
Assign Template variables in Action and use Template variables in the template. When we package the template into an APP, the APP can automatically request the Action and then render the corresponding template. when requesting the Action, the Action will automatically return json format data.

3. other mobile phone development knowledge

We need to develop mobile apps and learn more about mobile phone development. The sizes of mobile phones are different. generally, all our interfaces cannot be written as fixed sizes. we need to design them in a responsive manner. 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 necessary knowledge for mobile webapp development.
Http://www.qianduan.net/mobile-webapp-develop-essential-knowledge.html

II. environment construction

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

'LAYOUT_ON'=>true

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

<?php  return array(  'action_begin'=>array('SwitchMobileTpl') )

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

Function redirect ($ url, $ time = 0, $ msg = '') {// multi-line URL supports $ url = str_replace (array (" \ n ", "\ r"), '', $ url); if (empty ($ msg )) $ msg = "The system will automatically jump to {$ url} After {$ time} seconds }! "; If (! Headers_sent () {// redirect if (0 ===$ time) {// The phone CLIENT jumps to send the redirect header if (defined ('is _ Client ') & IS_CLIENT) {if (''! ==/ Index. php) {$ url = substr ($ url, strlen (/index. php);} 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 );}}

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

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

Modify the website address to your project's real access address.
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 

Then we found that the mobile APP file will be generated in the template directory, and we can install it on the mobile phone.
The command line package requires you to enable zip and curl extensions in your environment. if you are not clear about them, please do it on your own.
Note: The packaging commands need to be networked. if not, you can use a third-party packaging tool such as phonegap.

The packaging command can also be used with more parameters:
Php build. php

Parameter description:

Platform: Enter android or ios. the default value is android. Currently, IOS packaging is not supported. please wait.
Name:Application name. The default value is TPM.
Package:The package name of an application, such as com. think. yourname, is generally the reverse order of a domain name. The default value is cn. thinkphp. tpm.
Version:Application Version. the default value is 1.0.

3. Instructions

1. operating principle

Previously, when we deployed the project, we found that ThinkPHP enabled layout. In fact, the layout file used by the browser to browse the website is Tpl/layout.html. after being packaged into a mobile APP, the layout file is actually a Tpl/index.html file. we opened the Tpl/index.html file in the editor and found that there was an additional js file: TPM. js. When running on a mobile APP, the TPM. js file is responsible for parsing the ThinkPHP template tag and automatic request interface.
The Tpl/index.html must have these two layers:

 
Loading...

TPM puts the results of each rendering template to the layer with the ID of main. The layer with class ajax_wait is displayed when you request an interface. we can define the ajax_wait style in the css file.

2. Template tag

We know that PHP runtime environments are not used in mobile apps. js is used to parse ThinkPHP Template Labels. most of ThinkPHP template labels can be used normally, but there are some restrictions, for example, PHP functions cannot be used in template labels, and U functions cannot be used in templates.
Supported ThinkPHP template labels include 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. the file attribute must specify the controller and method, and the controller cannot be omitted. For example

Action cannot be omitted. If a group exists, the group cannot be omitted. The usage of other labels remains unchanged.

Unimplemented TPM labels include defined and define.

TPM has not implemented templates such as/index. php/Article,/Public, and/php-weizijiaocheng-294602.html to replace variables.

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

3. templates for independent mobile apps

If you want to separate the website template from the mobile APP template, you can define the project configuration:

'TPM_THEME'=>'mobile'

Create a mobile folder under the Tpl directory. Place the template of the mobile APP in the mobile folder. In this way, if the browser browses the homepage of the website, the template rendered by the program is Tpl/Index/index.html. if the mobile APP is opened, the rendered homepage template is Tpl/mobile/Index/index.html.

4. configuration instructions

In the Tpl/index.html file, you need to load TPM. js and run TPM. the code for running TPM is:

TPM.run(config)

The config parameter passed by TPM. run is a configuration item. It is passed as an object. You can set the following configurations:
Api_base:Project entry file address, starting with http.
Api_index:The controller method of the first request. the default value is/Index/index.
The following is an example of these configuration items.
Suppose we create a project, the entry file browsing address is http://www.xxx.com/index.php, we want the mobile APP to open the first page is not the home page, but login page, the login page browsing address is assumed to be:
Http://www.xxx.com/index.php/Index/login

The parameters for TPM. run are as follows:

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

If your project is processed with a hidden entry file, api_base can also be set:

TPM. run ({api_base: 'http: // www.xxx.com ', // note that the end does not contain the slash api_index:'/Index/login '});

If you only want to configure the api_base parameter, use the default value for other parameters and pass only one URL as the parameter:

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

5. element listening

We do some js effects and often listen to element events, such:

《script》$(document).ready(function(){  $('#id').click(function(){  alert('click');});}); 《script》

This code listens to a click event of an element, but such listening in TPM may fail, because this listening method cannot listen to new elements, TPM interfaces are newly generated after the request interface renders the template. the newly generated content is stored in the main layer of the Tpl/index.html file. In TPM, you can use TPM. ready to listen to events of such new elements. the usage is as follows:

《script》TPM.ready(function($){$('#id').click(function(){  alert('click');});});《script》

TPM also has many features. it can be combined with ThinkPHP and its existing interfaces. Some attachment plug-ins help us implement some common functions.

Tip 1. mobile APP types include WebApp, NativeApp, and HybridApp. WebApp is a mobile website and needs to be accessed through a mobile browser. NativeApp is...