PHPCMS完成手机端搭建全教程(新手看完即会)
注:这篇文章是在我做完一个自适应和一个响应式网站后写的。
所以我建议,如果可以的话,最好用@media css做响应式网站,这样就不用考虑手机端的各种问题。
因为我当初做的就是自适应,但是没有想到后面的坑是非常多。(第一次用phpcms)
首先1:是两端就要有两个模板,那么修改代码就要改两份。(维护也不容易)
然后2:在给网站做伪静态的时候更麻烦,我本来PC端就做好了,但是不会php,所以最后还是花钱请人帮我弄了手机端的伪静态
其次3:因为我自适应那个网站要做筛选,所以在手机端上也是请人帮我写的分页php代码,加班到凌晨两点,直接睡在公司。
接着4:后面网站上线要做SEO关键词和优化,更加麻烦。由于手机端不能在后台设置,我只能弄了很多个header模板。—__—
最后:做响应式当然是效率快和时间少。这样上司看见了也会觉得你能力不错,说不定哪天就给你涨薪资 ^__^ !
就像我做第二个站时,用的自适应,五天就把有着十个页面的网站写出来了。而且每一页的css都上了五百行。
而第一个站花了近一个月,这一个月里我更多的时间就是花在解决上面我说的三点bug上。
一、完成 基础配置搭建 手机端
参考链接https://www.cnblogs.com/bchjazh/articles/6076257.html
1:域名解析并建站
进入域名管理,建立A记录,解析至相应的IP地址,
比如将“www.phpcms.com”解析至www的IP,在服务器中新建一个站
如“m.phpcms.com”,(原网站如www.phpcms.com)将wap站的主目录只向与原网站一样,
并将wap站的默认设为index.php,原网站设为index.html.
2:在PHPCMS V9管理后台添加手机门户
PHPCMS V9后台管理中心 > 模块 > 手机门户 > 添加手机站点
填写站点名称、LOGO、绑定域名,注意域名一定是http://开头的。
3:分类管理
在建好的手机门户列表管理操作中有一项“分类管理”,WAP的分类需要新建,
然后绑定对应的栏目,这种耦合方式比较好,也比较灵活。
4:更改route.php
文件路径 /caches/configs/route.php
在 return array 中增加两行代码 'm.phpcms.com'=>array('m'=>'wap', 'c'=>'index', 'a'=>'init','data'=>array('GET'=>array('siteid'=>1))), 然后保存
5:在phpcms/templates/default/wap/index.html
修改模板,根据模板和第三步绑定的TYPEID 拿取和PC端一样的数据
如:
{pc:wap action="position" posid="1" order="listorder DESC" num="6"} {loop $data $r} <li> <a href="{$r[url]}">{str_cut($r['title'],26,'')}</a> <img src="{thumb($r[thumb],1903,507)}" alt="" alt="{$r[title]}" /> </li> {/loop} {/pc}
注:在手机端上url应为 {show_url($r[catid],$r[id],$typeid)} ,获取的才是带m的url
到这一步,只实现了手机端可以查看一个首页和list、show模板。
但是往往在业务中,我们往往会有多个list模板和show模板
二、如何绑定多个list模板和show模板
所以我参考了这位的链接 https://www.cnblogs.com/xyat/p/9947613.html 本 链接 由 襄阳艾特网络 http://www.xyat.cn 原创
让我完美实现了手机端和PC端共用一个数据的问题。 ,
他的思路就是修改PHP代码,使移动端的栏目和pc端的栏目绑定一样的模板,这里说绑定一样的模板指的是绑定同样的模板名字。
打开自己的PC端模板路径,
如果你pc端的栏目绑定模板规则如下:
图片栏目模板 category_picyure.html
图片列表模板 list_picture.html ----->内容页模板 show_picture.html
那么移动端的绑定结果如下 \phpcms\templates\default\wap
图片栏目模板 category_picyure.html
图片列表模板 list_picture.html ----->内容页模板 show_picture.html
你只需要在移动端的模板里面添加相应的模板文件,移动端栏目就能自动绑定。
就算你不添加,到时候打开页面也会提示你模板不存在。
下面是具体的代码修改
1、因为移动端首页模板绑定的是wap\index.html,所以不做修改。
2、打开\phpcms\modules\wap\index.php
在方法 lists 中,约47行
$template = ($TYPE[$typeid]['parentid']==0 && in_array($typeid,array_unique($parentids))) ? $WAP_SETTING['category_template'] : $WAP_SETTING['list_template'];
将其注释,然后添加代码
/*$template = ($TYPE[$typeid]['parentid']==0 && in_array($typeid,array_unique($parentids))) ? $WAP_SETTING['category_template'] : $WAP_SETTING['list_template']; */ // 改造wap的默认模板 使其跟随pc模板规则走 $setting = string2array($setting); $template = $setting['category_template'] ? $setting['category_template'] : 'category'; $template_list = $setting['list_template'] ? $setting['list_template'] : 'list'; $template = $child ? $template : $template_list; // 改造结束 // 重新组装数据 让catgory的模板也能用 if($child){ $catids_str = $arrchildid; $pos = strpos($catids_str,',')+1; $catids_str = substr($catids_str, $pos); $sql = "status=99 AND catid IN ($catids_str)"; $list = $this->db->select($sql, '*', $offset.','.$pagesize,'inputtime DESC'); $total = $this->db->count($sql); }else{ $list = $this->db->select(array('status'=>'99','catid'=>$catid), '*', $offset.','.$pagesize,'inputtime DESC'); } //重新组装数据结束
这样category 和list 都绑定了相应的栏目模板。其中数据就是 $list。 你可以使用$list进行遍历。
3、打开\phpcms\modules\wap\index.php
在方法 show中约206行 $template = $WAP_SETTING[‘show_template’] ? $WAP_SETTING[‘show_template’] : ‘show’; 将其注释
//$template = $WAP_SETTING['show_template'] ? $WAP_SETTING['show_template'] : 'show'; //处理模板调用 $template = $CAT['setting']['show_template'] ? $CAT['setting']['show_template'] : 'show';
ok 这样处理完成了!
三、如何绑定单页面
注:由于网站一般都带有单页页面,而且手机端的绑定栏目不能绑定单页,所以我想了一下,在添加栏目的时候我们就选择添加栏目。
在选择模板设置的时候,我把之前写在page_ai页面的代码复制到list_ai页面。
这样我们在手机门户的绑定栏目就可以看见了
最后在\phpcms\templates\default\wap下复制一份content的list_ui就OK了。
如下图:
手机端数据调用 :
字段:PC端调用 => 手机端调用
url:{$v[url]} => {show_url($r[catid],$r[id],$typeid)}
栏目id:catid (PC一级栏目id)=> typeid (手机绑定栏目id )
导航:{catpos($catid)} => {wap_pos($typeid)}
手机端详情页的上一篇和下一篇:
<p class="article-prev article-other"> {pc:get sql="select * from lr_article where id>$id and catid=$catid order by id" num="1" return="data"} {if $data} {loop $data $v} <span>上一篇:<a href="{show_url($v[catid],$v[id],$typeid)}">{str_cut($v[title], 70,'')}</a></span> {/loop} {else} <span>上一篇:没有了</span> {/if} {/pc} </p> <p class="article-next article-other"> {pc:get sql="select * from lr_article where id<$id and catid=$catid order by id desc" num="1" return="data"} {if $data} {loop $data $v} <span>下一篇:<a href="{show_url($v[catid],$v[id],$typeid)}">{str_cut($v[title], 70,'')}</a></span> {/loop} {else} <span>下一篇:没有了</span> {/if} {/pc} </p>
最后一步,就是加一段代码,让网站自动根据手机端或者PC端跳转域名
<script> function IsPC() { var userAgentInfo = navigator.userAgent; var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"]; var flag = true; for (var v = 0; v < Agents.length; v++) { if (userAgentInfo.indexOf(Agents[v]) > 0) { flag = false; break; } } return flag; } if(!IsPC()){ }else{ window.location.href='PC端域名' } </script>