10天學會phpWeChat——第十天：phpWeChat的會員注冊、登錄以及微信網頁開發

本文轉載自查看原文 2017-01-15 19:09 5786 wechat開發教程/ 10天學會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）。

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的幾個參數。

二、微信公眾號端用戶的注冊登錄和自動登錄

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的情況下，我們可以通過以下代碼實現用戶的自動登錄：

 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>標簽。

三、示例：通過jssdk調用微信掃一掃接口

1、我們首先在控制器端獲取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 ?>

2、我們在視圖端發起調用

 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>