10天学会phpWeChat——第七天：创建一个自适应PC网站+H5移动端的模块

本教程基于phpWeChat核心框架1.1.0+版本。下载地址：http://s.phpwechat.com/app_38026ed22fc1a91d92b5d2ef93540f20

通过前面六讲的系列教程，我们完成了一个包含后台的文章管理模块。但，phpWeChat的初衷并不仅限于此，帮您迅速创建一个PC网站+微信公共号才是满足时代需求的模块。

今天，我们开始《10天学会phpWeChat》的第七讲：创建一个自适应PC网站+H5移动端的模块。

还以我们一开始创建的hello world模块为例。

1、进入模块管理，进行模块配置，我们勾选：这是一个兼具PC+公众号的模块（如果选中此项，程序将自动调用2套视图和2个控制器进行Pc和微信端的切换）选项，如图所示：

在phpWeChat1.1.0+版本中，我们增加了这个选项，一旦勾选，系统将自动根据用户所处的浏览环境（PC还是手机）来自动调用不同的前端控制器和视图文件，从而实现同一模块、同一URL在不同操作环境下的不同视图展示。

2、编辑H5和PC的控制器和视图文件

在phpWeChat1.1.0+版本的模块目录里，我们定义了h5_index.php为自适应模块的移动端前端控制器，index.php为自适应模块的PC端前端控制器；定义了template/h5_default/为自适应模块的移动前端视图目录，template/default/为自适应模块的PC端前端视图目录。

如果，一个模块不是自适应模块（即没有勾选[这是一个兼具PC+公众号的模块（如果选中此项，程序将自动调用2套视图和2个控制器进行Pc和微信端的切换）]选项），那么h5_index和h5_default 目录则是无效目录，实际开发中不用顾及。

我们分别编辑h5_index.php和index.php

h5_index.php

 <?php
     use wechat\hello\hello;
     use phpWeChat\Area;
     use phpWeChat\CaChe;
     use phpWeChat\Config;
     use phpWeChat\Member;
     use phpWeChat\Module;
     use phpWeChat\MySql;
     use phpWeChat\Order;
     use phpWeChat\Upload;

     !defined('IN_APP') && exit('Access Denied!');

     switch($action)
     {
         case 'index':
             echo '这是自适应模块的移动端前端控制器';
             exit();
             break;
         default:
             wealert('违法请求',false);
             break;
     }
 ?>

index.php

 <?php
     //自适应模块的PC前端控制器
     use wechat\hello\hello;
     use phpWeChat\Area;
     use phpWeChat\CaChe;
     use phpWeChat\Config;
     use phpWeChat\Member;
     use phpWeChat\Module;
     use phpWeChat\MySql;
     use phpWeChat\Order;
     use phpWeChat\Upload;

     !defined('IN_APP') && exit('Access Denied!');

     switch($action)
     {
         case 'index':
             //从数据表读取数据并赋给数组$data
             //$data=Hello::dataList();
             echo '这是自适应模块的PC端前端控制器';
             exit();
             break;
         case 'detail':
             $data=Hello::dataGet($id); //$id 可以改成$_GET['id']
             break;
         case 'tougao':

             break;
         case 'tougaosave':
             //print_r($info);

             $op=Hello::dataInsert($info);

             if($op)
             {
                 echo '文章投稿成功，ID为'.$op;
             }
             else
             {
                 echo '文章投稿失败';
             }
             exit();
             break;
         //以下 case 条件仅为 示例。您可以根据业务逻辑自由修改和拓展

         //case 'index':

             //在此写 index.php?m=hello&a=index 时的逻辑

             //break;

         //case 'list':

             //在此写 index.php?m=hello&a=list 时的逻辑

             //break;

         //以此类推...

         //case '...':

             //在此写 index.php?m=hello&a=... 时的逻辑

             //break;

         default:
             break;
     }
 ?>

3、查看效果

在谷歌浏览器里直接访问http://www.example.com/index.php?m=hello&a=index，呈现如下图：

在谷歌浏览器里模拟手机访问，然后刷新，则呈现如下图：

如预期所想，我们达到了自己的目的。

在上面的示例中，我们简单的实现了一个自适应PC+手机的小型模块，至于如何在分别的控制器中读取视图数据库数据并展示给视图，原理和操作方法跟前面几讲说的是一样的。只是需要编写2个控制器和2套视图文件而已。

《10天学会phpWeChat》系列教程传送门：

10天学会phpWeChat——第十天：phpWeChat的会员注册、登录以及微信网页开发  

 

10天学会phpWeChat——第九天：数据库增、删、改、查(CRUD)操作

 

10天学会phpWeChat——第八天：Form类，丰富表单提交的字段类型 

 

10天学会phpWeChat——第七天：创建一个自适应PC网站+H5移动端的模块 

 

10天学会phpWeChat——第六天：实现新闻的后台管理 

 

10天学会phpWeChat——第五天：实现新闻投稿功能 

 

10天学会phpWeChat——第四天：大U函数U()的使用

 

10天学会phpWeChat——第三天：从数据库读取数据到视图 

 

10天学会phpWeChat——第二天：hello world！我的第一个功能模块 

 

10天学会phpWeChat——第一天：核心框架的目录结构