一、基础知识
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 ,代码为:
<"htmlcode">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结合, 也可以结合自己已有的接口。还有一些附件插件帮助我们实现一些常用功能。
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?
更新日志
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]