随着移动互联网的崛起，现在的客户越来越重视产品的移动互联网化，也就是一个网站项目需要有三个版本展示个用户。也就是传统的PC站点，微信端的微网站，和Wap端的网站。

有两种方案可以解决网站的不同终端的适配问题，一种是使用css3的 @media screen and (min-width: 1000px)这种方式，对于网站结构简单的可以使用这种方式，这种方式可以使多个终端访问同一个地址，看到的效果不一样。另外一种也就是现在要介绍的，根据判断是否是手机浏览器，微信浏览器进行分流。这样可以做出不同风格的版面，且自定义的程度高，扁平化，单一页面维护简单，缺点是页面多维护多，不过能提升B格也是值得的。

需求分析：建一个VController来进行分流。

示例一个pc的地址是 http://www.dodobook.net/php?id=1 
当到微信端http://www.dodobook.net/wx/php/view?id=1 
到wap端 http://www.dodobook.net/wap/php/view?id=1

此处的wx，wap是在控制器下面的目录中
wx 的目录下面有php 这个控制器，里面有view这个方法 目录结构如下图

直接上VController的代码

<?php
//DoDoBook V2016
namespace app\components;
use Yii;

use app\extensions\common\MobileDetect;		//检测PC--手机--微信浏览器
//PC端   微信扫描支付+支付宝支付--手机号登陆(1000px)
//WAP端  微信扫码支付+支付宝支付--手机号登陆(320*)
//WX端   微信直接JSAPI支付--微信直接授权登陆(320*)

class VController extends BaseController{

	//控制器之前先判断用户的浏览器
	public function beforeAction($action) {
		if(Yii::$app->params['isLocalEnvironment'] == 'YES'){
			return true;
		}
	//	return true;
		$wxWapId = Yii::$app->controller->id;		//当前控制器
		if(Yii::$app->controller->id == 'site' && Yii::$app->controller->action->id == 'error'){
			return true;
		}

		$detect = new MobileDetect();
		$realWxWapId = '';
		if($detect->isMobile()) {
			if($detect->isWeixin()){										//是微信浏览器
				if(stripos($wxWapId,"wx/") === 0 ){							//在控制器里面查找到wx
					return true;
				}else if(stripos($wxWapId,"wap/") === 0 ){					//是手机网页的浏览器
					$realWxWapId = str_replace('wap/', 'wx/', $wxWapId);	//替换目录
				}else{
					$realWxWapId = 'wx/'.$wxWapId;    						//加深目录
				}
			}else{										//其他手机浏览器
				if(stripos($wxWapId,"wap/") === 0 ){	//在控制器里面查找到wx
					return true;
				}else if(stripos($wxWapId,"wx/") === 0 ){					//是手机网页的浏览器
					$realWxWapId = str_replace('wx/', 'wap/', $wxWapId);	//替换目录
				}else{
					$realWxWapId = 'wap/'.$wxWapId;    						//加深目录
				}
			}
		}else{			//PC端
			if(stripos($wxWapId,"wx/") === 0 ){				//在控制器里面查找到wx
				$realWxWapId = str_replace('wx/', '', $wxWapId);		//替换目录
			}else if(stripos($wxWapId,"wap/") === 0 ){					//是手机网页的浏览器
				$realWxWapId = str_replace('wap/', '', $wxWapId);		//替换目录
			}else{
				return true;
			}
		}
		if($realWxWapId){						//需要跳转--组装新的URL
			if($_SERVER['QUERY_STRING']){		//有查询字符串
				$realWxWapPcUrl = 'http://'.$_SERVER['HTTP_HOST'].'/'.$realWxWapId.'/'.Yii::$app->controller->action->id.'?'.$_SERVER['QUERY_STRING'];
			}else{
				$realWxWapPcUrl = '/'.$realWxWapId.'/'.Yii::$app->controller->action->id;
			}
			$this->redirect($realWxWapPcUrl);		//跳转
		}
	}
	
}

改天我还将介绍一种先进简单的方式 即 wx wap是以module的形势存在的分流。

链接下一篇: Yii2中公共类实现微信端wap端和PC端分离的方法(Modules)

愿你早日学会逢场作戏，愿你早点习惯物是人非。愿你早日学会云淡风轻，愿你早日习惯多愁善感。