微信小程序开发详解 7 微餐厅 -- 餐饮管理系统

  试想我们到餐馆消费，拿出手机扫一下二维码就可以排号、查看排队情况、查看菜单、点菜、买单，是不是很方便快捷？对餐厅的管理者来说，不需要开发或购买专门的排队软件，不需要添加额外的硬件设施，让用户扫一扫即可排号、点菜，随用随走。用户使用过小程序后，使用记录会留在微信的小程序列表中，方便用户再次使用，这又能增加回头客。

7.1 项目部署

   服务器端提供餐桌管理、排队管理、菜单管理等管理后台，同时为小程序提供Restful API。

   小程序端实现排队、查看菜单等功能。

   搭建开发环境：PHP + MySql，使用ThinkPHP 3.2框架。

   将server的所有文件上传到PHP的服务器根目录里。

    小程序：utils/common.js

    var baseUrl = 'http://www.example.com/restaurant/';

7.2 服务器端介绍

     数据库设计：餐厅有多种不同大小的餐桌，以满足不同数量的客人需求，比如小桌供1或2人使用，中桌供3或4人使用，大桌供5~10人使用，包厢供10人以上使用。

                            餐桌类型表category结构

                            餐桌表tables结构

        排队信息表queue结构：用queue表记录用户的排队信息

        用户信息表user结构：支持微信登录，需要user表来保存用户的登录态，用户信息表user结构

         菜单表menu结构

      管理后台介绍：包括餐桌类型管理、餐桌管理、排队管理和菜单管理，

      餐桌类型管理、餐桌管理可添加、编辑、删除操作。

      排队管理：

       菜单管理：

      API接口：

7.3 微信授权登录

     用户的公开信息，包括头像、昵称、国家、省份、城市、性别、微信客户端语言，不包含openid等敏感信息。

     encryptedData，包括敏感数据在内的完整用户信息的加密数据，需要进行解密。

     微信登录：

1. 调用wx.login，调用接口获取登录凭证（code）进而换取用户登录信息，包括用户的唯一标识（openid）和本次登录的会话密钥（session_key）。
2. 调用wx.getUserInfo获取用户的公开信息和加密数据encryptedData。
3. 小程序获取code后，提交到服务器端以换取session_key。
4. 小程序端获取用户公开信息和加密数据encryptedData。

app.js

//app.js
var common = require('./utils/common.js')
App({
  onLaunch: function () {
  },
  getUserInfo: function (cb) {
    var that = this
    if (this.globalData.userInfo) {
      typeof cb == "function" && cb(this.globalData.userInfo)
    } else {
      //调用登录接口
      wx.login({
        success: function (res) {
          wx.getUserInfo({
            success: function (res) {
              console.log(res);
              that.globalData.userInfo = res.userInfo
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
          
          if (res.code) {
            console.log(res);
            //发起网络请求
            wx.request({
              url: common.baseUrl + 'index.php/api/user/wxlogin',
              data: {
                code: res.code
              },
              success: function (res) {                
                that.globalData.openid = res.data.openid
                wx.setStorage({
                  key: "openid",
                  data: res.data.openid
                })
              }
            })
          } else {
            console.log('获取用户登录态失败！' + res.errMsg)
          }
        }
      })
    }
  },
  globalData: {
    userInfo: null,
    openid: null
  }
})

     服务器端：code换取session_key , Application/Api/Controller/UserController.class.php

    public function wxlogin(){
        $code = $_GET['code'];
        $url_format = 'https://api.weixin.qq.com/sns/jscode2session?appid=%s&secret=%s&js_code=%s&grant_type=authorization_code';
        $url = sprintf($url_format,C('APPID'),C('APPSECRET'),$code);
        $json = file_get_contents($url);
        $data = json_decode($json,true);
        if($data['openid']){
            $data['created_at'] = time();
            $UserModel = M('user');
            $where = array(
                "openid"=>$data['openid']
            );

            if($UserModel->where($where)->find()){
                $UserModel->where($where)->save($data);
            }else{
                $UserModel->add($data);
            }
            echo json_encode(array('msg'=>'ok','openid'=>$data['openid']));
        }else{
            echo json_encode(array('msg'=>'error'));
        }
    }

      数据签名加密：两个用途

（1）加密敏感信息，如openid、unionid等与业务安全相关的信息。

（2）数据完整校验，检测接口返回的内容是否被篡改、伪造或截断。

      步骤：

1. 签名校验算法涉及用户的session_key，通过wx.login登录流程获取用户的session_key，并自行维护与应用自身登录态的对应关系。
2. 通过调用接口（如wx.getUserInfo）获取数据时，接口会返回rawData、signature。其中，signature=sha1(rawData+session_key)。
3. 开发者将signature、rawData发送到开发者服务器进行校验。服务器利用用户对应的session_key使用相同的算法计算签名signature2，比对signature与signature2即可校验数据的完整性

    public function sign_test(){
        $data = array();
        $appid = 'wx4f4bc4dec97d474b';
        $sessionKey = 'tiihtNczf5v6AKRyjwEUhQ==';

        $encryptedData="CiyLU1Aw2KjvrjMdj8YKliAjtP4gsMZM
                QmRzooG2xrDcvSnxIMXFufNstNGTyaGS
                9uT5geRa0W4oTOb1WT7fJlAC+oNPdbB+
                3hVbJSRgv+4lGOETKUQz6OYStslQ142d
                NCuabNPGBzlooOmB231qMM85d2/fV6Ch
                evvXvQP8Hkue1poOFtnEtpyxVLW1zAo6
                /1Xx1COxFvrc2d7UL/lmHInNlxuacJXw
                u0fjpXfz/YqYzBIBzD6WUfTIF9GRHpOn
                /Hz7saL8xz+W//FRAUid1OksQaQx4CMs
                8LOddcQhULW4ucetDf96JcR3g0gfRK4P
                C7E/r7Z6xNrXd2UIeorGj5Ef7b1pJAYB
                6Y5anaHqZ9J6nKEBvB4DnNLIVWSgARns
                /8wR2SiRS7MNACwTyrGvt9ts8p12PKFd
                lqYTopNHR1Vf7XjfhQlVsAJdNiKdYmYV
                oKlaRv85IfVunYzO0IKXsyl7JCUjCpoG
                20f0a04COwfneQAGGwd5oa+T8yO5hzuy
                Db/XcxxmK01EpqOyuxINew==";

        $iv = 'r7BXXKkLb8qrSNn05n0qiA==';

        $pc = new \Org\Util\Weixin\DataCrypt($appid, $sessionKey);
        $errCode = $pc->decryptData($encryptedData, $iv, $data );

        if ($errCode == 0) {
            print($data . "\n");
        } else {
            print($errCode . "\n");
        }
    }

7.4 在线排号页

   

7.5 确认取号页

7.6 我的排号

7.7 查看菜单