应用场景

1. 少年主动承担买菜家务，但却分不清黍、稷、麦、菽、稻时。
2. 青年独自生活，自己烧菜，却只菜名不知具体需要买啥时。
3. 大叔熟练管理家庭，但在买菜时出现漏买，少买时。

目标用户

• 对食材陌生，不知道如何挑选食材的少年。
• 不熟菜谱的青年。
• 买菜时，漏买，少买的大叔。

实现思路

将菜谱的食材进行分割，对每种食材配以图片和挑选小技巧，当菜肴出现组合时，将会对食材进行整合处理：区分类别；合并份量；食材互斥的提示警告，使得用户得到的购物清单整洁明了。

架构图

流程图

效果截图

1.菜单页

2.一览表页

3.个人主页

4.菜肴详情页

功能代码展示

1.前端查询数据库

db.collection('dish').where({
  dishId: Number(options.dishid),
}).get({
  success: (res) => {
    console.log(res)
    that.setData({
      fooddata: res.data[0],
      foodname: res.data[0].dishName, //菜名
      foodimg: this.data.dishImagePrefix + res.data[0].dishImage, //菜图
      mainlist: res.data[0].mainIngred, //主食材
      asslist: res.data[0].accessoryIngred, //副食材
      mixlist: res.data[0].mixedIngred, //配料
    })
    that.data.foodid = res.data[0].dishId; //菜id
    if (app.globalData.list.toString().indexOf(that.data.foodname) > -1) {
      that.setData({
        choseed: true,
      })
    }
  },
  fail: (err) => {}
})

2.云函数查询数据库

js操作页

wx.cloud.callFunction({ //调用云函数，修改数据库
  name: 'modifyCollection',
  data: {
    user_id: app.globalData.user_id, //用户_id
    list: app.globalData.collectionlist, //缓存的收藏数组
  },
  success: (res) => {
    console.log('调用modifyCollection的success')
    console.log(res)
  },
  fail: (err) => {
    console.log('调用modifyCollection的fail')
    console.log(err)
  }
})

云函数页

// 云函数入口文件
const cloud = require(‘wx-server-sdk’)
cloud.init({
env: ‘nrmc-fvtpb’,
})
const db = cloud.database()
// 云函数入口函数
exports.main = async (event, context) => {
try {
return await db.collection(“user”).doc(event.user_id).update({

  data: {
    collection: event.list,
  }
})

} catch (e) {
console.error(e)
}
}

3.二次贝塞尔函数

// 获取起始，控制，结束三点位置
getpoint: function () {
const that = this
const query = wx.createSelectorQuery()
query.select(’#actionStart’).boundingClientRect()
query.select(’#actionEnd’).boundingClientRect()
query.exec(function (res) {
console.log(res)

  that.data.startpoint['x'] = res[0].left;
  that.data.startpoint['y'] = res[0].top;

  that.data.endpoint['x'] = res[1].left + (res[1].width / 2);
  that.data.endpoint['y'] = res[1].top + (res[1].height / 2);

  that.data.controlpoint['x'] = (res[1].left - res[0].left) / 2 + res[0].left;
  that.data.controlpoint['y'] = res[0].top - 100;

})

},
// 计算运动轨迹
bezier: function () {
// A点为运动起点，B点为运动控制点，C点为运动终点，D为在AB连线上运动的点，E为在BC连线上运动的点，F为DE连线上运动的点
var bezier_points = []; //点的运动轨迹

// console.log(this.data.startpoint)
// console.log(this.data.controlpoint)
// console.log(this.data.endpoint)
var points_D = [];
var points_E = [];

var time = 20; //设置D从A到B花的时间
const DIST_AB = Math.sqrt(Math.pow(this.data.controlpoint['x'] - this.data.startpoint['x'], 2) + Math.pow(this.data.controlpoint['y'] - this.data.startpoint['y'], 2)); //AB两点直线距离
console.log(DIST_AB)
const DIST_BC = Math.sqrt(Math.pow(this.data.controlpoint['x'] - this.data.endpoint['x'], 2) + Math.pow(this.data.controlpoint['y'] - this.data.endpoint['y'], 2)); //AB两点直线距离
console.log(DIST_BC)
const EACH_MOVE_AD = DIST_AB / time; //D点每次移动的距离
console.log(EACH_MOVE_AD)
const EACH_MOVE_BE = DIST_BC / time; //E点每次移动的距离
console.log(EACH_MOVE_BE)
const Tan_BAC = (this.data.controlpoint['y'] - this.data.startpoint['y']) / (this.data.controlpoint['x'] - this.data.startpoint['x']) //角BAC的正切值
console.log(Tan_BAC)
const Tan_BCA = (this.data.endpoint['y'] - this.data.controlpoint['y']) / (this.data.endpoint['x'] - this.data.controlpoint['x']) //角BCA点的正切值
console.log(Tan_BCA)
const RADIUS_BAC = Math.atan(Tan_BAC); //角BAC的度数
console.log(RADIUS_BAC)
const RADIUS_BCA = Math.atan(Tan_BCA); //角BCA的度数
console.log(RADIUS_BCA)

for (var i = 1; i <= time; i++) {

  var DIST_AD = EACH_MOVE_AD * i; //AD的距离
  var DIST_BE = EACH_MOVE_BE * i; //BE的距离

  //D点坐标
  var point_D = {}
  point_D['x'] = DIST_AD * Math.cos(RADIUS_BAC) + this.data.startpoint['x'];
  point_D['y'] = DIST_AD * Math.sin(RADIUS_BAC) + this.data.startpoint['y'];
  points_D.push(point_D)

  // E点坐标
  var point_E = {};
  point_E['x'] = DIST_BE * Math.cos(RADIUS_BCA) + this.data.controlpoint['x'];
  point_E['y'] = DIST_BE * Math.sin(RADIUS_BCA) + this.data.controlpoint['y'];
  points_E.push(point_E)
  // 线段DE的正切值
  var Tan_DE = (point_E['y'] - point_D['y']) / (point_E['x'] - point_D['x'])

  // 线段DE的角度
  var RADIUS_DE = Math.atan(Tan_DE)

  // 线段DE的长度
  var DIST_DE = Math.sqrt(Math.pow(point_E['x'] - point_D['x'], 2) + Math.pow(point_E['y'] - point_D['y'], 2))

  // 线段DF的长度
  var DIST_DF = (i / time) * DIST_DE
  console.log(DIST_DF)

  // F点坐标
  var point_F = {}
  point_F['x'] = DIST_DF * Math.cos(RADIUS_DE) + point_D['x']
  point_F['y'] = DIST_DF * Math.sin(RADIUS_DE) + point_D['y']

  bezier_points.push(point_F) //点的轨迹丢入运动轨迹列表

}
console.log(points_D)
console.log(points_E)
console.log(bezier_points)

this.data.movinglist = bezier_points //完整的运动轨迹
this.setData({
  movinglist: this.data.movinglist
})
console.log(this.data.movinglist)

},

作品体验二维码

演示视频

视频

源码地址

源码地址

团队简介

一个小程序前端程序猿，最喜欢思考的问题是，哎，当您看到我做的这个页面，您在干什么，您在想什么，您现在最需要什么。

小彩蛋

如果您在想为啥叫男人买菜，那您一定得看看这个彩蛋，

邀请您身边的集美(姐妹)们，一起去逛一趟菜市场吧！ 有感受的点个小星星吧！

写在最后

十分感谢小程序官方提供这样的一个参赛环境，也十分感谢在完成作品的过程中，直接帮助和间接提供源码demo帮助的大佬们。