ThinkPHP Mobile使用方法简明教程


Posted in PHP onJune 18, 2014

一、基础知识

1.手机APP的类型

移动端的应用有这几种:WebApp,NativeApp,HybridApp。

WebApp 就是手机网站,需要用手机浏览器访问。

NativeApp是用原生语言开发,用户需要下载安装的手机应用。 NativeApp的开发成本很高,每个平台的开发语言都不一样, 比如IOS的开发语言是object C , Android系统的APP需要用Java开发, WindowsPhone 则需要用 C# 开发。那么我们如果需要做一个多平台都能运行的APP,需要用多种语言重复开发多次。
相对于NativeApp来说, WebApp开发就简单多了, 用html,css,js就可开发WebApp, 而且开发一次跨多个平台。但是WebApp 需要用户打开手机浏览器输入网址才能访问,而且不能像NativeApp 能调用手机的摄像头,通讯录等功能。WebApp的html,css,js图片等静态资源在服务器上,用户需要下载,会消耗用户更多的流量。 而NativeApp的静态资源在手机本地。

HybridApp中和了NativeApp和WebApp各自的优势。 我们可以用html,css,js 开发,兼容多个平台。用户也要下载安装,并能调用手机的摄像头、通讯录等功能, HybridApp的静态资源也在手机本地。

我们知道ThinkPHP的模板也是用HTML,CSS,JS 开发的。所以我们想能否将ThinkPHP的模板直接打包成手机APP?让我们能一次开放同时拥有电脑版网站,手机版网站和手机APP, 因此才有了TPM的诞生。TPM能让我们将ThinkPHP的模板打包成一个HybridApp。

2.手机APP的一般架构

很多手机APP的数据都是动态获取的,我们需要给APP提供接口,让APP请求接口获取数据。 不管你是开发NavtiveApp 还是 HybridApp, 都需要给APP提供接口。

传统的HybridApp 开发方式任然需要我们为APP开发一个接口程序, 我们还要用js写调用接口的ajax的代码。
如果使用TPM开发,不用特意写接口程序,也不用写ajax调用接口的程序 。 我们还是按照开发网站的方式开发手机客户端,在
Action中指派模板变量, 在模板中使用模板变量。 当我们将模板打包成APP时,APP能自动请求Action,然后渲染对应的模板,这时候请求Action时,Action会自动返回json格式数据。

3.其他手机开发的知识

我们要开发好手机APP,还需要了解更多手机开发的知识。 手机的尺寸大小不一样,所有我们的界面一般不能写成固定尺寸的, 要做响应式设计。 建议大家了解一下响应式设计的知识。 也可以结合一些UI框架,如bootstrap、purecss 他们自带对响应式的支持。
建议大家再阅读一下《移动端webapp开发必备知识》
http://www.qianduan.net/mobile-webapp-develop-essential-knowledge.html

二、环境搭建

首先你需要建立一个包含TPM的ThinkPHP项目。 你可以在ThinkPHP官方网站上下载TPM, 也可以中github中获得。 Github的地址是:
https://github.com/liu21st/extend/tree/master/Extend/Tool/TPM
将下载的文件中, Tpl目录下的文件复制到你的项目文件夹下Tpl目录中。将SwitchMobileTplBehavior.class.php 复制到 项目目录下 Lib/Behavior 目录下,将TemplateMobile.class.php 文件复制到 ThinkPHP/Extend/Driver/Template 下。
项目需要开启layout , 在项目配置文件中配置:

'LAYOUT_ON'=>true

在项目的Conf文件夹下建立tags.php ,代码为:

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

如果想手机客户端支持页面跳转,需要修改核心文件 ThinkPHP/Common/functions.php 中得redirect函数,修改为:

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

编辑器打开Tpl/index.html文件,修改代码

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

将网址修改为你项目的真实访问地址。
然后,我们可将模板目录打包成手机APP 。
首先打开你的命令行, cd 到模板目录, 运行命令:

php build.php

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

打包命令还可以跟更多参数:
php build.php <platform> <name> <package> <version>

参数说明:

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还有很多特性,它不仅能和ThinkPHP结合, 也可以结合自己已有的接口。还有一些附件插件帮助我们实现一些常用功能。

PHP 相关文章推荐
PHP配置心得包含MYSQL5乱码解决
Nov 20 PHP
详解:――如何将图片储存在数据库里
Dec 05 PHP
PHP删除特定数组内容并且重建数组索引的方法.
Mar 25 PHP
PHP 第二节 数据类型之转换
Apr 28 PHP
PHP合并两个数组的两种方式的异同
Sep 14 PHP
PHP实现的封装验证码类详解
Jun 18 PHP
微信营销平台系统?刮刮乐的开发
Jun 10 PHP
微信公众平台之快递查询功能用法实例
Apr 14 PHP
PHP单例模式是什么 php实现单例模式的方法
May 14 PHP
关于php中的json_encode()和json_decode()函数的一些说明
Nov 20 PHP
thinkphp5 加载静态资源路径与常量的方法
Dec 24 PHP
PHP实现链表的定义与反转功能示例
Jun 09 PHP
ThinkPHP的I方法使用详解
Jun 18 #PHP
ThinkPHP的L方法使用简介
Jun 18 #PHP
Thinkphp中的volist标签用法简介
Jun 18 #PHP
ThinkPHP令牌验证实例
Jun 18 #PHP
Smarty局部缓存的几种方法简介
Jun 17 #PHP
smarty模板局部缓存方法使用示例
Jun 17 #PHP
CodeIgniter CLI模式简介
Jun 17 #PHP
You might like
终于听上了直流胆调频
2021/03/02 无线电
php页码形式分页函数支持静态化地址及ajax分页
2014/03/28 PHP
百度地图API应用之获取用户的具体位置
2014/06/10 PHP
完美解决phpdoc导出文档中@package的warning及Error的错误
2016/05/17 PHP
PHP中检查isset()和!empty()函数的必要性
2019/02/13 PHP
Document对象内容集合(比较全)
2010/09/06 Javascript
表格单元格交错着色实现思路及代码
2013/04/01 Javascript
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
2013/08/08 Javascript
Jquery在指定DIV加载HTML示例代码
2014/02/17 Javascript
jQuery实现简单的间隔向上滚动效果
2015/03/09 Javascript
纯javascript实现自动发送邮件
2015/10/21 Javascript
JavaScript的removeChild()函数用法详解
2015/12/27 Javascript
JS实现隐藏同级元素后只显示JS文件内容的方法
2016/09/04 Javascript
jQuery和JavaScript节点插入元素的方法对比
2016/11/18 Javascript
jquery实现文本框的禁用和启用
2016/12/07 Javascript
一个例子轻松学会Vue.js
2017/01/02 Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
2017/07/10 Javascript
React如何将组件渲染到指定DOM节点详解
2017/09/08 Javascript
Vue实现数字输入框中分割手机号码的示例
2017/10/10 Javascript
使用 Javascript 实现浏览器推送提醒功能的示例
2017/11/03 Javascript
微信小程序中使用自定义图标(阿里icon)的方法
2018/08/20 Javascript
d3.js实现图形拖拽
2019/12/19 Javascript
Python 获取当前所在目录的方法详解
2017/08/02 Python
浅谈python numpy中nonzero()的用法
2018/04/02 Python
Python3.5装饰器典型案例分析
2019/04/30 Python
python多线程http压力测试脚本
2019/06/25 Python
在Python中使用MySQL--PyMySQL的基本使用方法
2019/11/19 Python
三只松鼠官方旗舰店:全网坚果销售第1
2017/11/25 全球购物
印尼美容产品购物网站:PerfectBeauty.id
2017/12/01 全球购物
韩国保养品、日本药妆购物网:小三美日
2018/12/30 全球购物
某公司部分笔试题
2013/11/05 面试题
卫校毕业生个人自我鉴定
2014/04/28 职场文书
国企干部对照检查材料
2014/08/22 职场文书
“六查”、“三学”、“三干”查摆问题整改措施
2014/09/27 职场文书
慰问信格式规范
2015/03/23 职场文书
【海涛dota解说】海涛小满开黑4v5被破两路翻盘潮汐第一视角解说
2022/04/01 DOTA