教你用EasyWeChat和PHP建立微信小程式的預約與排隊功能

教你用EasyWeChat和PHP建立微信小程式的預約與排隊功能

簡介：
隨著微信小程式的日漸流行，越來越多的企業開始在小程式中提供預約與排隊服務。本文將教你如何使用EasyWeChat和PHP建立微信小程式的預約與排隊功能，讓使用者實現即時線上預約和排隊等候。本文將透過程式碼範例詳細介紹具體實現過程。

一、環境需求

• 伺服器環境：建議使用Linux環境，並安裝了PHP和MySQL；
• EasyWeChat：一個方便開發微信應用程式的函式庫。

二、建置環境

1. 下載EasyWeChat
   首先，我們需要在我們的專案中下載並設定EasyWeChat。可以透過composer進行安裝，執行以下指令：

   composer require overtrue/wechat

2. 設定應用程式
   在應用程式中新建一個服務提供者，設定EasyWeChat：

   <?php
   // services/WeChatServiceProvider.php
   
   use EasyWeChatFactory;
   use PimpleContainer;
   use PimpleServiceProviderInterface;
   
   class WeChatServiceProvider implements ServiceProviderInterface
   {
    public function register(Container $app)
    {
        $config = [
            'app_id' => 'your-app-id',
            'secret' => 'your-app-secret',
            'token' => 'your-token',
            'response_type' => 'array',
            'log' => [
                'level' => 'debug',
                'file' => '/path/to/your/log/file.log',
            ],
        ];
   
        $app['wechat'] = function () use ($config) {
            return Factory::officialAccount($config);
        };
    }
   }

   在上面的程式碼中，需要替換成自己的小程式的ID、秘鑰和Token。同時可以根據需要進行日誌配置。

3. 註冊服務提供者
   將WeChatServiceProvider註冊到專案中的服務提供者：

   $app->register(new WeChatServiceProvider());

三、實作預約功能

在微信小程式中，我們可以透過範本訊息來實現預約功能。在小程式中，使用者填寫相關預約資訊並提交後，後台將產生一條預約記錄，並將該記錄中的資訊作為範本訊息發送給使用者。

1. 資料庫表設計
   首先，建立一個名為appointment的資料庫表，用於儲存使用者預約資訊。表結構參考如下：

   CREATE TABLE `appointment` (
     `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
     `openid` varchar(100) NOT NULL,
     `name` varchar(50) NOT NULL,
     `phone` varchar(20) NOT NULL,
     `date` date NOT NULL,
     `time` time NOT NULL,
     `created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
     PRIMARY KEY (`id`)
   ) ENGINE=InnoDB DEFAULT CHARSET=utf8;

2. 小程式頁面
   在小程式中，我們需要建立一個預約頁面，使用者填寫相關資訊並提交。範例如下：

   <view class="container">
     <form bindsubmit="submitForm">
    <view class="form-item">
      <text>姓名：</text>
      <input type="text" name="name" placeholder="请输入姓名" bindinput="bindNameInput" />
    </view>
    <view class="form-item">
      <text>手机号：</text>
      <input type="number" name="phone" placeholder="请输入手机号" bindinput="bindPhoneInput" />
    </view>
    <view class="form-item">
      <text>日期：</text>
      <picker mode="date" bindchange="bindDateChange">
        <view>{{ date }}</view>
      </picker>
    </view>
    <view class="form-item">
      <text>时间：</text>
      <picker mode="time" bindchange="bindTimeChange">
        <view>{{ time }}</view>
      </picker>
    </view>
    <view class="form-item">
      <button form-type="submit" class="btn-submit">提交</button>
    </view>
     </form>
   </view>

在上述程式碼中，我們使用了bindsubmit來綁定表單的提交事件，用戶填寫資訊後點擊提交按鈕即可觸發該事件。

3. 後台處理
   在後台PHP中，我們需要編寫處理預約請求的程式碼，將使用者提交的資訊儲存到資料庫中，並傳送範本訊息給使用者。範例如下：

   <?php
   // save appointment
   $openid = $_SESSION['openid'];
   $name = $_POST['name'];
   $phone = $_POST['phone'];
   $date = $_POST['date'];
   $time = $_POST['time'];
   
   $db->query("INSERT INTO appointment (openid, name, phone, date, time) VALUES ('$openid', '$name', '$phone', '$date', '$time')");
   
   // send template message
   $app = $app['wechat'];
   
   $result = $app->template_message->send([
    'touser' => $openid,
    'template_id' => 'your-template-id',
    'url' => 'your-url',
    'data' => [
        'first' => '您已成功预约！',
        'keyword1' => $name,
        'keyword2' => $date . ' ' . $time,
        'remark' => '请准时到达！',
    ],
   ]);
   
   if ($result['errcode']) {
    // handle error
    echo $result['errmsg'];
   }
   

   在上述程式碼中，我們首先從會話中取得使用者的openid，並將使用者提交的資訊插入資料庫中。然後，使用EasyWeChat提供的範本訊息功能向使用者發送預約成功的範本訊息。

四、實作排隊功能

對於排隊功能，我們可以使用資料庫中的自增ID來進行計數。當使用者進行排隊時，根據目前排隊人數為其產生一個排隊號，並將其排隊號和相關資訊儲存到資料庫中。用戶可以隨時查詢自己的排隊號碼和目前排隊人數，並透過輪詢來獲取最新的排隊狀態。

1. 資料庫表設計
   建立一個名為queue的資料庫表，用於儲存使用者排隊資訊。表格結構參考如下：

   CREATE TABLE `queue` (
     `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
     `openid` varchar(100) NOT NULL,
     `name` varchar(50) NOT NULL,
     `phone` varchar(20) NOT NULL,
     `queue_no` int(11) unsigned NOT NULL,
     `created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
     PRIMARY KEY (`id`)
   ) ENGINE=InnoDB DEFAULT CHARSET=utf8;

2. 查詢目前排隊人數
   在後台PHP中，我們需要編寫查詢目前排隊人數的程式碼，範例如下：

   <?php
   // query queue number
   $count = $db->query("SELECT COUNT(*) FROM queue")->fetchColumn();
   
   echo $count;

   在上述範例程式碼中，我們使用SELECT COUNT(*)來查詢目前排隊人數，並傳回給前端。

3. 用戶排隊
   在小程式中，用戶可以點擊排隊按鈕進行排隊，並將相關資訊提交到後台進行處理。範例如下：

   // index.js
   // enqueue
   function enqueue() {
     wx.request({
    url: 'your-api-url',
    method: 'POST',
    data: {
      openid: getApp().globalData.openid,
      name: this.data.name,
      phone: this.data.phone
    },
    success: function(res) {
      wx.showToast({
        title: '排队成功',
        duration: 1500
      })
    }
     })
   }

   在上述範例程式碼中，我們使用wx.request#來發起後台請求，將使用者的openid，姓名和手機號碼提交到後台進行排隊處理。

4. 查詢排隊號
   使用者可以隨時查詢自己的排隊號，以及目前排隊人數。在小程式中，我們可以使用setInterval來進行輪詢查詢並更新頁面顯示。範例如下：

   // index.js
   // get queue number
   function getQueueNumber() {
     var intervalId = setInterval(function() {
    wx.request({
      url: 'your-api-url',
      method: 'GET',
      success: function(res) {
        var queueNo = res.data.queue_no;
        var count = res.data.count;
   
        if (queueNo > 0) {
          clearInterval(intervalId);
          wx.showModal({
            title: '排队成功',
            content: '当前排队人数：' + count + '
   您的排队号：' + queueNo
          })
        }
      }
    })
     }, 2000);
   }

   在上述範例程式碼中，我們使用wx.request#來輪詢查詢使用者的排隊信息，如果排隊號碼大於0，則說明排隊成功，並展示目前排隊人數和使用者的排隊號碼。

總結：
透過以上步驟，我們可以透過EasyWeChat和PHP建立一個簡單的微信小程式的預約與排隊功能。用戶可以透過小程式進行線上預約，並即時查詢自己的排隊狀態，為用戶提供了更方便的預約和排隊服務。希望本文對你有幫助！

以上是教你用EasyWeChat和PHP建立微信小程式的預約與排隊功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！