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>