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

通过前面的系列教程，我们系统的讲解了phpWeChat从视图端、控制器端到模型端的操作流程；熟悉了phpWeChat的目录结构；掌握了视图端模板如何创建一个丰富的表单和模型端如何操作数据库。这一切都是传统Web以及现代H5开发的核心。

我们今天进行《10天学会phpWeChat》教程的最后一讲，phpWeChat的微信网页开发。在这一讲里，我们将重点讲解在微信网页开发中几个常见参数的获取和一个微信扫一扫的实例。

一、微信网页开发中的几个重要参数（文档参考：https://mp.weixin.qq.com/wiki）

如果您熟读过微信官方的公众号开发文档，您应该会清楚，在微信网页开发中，有几个参数是常见且重要的。

1、access_token：微信网页授权是通过OAuth2.0机制实现的，在用户授权给公众号后，公众号可以获取到一个网页授权特有的接口调用凭证（网页授权access_token），通过网页授权access_token可以进行授权后接口调用，如获取用户基本信息，phpWeChat框架默认集成了access_token的获取，您无需自己写代码或者关心其他，只需在需要使用access_token的地方使用PHP常量WECHAT_ACCESS_TOKEN即可获取。

实例：

<?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':
            echo WECHAT_ACCESS_TOKEN;

            exit();
            break;

        default:
            break;
    }
?>

效果（请在微信web开发者工具里进行打开URL）：

2、openid：openid是用户针对某个公众号的一个唯一身份标识。在关注者与公众号产生消息交互后，公众号可获得关注者的OpenID（加密后的微信号，每个用户对每个公众号的OpenID是唯一的。对于不同公众号，同一用户的openid不同）。公众号可通过本接口来根据OpenID获取用户基本信息，包括昵称、头像、性别、所在城市、语言和关注时间。phpWeChat框架默认集成了OpenID的获取，您无需自己写代码或者关心其他，只需在需要使用OpenID的地方使用WeChat::getOpenID()即可获取。

由于phpWeChat使用了命名空间，所以请在需要获取openid的文件头部加上

use WeChat\WeChat;

示例：

<?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;
    use WeChat\WeChat;

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

    switch($action)
    {
        case 'index':
            echo WeChat::getOpenID();

            exit();
            break;

        default:
            break;
    }
?>

效果：

3、jsapi_ticket：jsapi_ticket是公众号用于调用微信JS接口的临时票据。正常情况下，jsapi_ticket的有效期为7200秒，通过access_token来获取。phpWeChat框架默认集成了jsapi_ticket的获取，您无需自己写代码或者关心其他，只需在需要使用jsapi_ticket的地方使用PHP常量WECHAT_JSAPI_TICKET即可获取。

示例同获取access_token，不再赘述。

4、微信JS-SDK几个常用参数的生成

所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（详见微信官方文档：https://mp.weixin.qq.com/wiki?action=doc&id=mp1421141115&t=0.701470327053836）。

 wx.config({
 debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
 appId: '', // 必填，公众号的唯一标识
 timestamp: , // 必填，生成签名的时间戳
 nonceStr: '', // 必填，生成签名的随机串
 signature: '',// 必填，签名，见附录1
 jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
 });

以下代码提供了以上几个参数的生成方法，并赋给了一个数组。

 <?php
 //jsapipara
 $jsapipara=array();

 $jsapipara['appid']=WECHAT_APPID;
 $jsapipara['noncestr']=create_rand(16);
 $jsapipara['timestamp']=CLIENT_TIME;

 $str=array();

 $str[0]='noncestr='.$jsapipara['noncestr'];
 $str[1]='jsapi_ticket='.WECHAT_JSAPI_TICKET;
 $str[2]='timestamp='.$jsapipara['timestamp'];
 $str[3]='url='.format_url(get_current_url());

 sort($str, SORT_STRING);

 $jsapipara['signature']=sha1(implode('&',$str));

 print_r($jsapipara);
 ?>

以上代码生成了一个$jsapipara一维数组，其键值对应jssdk对应的config的几个参数。

二、微信公众号端用户的注册登录和自动登录

1、在phpWeChat的系统里，默认集成了用户登录、注册、找回密码的操作。访问地址分别如下：

会员登录：http://www.example.com/index.php?m=member&a=login

会员注册：http://www.example.com/index.php?m=member&a=register

找回密码：http://www.example.com/index.php?m=member&a=getpwd

在用户登录后，系统会自动生成一个变量$_userid和$PW['memberlogin']，这两个变量分别的意思是：

$_userid：未登录状态下，该变量永远为0，登录状态下，该变量的值为用户的会员ID（pw_member表的userid字段）；

我们常用判断$_userid是否为0来判断当前用户是否处于登录状态。

$PW['memberlogin']：未登录状态下，该变量为一个空数组，登录状态下，改变量则存储了登录用户的全部信息（如登录事件，注册事件，头像等）；

2、如果不借助于公众号，我们无论在PC端还是在公众号端，都需要用访问以上地址的方法来进行注册、登录。但是在借助公众号的openid的情况下，我们可以通过以下代码实现用户的自动登录：

 <?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;
     use WeChat\WeChat;

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

     /********* H5公众号端自动登录代码开始 **********/
     if(!$_SESSION['openid'])
     {
         $_SESSION['openid']=WeChat::getOpenID();
     }

     Member::createRandAccount();//这个方法是自动创建会员ID
     /********* H5公众号端自动登录代码结束 **********/

     switch($action)
     {
         case 'test':
             echo $_userid;

             exit();
             break;

         default:
             break;
     }
 ?>

访问后输出了11（自动为我创建的会员ID），在这个过程里，我没有进行任何注册的操作，系统便通过示例中的代码完成了自动注册、自动登录的2个连续操作。

小贴士：您可以熟记这个自动登录代码，因为它很实用。

此时打印$PW['memberlogin']，也输出了包含我信息的数组。

 <?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;
     use WeChat\WeChat;

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

     /********* H5公众号端自动登录代码开始 **********/
     if(!$_SESSION['openid'])
     {
         $_SESSION['openid']=WeChat::getOpenID();
     }

     Member::createRandAccount();//这个方法是自动创建会员ID
     /********* H5公众号端自动登录代码结束 **********/

     switch($action)
     {
         case 'test':
             echo $_userid;
             print_r($PW['memberlogin']);
             exit();
             break;

         default:
             break;
     }
 ?>

我们可以把当前登录的信息传给模板视图文件，例如将头像传给会员中心的<img>标签。

三、示例：通过jssdk调用微信扫一扫接口

1、我们首先在控制器端获取jssdk所需的参数

 <?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;
     use WeChat\WeChat;

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

     /********* H5公众号端自动登录代码开始 **********/
     if(!$_SESSION['openid'])
     {
         $_SESSION['openid']=WeChat::getOpenID();
     }

     Member::createRandAccount();//这个方法是自动创建会员ID
     /********* H5公众号端自动登录代码结束 **********/

     switch($action)
     {
         case 'test':
             //jsapipara
             $jsapipara=array();

             $jsapipara['appid']=WECHAT_APPID;
             $jsapipara['noncestr']=create_rand(16);
             $jsapipara['timestamp']=CLIENT_TIME;

             $str=array();

             $str[0]='noncestr='.$jsapipara['noncestr'];
             $str[1]='jsapi_ticket='.WECHAT_JSAPI_TICKET;
             $str[2]='timestamp='.$jsapipara['timestamp'];
             $str[3]='url='.format_url(get_current_url());

             sort($str, SORT_STRING);

             $jsapipara['signature']=sha1(implode('&',$str));
             break;

         default:
             break;
     }
 ?>

2、我们在视图端发起调用

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <script language="javascript" type="text/javascript">
    var PW_PATH='{__PW_PATH__}';
 </script>
 <script src="{__PW_PATH__}statics/jquery/jquery-1.12.2.min.js" language="javascript"></script>
 <script src="{__PW_PATH__}statics/core.js" language="javascript"></script>
 <title>jssdk示例</title>
 </head>

 <body>
 <input type="button" value="点我发起扫一扫" id="saoyisao" />
 <script language="javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
 <script>
     wx.config({
       debug: false,
       appId: '{$jsapipara['appid']}',
       timestamp: {$jsapipara['timestamp']},
       nonceStr: '{$jsapipara['noncestr']}',
       signature: '{$jsapipara['signature']}',
       jsApiList: [
         'checkJsApi',
         'onMenuShareTimeline',
         'onMenuShareAppMessage',
         'onMenuShareQQ',
         'onMenuShareWeibo',
         'onMenuShareQZone',
         'hideMenuItems',
         'showMenuItems',
         'hideAllNonBaseMenuItem',
         'showAllNonBaseMenuItem',
         'translateVoice',
         'startRecord',
         'stopRecord',
         'onVoiceRecordEnd',
         'playVoice',
         'onVoicePlayEnd',
         'pauseVoice',
         'stopVoice',
         'uploadVoice',
         'downloadVoice',
         'chooseImage',
         'previewImage',
         'uploadImage',
         'downloadImage',
         'getNetworkType',
         'openLocation',
         'getLocation',
         'hideOptionMenu',
         'showOptionMenu',
         'closeWindow',
         'scanQRCode',
         'chooseWXPay',
         'openProductSpecificView',
         'addCard',
         'chooseCard',
         'openCard'
       ]
     });
 </script>
 <script language="javascript">
     $(document).ready(function(){
         $('#saoyisao').click(function(){
             wx.scanQRCode({
                 needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
                 scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
                 success: function (res) {
                 var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
                 alert(result);
             }
             });
         });
     });
 </script>
 </body>
 </html>

效果：

点按钮则触发了微信扫一扫操作：

至此，《10天学会phpWeChat》系列教程就讲完了，相信您对phpWeChat以及对PC网站开发、微信公众号开发都有了更清晰的认识。我在后续也将继续发布一些跟phpWeChat开发相关的教程，更加深入、细致的讲解一些功能点。

感谢您花时间来阅读我这10篇语句并不通顺的博文，也期待您在未来对phpWeChat和本博客继续关注。

毕业了，同学们。我们工作中见。

《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——第一天：核心框架的目录结构