当前位置:首页 > 网站技术 > 后端技术 > 正文内容

PHPCMS完成手机端搭建全教程(新手看完即会)

binadmin2020-06-04后端技术163

注:这篇文章是在我做完一个自适应和一个响应式网站后写的。

所以我建议,如果可以的话,最好用@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的分类需要新建,

然后绑定对应的栏目,这种耦合方式比较好,也比较灵活。

QQ浏览器截图20200603000827.png

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端模板路径,

QQ浏览器截图20200603001029.png


如果你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了。

如下图:

QQ浏览器截图20200603002608.png



手机端数据调用 :  

字段: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>


标签: phpcmshtml
分享给朋友:

相关文章

PHP入门基础之MySQL基础

PHP入门基础之MySQL基础

1、什么是数据库相关术语:数据库系统(Database System):DBS{    数据库(Database)    数据管理系统(Database Man...

PHPCMS列表页ajax动态获取更多(新手看完即会)

PHPCMS列表页ajax动态获取更多(新手看完即会)

本文取自Dong-Ge的phpcms 列表页ajax点击加载更多文章但是在实践过程中,由于我对phpcms的不熟悉导致还是浪费了一点时间经过咨询大佬,终于完美解决。1、在phpcms/model创建一...

 PHP入门基础之PHP操作MySQL数据库

PHP入门基础之PHP操作MySQL数据库

1、PHP操作MySQL数据库的三种方式1.PHP mysql扩展PHP2.0版本开始引入,仅提供面向过程的接口通过调用函数实现例子:<?php     ...

phpcms筛选功能的实现(新手看完就会)

phpcms筛选功能的实现(新手看完就会)

首先,我是在网上找了很多资料,基本上都是一样的代码,都是复制一段PHP代码然后调用模板,我也在坑里呆了好久。他们的链接我放在下面,以免误坑。http://m.genban.org/teach/teac...

使用火车头采集文章并发布在PHPCMS里(新手看完即会)

使用火车头采集文章并发布在PHPCMS里(新手看完即会)

网上其实有免登录的方法 https://www.gwygd.com/rRz6bMWRO.html但是我用过,发现不能用,所以只好用了登录的方法,所幸成功了。首先下载火车头,里面有phpcms采集文章的...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

分享:

支付宝

微信