环境准备与小程序首页的运行逻辑

环境准备

上传云函数 getCustomerOpenid

上传云函数到云环境 xiongyuqingcloud ，调用云函数 Promise Cloud.callFunction(Object object) 返回一个 Promise 对象，所以不用考虑异步问题。获取用户的 openid 用于小程序唯一表示该用户。

获取 openid 两种方法文章链接

运行Java后台 ordermenu 工程

小程序项目入口文件 app.js

全局数据：定义数据结构和常量

定义取号模板，用户数据，用户 openid ，后台链接的根路径

  globalData: {
    tmplIds: {
      quhao: 'txbpCYdX_pjw0PXsOJrbCKixdHtJSUr4uyhQQEzAz_4', // 取号的模板,记得把这里换成你自己的
    },
    customerInfo: {},
    openid: null,
    baseUrl: 'http://localhost:8080/ordermenu' // 后台链接的根路径
    // baseUrl: 'http://192.168.209.141:8080/ordermenu' //真机调试时电脑的ip地址
  },

调用onLaunch 函数：

小程序初始化时触发，且只触发一次

在函数中初始化云开发环境，设置环境 id 为云函数所在的云环境 ID ：env: 'xiongyuqingcloud-0fs6wvf36054bfa'

函数功能：

• 调用云函数获取用户 openid

  通过 wx.cloud.callFunction 调用云函数获取用户 openid

• 设置缓存 openid ：wx.setStorageSync('openid', openid)

• 将获取到的 openid 保存到 globalData 中

• 根据 openid 从后台获取用户信息：getCustomerInfoFromBack()

getCustomerInfoFromBack 函数

功能：

• 从Java后台获取之前用户存储在后台数据库中的信息：wx.request
• 并将其缓存到小程序内存中便于其他页面读取：wx.setStorageSync('customer', app.globalData.customerInfo)

请求地址：url: app.globalData.baseUrl + '/customer/getCustomerInfo'

上传的数据：openid: app.globalData.openid

首页页面index运行逻辑

小程序首页界面设计

页面数据

• 初始数据：轮播图图片列表

  data:{
      picture: [],  // 轮播图图片
    }
  

• 页面全局数据：

  const app = getApp()	// 获取到小程序全局唯一的 App 实例
  let search_key = null	// 搜索关键字
  

• 页面显示前将搜索关键字设置为空

  onShow(){
      search_key = null
    }
  

• 页面加载时请求轮播图数据

  onLoad() {
      this.getSwiperPicture(); //轮播图
  }
  

页面响应

getSwiperPicture

在这里插入图片描述

请求地址：url: app.globalData.baseUrl + '/wechatPicture/getAll'

请求成功后 setData 到 picture 列表

代码：

wx.request({
      url: app.globalData.baseUrl + '/wechatPicture/getAll',
      success: function(res) {
        console.log("--------------java后台返回的轮播图数据-----------", res)
        if (res && res.data && res.data.data && res.data.data.length > 0) {
          let picture_list = res.data.data;
          console.log("java后台请求到的轮在这里插入图片描述

播图", picture_list)
          that.setData({
            picture: picture_list
          })
        } else {
          console.log("java后台请求到的轮播图为空，请到后台添加轮播图")
          that.setData({
            picture: []
          })
        }
      },
      fail(res){
        console.log("java后台请求轮播图失败，请检查后台是否运行")
      }
    })

页面跳转

• 点击搜索按钮，跳转到菜单界面，注意要加上搜索关键词

  /**
  * 点击搜索按钮后跳转到搜索结果的菜单界面
  */
  wx.navigateTo({
        url: '../menu/menu?search_key=' + search_key
      })
  

• 点击扫码点单

  • 调试程序时默认是一号餐位
  • 实际可以使用 wx.scanCode 根据二维码的扫描结果确定

    /**
     * @param {根据桌号点餐} table_num 
     */
    goToBuy(table_num) {
      // 缓存到内存中
      wx.setStorageSync("table_num", table_num)
      wx.navigateTo({
        url: '../menu/menu'
      })
    },
  

• 点击查看菜单，这次的关键词为 null ，即后台会返回所有菜品

    /**
     * 查看菜单按钮
     */
    seeMenuButton: function(){
      console.log("去往菜单界面")
      wx.navigateTo({
        url: '../menu/menu'
      })
    }, 
  

• 点击预约取号

    /**
     * 预约取号按钮
     */
    orderButton: function() {
      console.log("去往预约取号界面")
      wx.navigateTo({
        url: '../ordernum/ordernum',
      })
    },