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

时间 2019-11-13

标签 10天学会 phpwechat 第十会员注册登陆以及微信网页开发栏目 HTML 繁體版

原文原文链接

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

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

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

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

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

实例：java

<?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）：jquery

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

因为phpWeChat使用了命名空间，因此请在须要获取openid的文件头部加上数据库

use WeChat\WeChat;

示例：api

<?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;
    }
?>

效果：数组

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

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

四、微信JS-SDK几个经常使用参数的生成

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

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

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

 1 <?php
 2 //jsapipara
 3 $jsapipara=array();
 4 
 5 $jsapipara['appid']=WECHAT_APPID;
 6 $jsapipara['noncestr']=create_rand(16);
 7 $jsapipara['timestamp']=CLIENT_TIME;
 8 
 9 $str=array();
10 
11 $str[0]='noncestr='.$jsapipara['noncestr'];
12 $str[1]='jsapi_ticket='.WECHAT_JSAPI_TICKET;
13 $str[2]='timestamp='.$jsapipara['timestamp'];
14 $str[3]='url='.format_url(get_current_url());
15 
16 sort($str, SORT_STRING);
17 
18 $jsapipara['signature']=sha1(implode('&',$str));
19 
20 print_r($jsapipara);
21 ?>

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

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

一、在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']：未登陆状态下，该变量为一个空数组，登陆状态下，改变量则存储了登陆用户的所有信息（如登陆事件，注册事件，头像等）；

二、若是不借助于公众号，咱们不管在PC端仍是在公众号端，都须要用访问以上地址的方法来进行注册、登陆。可是在借助公众号的openid的状况下，咱们能够经过如下代码实现用户的自动登陆：

 1 <?php
 2     //自适应模块的PC前端控制器
 3     use wechat\hello\hello;
 4     use phpWeChat\Area;
 5     use phpWeChat\CaChe;
 6     use phpWeChat\Config;
 7     use phpWeChat\Member;
 8     use phpWeChat\Module;
 9     use phpWeChat\MySql;
10     use phpWeChat\Order;
11     use phpWeChat\Upload;
12     use WeChat\WeChat;
13 
14     !defined('IN_APP') && exit('Access Denied!');
15 
16     /********* H5公众号端自动登陆代码开始 **********/
17     if(!$_SESSION['openid'])
18     {
19         $_SESSION['openid']=WeChat::getOpenID();
20     }
21 
22     Member::createRandAccount();//这个方法是自动建立会员ID
23     /********* H5公众号端自动登陆代码结束 **********/
24 
25     switch($action)
26     {
27         case 'test':
28             echo $_userid;
29 
30             exit();
31             break;
32         
33         default:
34             break;
35     }
36 ?>

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

小贴士：您能够熟记这个自动登陆代码，由于它很实用。

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

 1 <?php
 2     //自适应模块的PC前端控制器
 3     use wechat\hello\hello;
 4     use phpWeChat\Area;
 5     use phpWeChat\CaChe;
 6     use phpWeChat\Config;
 7     use phpWeChat\Member;
 8     use phpWeChat\Module;
 9     use phpWeChat\MySql;
10     use phpWeChat\Order;
11     use phpWeChat\Upload;
12     use WeChat\WeChat;
13 
14     !defined('IN_APP') && exit('Access Denied!');
15 
16     /********* H5公众号端自动登陆代码开始 **********/
17     if(!$_SESSION['openid'])
18     {
19         $_SESSION['openid']=WeChat::getOpenID();
20     }
21 
22     Member::createRandAccount();//这个方法是自动建立会员ID
23     /********* H5公众号端自动登陆代码结束 **********/
24 
25     switch($action)
26     {
27         case 'test':
28             echo $_userid;
29             print_r($PW['memberlogin']);
30             exit();
31             break;
32         
33         default:
34             break;
35     }
36 ?>

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

3、示例：经过jssdk调用微信扫一扫接口

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

 1 <?php
 2     //自适应模块的PC前端控制器
 3     use wechat\hello\hello;
 4     use phpWeChat\Area;
 5     use phpWeChat\CaChe;
 6     use phpWeChat\Config;
 7     use phpWeChat\Member;
 8     use phpWeChat\Module;
 9     use phpWeChat\MySql;
10     use phpWeChat\Order;
11     use phpWeChat\Upload;
12     use WeChat\WeChat;
13 
14     !defined('IN_APP') && exit('Access Denied!');
15 
16     /********* H5公众号端自动登陆代码开始 **********/
17     if(!$_SESSION['openid'])
18     {
19         $_SESSION['openid']=WeChat::getOpenID();
20     }
21 
22     Member::createRandAccount();//这个方法是自动建立会员ID
23     /********* H5公众号端自动登陆代码结束 **********/
24 
25     switch($action)
26     {
27         case 'test':
28             //jsapipara
29             $jsapipara=array();
30 
31             $jsapipara['appid']=WECHAT_APPID;
32             $jsapipara['noncestr']=create_rand(16);
33             $jsapipara['timestamp']=CLIENT_TIME;
34 
35             $str=array();
36 
37             $str[0]='noncestr='.$jsapipara['noncestr'];
38             $str[1]='jsapi_ticket='.WECHAT_JSAPI_TICKET;
39             $str[2]='timestamp='.$jsapipara['timestamp'];
40             $str[3]='url='.format_url(get_current_url());
41 
42             sort($str, SORT_STRING);
43 
44             $jsapipara['signature']=sha1(implode('&',$str));
45             break;
46         
47         default:
48             break;
49     }
50 ?>

二、咱们在视图端发起调用

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <script language="javascript" type="text/javascript">
 6    var PW_PATH='{__PW_PATH__}';
 7 </script>
 8 <script src="{__PW_PATH__}statics/jquery/jquery-1.12.2.min.js" language="javascript"></script>
 9 <script src="{__PW_PATH__}statics/core.js" language="javascript"></script>
10 <title>jssdk示例</title>
11 </head>
12 
13 <body>
14 <input type="button" value="点我发起扫一扫" id="saoyisao" />
15 <script language="javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
16 <script>
17     wx.config({
18       debug: false,
19       appId: '{$jsapipara['appid']}',
20       timestamp: {$jsapipara['timestamp']},
21       nonceStr: '{$jsapipara['noncestr']}',
22       signature: '{$jsapipara['signature']}',
23       jsApiList: [
24         'checkJsApi',
25         'onMenuShareTimeline',
26         'onMenuShareAppMessage',
27         'onMenuShareQQ',
28         'onMenuShareWeibo',
29         'onMenuShareQZone',
30         'hideMenuItems',
31         'showMenuItems',
32         'hideAllNonBaseMenuItem',
33         'showAllNonBaseMenuItem',
34         'translateVoice',
35         'startRecord',
36         'stopRecord',
37         'onVoiceRecordEnd',
38         'playVoice',
39         'onVoicePlayEnd',
40         'pauseVoice',
41         'stopVoice',
42         'uploadVoice',
43         'downloadVoice',
44         'chooseImage',
45         'previewImage',
46         'uploadImage',
47         'downloadImage',
48         'getNetworkType',
49         'openLocation',
50         'getLocation',
51         'hideOptionMenu',
52         'showOptionMenu',
53         'closeWindow',
54         'scanQRCode',
55         'chooseWXPay',
56         'openProductSpecificView',
57         'addCard',
58         'chooseCard',
59         'openCard'
60       ]
61     });
62 </script>
63 <script language="javascript">
64     $(document).ready(function(){
65         $('#saoyisao').click(function(){
66             wx.scanQRCode({
67                 needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
68                 scanType: ["qrCode","barCode"], // 能够指定扫二维码仍是一维码，默认两者都有
69                 success: function (res) {
70                 var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
71                 alert(result);
72             }
73             });
74         });
75     });
76 </script>
77 </body>
78 </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——第一天：核心框架的目录结构