本文作者:心月

phpcmsv9通过超全局变量$_SERVER变量实现PC端移动端双模板

心月IT博客 2019-05-10
摘要:phpcmsv9实现PC端移动端双模板的原理:通过判断 $_SERVER[ SERVER_NAME ] 获取的值的第一个字母是 m 还是 w ,如果是 m 则当成移动端的请求,调用移动端模板来渲染页面;如果不是 m 则当成 PC 端请求,调用 PC 端模板渲染页面。

PC端域名:www.xxx.com

移动端域名:m.xxx.com

当请求 www.xxx.com 及其下的子页面时,$_SERVER['SERVER_NAME'] 的值都为 www.xxx.com;


当请求 m.xxx.com 及其下的子页面时,$_SERVER['SERVER_NAME'] 的值都为 m.xxx.com;

    因此,phpcmsv9实现PC端移动端双模板的原理:通过判断 $_SERVER['SERVER_NAME'] 获取的值的第一个字母是 'm' 还是 'w',如果是 'm' 则当成移动端的请求,调用移动端模板来渲染页面;如果不是 'm' 则当成 PC 端请求,调用 PC 端模板渲染页面,这样就实现了移动端的请求以移动端模板渲染页面,PC 端请求则以 PC 端模板渲染页面。

    根据上面的原理,要实现双模板,首先得判断请求的域名是移动端的还是 PC 端的,因此在 phpcmsv9 模板渲染前先判断 $_SERVER['SERVER_NAME'] 的值。好在 phpmcsv9 模板中支持 php 代码,因此模板开始部分的内容可以这样写:

<!-- PC 模板文件 -->
{if substr($_SERVER['SERVER_NAME'], 0,1) == 'm'}
		{template "wap","*"}	//(wap:wap是手机端模板存放的文件夹名;*:星号代表的是手机端访问时你需要调用的模板文件名,不用带后缀)
	{else}
    【PC 端模板内容】
{/if}

这段代码的意思是,如果 $_SERVER['SERVER_NAME'] 的第一个字母是 'm' 则调用相应的手机端模板,否则就调用 PC 端模板。

首页双模版实例

<!-- PC index.html模板文件 -->
{if substr($_SERVER['SERVER_NAME'], 0,1) == 'm'}
		{template "content_m","index"}	//(content_m:content_m是手机端模板存放的文件夹名;*:星号代表的是手机端访问时你需要调用的模板文件名,不用带后缀)
	{else}
    【PC 端模板内容】
{/if}

栏目页、单页面、内容页也是这样处理。

phpcmsv9双模版

【注意问题】

    1、只需 PC 端模板的开始加域名判断,移动端页面无需处理。

    2、如果 pc 端的页面是静态页需要做请求url处理,让它移动端的请求跳转到移动端url,如果不会的,可以把下面的js代码放到 PC 端页面的 head 里面,url 规则需要修改成你自己网站对应的 url 规则。

<script type="text/javascript">
        function browserRedirect() {
            var sUserAgent = navigator.userAgent.toLowerCase();
            var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
            var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
            var bIsMidp = sUserAgent.match(/midp/i) == "midp";
            var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
            var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
            var bIsAndroid = sUserAgent.match(/android/i) == "android";
            var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
            var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
            if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
                {if $catid=='' && $id==''}
                window.location.href="http://{str_replace('www.','m.',$_SERVER['SERVER_NAME'])}/index.php";
                {elseif $id=='' && $catid!=''}
                window.location.href="http://{str_replace('www.','m.',$_SERVER['SERVER_NAME'])}/【移动端栏目页url规则】";
                {else}
                window.location.href="http://{str_replace('www.','m.',$_SERVER['SERVER_NAME'])}/【移动端内容页url规则】";
                {/if}
            }
        }
        browserRedirect();
     
    </script>

    3、移动端模板的处理

    在 PC 端请求移动端 url 时跳转到 PC 端 url 页面:

<script type="text/javascript">
        function browserRedirect() {
            var sUserAgent = navigator.userAgent.toLowerCase();
            var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
            var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
            var bIsMidp = sUserAgent.match(/midp/i) == "midp";
            var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
            var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
            var bIsAndroid = sUserAgent.match(/android/i) == "android";
            var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
            var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
            if (!bIsIpad && !bIsIphoneOs && !bIsMidp && !bIsUc7 && !bIsUc && !bIsAndroid && !bIsCE && !bIsWM) {
                {if $catid=='' and $id==''}
                window.location.href="http://{str_replace('m.','www.',$_SERVER['SERVER_NAME'])}/";
                {elseif $id=='' and $catid!=''}
                window.location.href="http://{str_replace('m.','www.',$_SERVER['SERVER_NAME'])}/【PC端栏目页url规则】";
                {else}
                window.location.href="http://{str_replace('m.','www.',$_SERVER['SERVER_NAME'])}/【PC端内容页url规则】";
                {/if}
            }
        }
        browserRedirect();
     
    </script>

    4、如果移动端页面也想用纯静态页面,可以参考《phpcmsv9移动端页面静态化实现方法——功能实现》,不过在移动端的模板中在渲染前要做好 url 处理,否则有可能最后生成的移动端页面里的 url 的主域名是PC端的。

文章版权及转载声明:

作者:心月 本文地址:http://www.xinyueseo.com/cms/268.html发布于 2019-09-07
文章转载或复制请以超链接形式并注明出处心月IT博客

分享到:
赞(

发表评论

快捷输入:

    评论列表 (有 0 条评论,人围观)参与讨论