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

一、基础知识

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开发必备知识》

二、环境搭建

首先你需要建立一个包含TPM的ThinkPHP项目。 你可以在ThinkPHP官方网站上下载TPM, 也可以中github中获得。
将下载的文件中, Tpl目录下的文件复制到你的项目文件夹下Tpl目录中。将SwitchMobileTplBehavior.class.php 复制到 项目目录下 Lib/Behavior 目录下,将TemplateMobile.class.php 文件复制到 ThinkPHP/Extend/Driver/Template 下。

项目需要开启layout , 在项目配置文件中配置:

'LAYOUT_ON'=>true

在项目的Conf文件夹下建立tags.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 = "";
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 :输入android或ios, 默认为android,现在还不支持IOS打包,大家敬请期待。 
name :应用名称, 默认为TPM 。
package: 应用的包名,如:com.think.yourname ,一般为一个域名的倒序。 默认为 cn.thinkphp.tpm
version: 应用版本, 默认为1.0

链接:https://pan.baidu.com/s/1v5gm7n0L7TGyejCmQrMh2g 提取码:x2p5

免费分享,但是X度限制严重,如若链接失效点击链接或搜索加群 群号936682608

三 使用说明

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 中需要有这两个层:

正在加载中...

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属性必须写明控制器和方法,不能省略控制器。 如

不能省略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结合, 也可以结合自己已有的接口。还有一些附件插件帮助我们实现一些常用功能。 其他高级的用法我们会陆续发布使用文档,大家敬请期待。
TPM首次发布,可能有诸多不足的地方,希望大家能予以谅解。多为我们提供宝贵建议, 我们会不断努力,继续完善好TPM 。 让我们和广大TPer一起推开移动互联网的大门。

TPM(ThinkPHPMobile)使用简明教程的更多相关文章

  1. 2013 duilib入门简明教程 -- 第一个程序 Hello World(3)

    小伙伴们有点迫不及待了么,来看一看Hello World吧: 新建一个空的win32项目,新建一个main.cpp文件,将以下代码复制进去: #include <windows.h> #i ...

  2. 2013 duilib入门简明教程 -- 部分bug (11)

     一.WindowImplBase的bug     在第8个教程[2013 duilib入门简明教程 -- 完整的自绘标题栏(8)]中,可以发现窗口最大化之后有两个问题,     1.最大化按钮的样式 ...

  3. 2013 duilib入门简明教程 -- 部分bug 2 (14)

        上一个教程中提到了ActiveX的Bug,即如果主窗口直接用变量生成,则关闭窗口时会产生崩溃            如果用new的方式生成,则不会崩溃,所以给出一个临时的快速解决方案,即主窗口 ...

  4. 2013 duilib入门简明教程 -- 自绘控件 (15)

        在[2013 duilib入门简明教程 -- 复杂控件介绍 (13)]中虽然介绍了界面设计器上的所有控件,但是还有一些控件并没有被放到界面设计器上,还有一些常用控件duilib并没有提供(比如 ...

  5. 2013 duilib入门简明教程 -- 事件处理和消息响应 (17)

        界面的显示方面就都讲完啦,下面来介绍下控件的响应.     前面的教程只讲了按钮和Tab的响应,即在Notify函数里处理.其实duilib还提供了另外一种响应的方法,即消息映射DUI_BEG ...

  6. 2013 duilib入门简明教程 -- FAQ (19)

        虽然前面的教程几乎把所有的知识点都罗列了,但是有很多问题经常在群里出现,所以这里再次整理一下.     需要注意的是,在下面的问题中,除了加上XML属性外,主窗口必须继承自WindowImpl ...

  7. Mac安装Windows 10的简明教程

    每次在Mac上安装Windows都是一件非常痛苦的事情,曾经为了装Win8把整台Mac的硬盘数据都弄丢了,最后通过龟速系统恢复模式恢复了MacOSX(50M电信光纤下载了3天才把系统下载完),相信和我 ...

  8. Docker简明教程

    Docker简明教程 [编者的话]使用Docker来写代码更高效并能有效提升自己的技能.Docker能打包你的开发环境,消除包的依赖冲突,并通过集装箱式的应用来减少开发时间和学习时间. Docker作 ...

  9. 2013 duilib入门简明教程 -- 总结 (20)

        duilib的入门系列就到尾声了,再次提醒下,Alberl用的duilib版本是SVN上第个版本,时间是2013.08.15~       这里给出Alberl最后汇总的一个工程,戳我下载,效 ...

  10. plain framework 1 参考手册 入门指引之 简明教程

    简明教程 简单的例子 实现代码 简单的例子 如果你已经下载好整个框架的源码,那么你可以在这里找到应用的例子: plainframework/applications/pf_simple 如果你在win ...

随机推荐

  1. 使用EF批量新增数据十分缓慢

    使用EF来批量新增数据,发现效率非常的差,几千条数据时甚至需要几分钟来执行,迫于无奈使用sql来执行了. 今天偶然看到一篇关于EF的文章,才发觉原来是自己对EF不够了解的原因. 一般新增时我们是将所有 ...

  2. DEDECMS安全设置怎样做,您就不会说它不安全了

    dedecms是好用,优化也好,就是不安全,个人是这样认为的,今天 闲着没事 整理了一些有助于dedecms网站安全的一些设置,可以说是目前最全的dedecms安全设置! 其一:保持DEDE更新,及时 ...

  3. Java学习——网络编程

    Java学习——网络编程 摘要:本文主要介绍了什么是网络编程,以及如何使用Java语言进行网络编程. 部分内容来自以下博客: https://www.cnblogs.com/renyuan/p/269 ...

  4. 前端开发JS——引用类型

    10.流程控制语句      注:var obj = {}:这里的obj转换boolean语句为true   if语句和java是一样的,判断条件也是根据上篇博客提到的假性值 // 弹出一个带输入框的 ...

  5. vue---v-model的详细解答

    1.v-model:双向数据绑定的实现原理     等同于一个  v-bind  加   v-on <div id="app"> <!-- <input t ...

  6. Python 报错 MySQLdb._exceptions.OperationalError: (2059, )

    Python连接MySQL数据时:报错提示MySQLdb._exceptions.OperationalError: (2059, <NULL>). Python包: mysqlclien ...

  7. js中对字符串(String)去除空格

    str为要去除空格的字符串: 去除所有空格: str = str.replace(/\s+/g,""); 去除两头空格: str = str.replace(/^\s+|\s+$/ ...

  8. JMETER 使用随机变量

    使用场景 在发起流程时,我们需要模拟实际情况,不同的用户可以产生不一样数量的流程实例,因此我们可以使用随机变量还进行模拟. 随机变量实例 1.添加一个循环计数器 2.添加一个循环 循环次数是根据随机变 ...

  9. bert剪枝系列——Are Sixteen Heads Really Better than One?

    1,概述 剪枝可以分为两种:一种是无序的剪枝,比如将权重中一些值置为0,这种也称为稀疏化,在实际的应用上这种剪枝基本没有意义,因为它只能压缩模型的大小,但很多时候做不到模型推断加速,而在当今的移动设备 ...

  10. Ubuntu下搭建Kubernetes集群(4)--部署K8S Dashboard

    K8S Dashboard是官方的一个基于WEB的用户界面,专门用来管理K8S集群,并可展示集群的状态.K8S集群安装好后默认没有包含Dashboard,我们需要额外创建它. 首先我们执行命令: wg ...