一键Get美味菜谱！解锁私藏“小程序+云开发”神器

前端

2023-08-24 08:47:48

用小程序和云开发征服“今天吃什么”难题

在美食的世界里，最让人烦恼的问题莫过于“今天吃什么”。面对琳琅满目的冰箱食材，绞尽脑汁却不得其解，这种纠结可谓世纪难题。但别担心，现在有了一个神奇的解决办法——“小程序+云开发”制作菜谱神器。

打造你的专属菜谱小程序

首先，让我们打造一个属于自己的专属菜谱小程序。使用“微信开发者工具”创建小程序项目，勾选“云开发”选项。接下来，在云开发控制台中创建集合“recipes”，用于存储菜谱数据。

云函数：菜谱生成器的秘密武器

接下来，我们需要一个强大的菜谱生成器，这就是云函数。在云开发控制台中创建云函数“generateRecipe”，编写代码调用“cloud.callFunction”方法，传入食材列表，从云数据库中获取相应的菜谱数据。

小程序界面：简单易用，烹饪变得更轻松

小程序界面设计是人机交互的关键。在“index.wxml”页面中添加界面元素，包括输入框、按钮和列表。在“index.js”中编写逻辑代码，处理用户输入的食材，调用云函数生成菜谱。

体验小程序：告别“今天吃什么”的烦恼

完成上述步骤，我们的小程序就大功告成了。在手机上安装“微信开发者工具”，扫描小程序二维码，输入食材列表，点击“生成菜谱”按钮，即可获得美味食谱。

示例代码：

// index.js
const app = getApp();

Page({
  data: {
    ingredients: '',
    recipes: []
  },
  onLoad() {
    wx.cloud.callFunction({
      name: 'generateRecipe',
      data: {
        ingredients: this.data.ingredients
      },
      success: res => {
        this.setData({
          recipes: res.result.data
        })
      },
      fail: err => {
        console.error(err)
      }
    })
  },
  onInput(e) {
    this.setData({
      ingredients: e.detail.value
    })
  },
  onGenerate() {
    this.onLoad()
  }
})

// cloud functions/generateRecipe/index.js
exports.main = async (event, context) => {
  const db = cloud.database()
  const recipes = await db.collection('recipes').where({
    ingredients: event.ingredients
  }).get()
  return recipes
}