评论

#小程序云开发挑战赛#-男人买菜-JS起舞

一款贴心的男人买菜小程序!

应用场景

  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帮助的大佬们。

最后一次编辑于  09-20  
点赞 45
收藏
评论

16 个评论

  • 小布师叔
    小布师叔
    09-10

    旁边目录,在第一次编辑时选择markdown编辑器,然后用md语法写就自动生成了,希望对大家有帮助。

    09-10
    赞同 13
    回复
  • .
    .
    09-21
    儿别三日,当刮目相看
    09-21
    赞同 3
    回复 1
  • 宝
    09-22
    我儿出息了
    09-22
    赞同 1
    回复
  • 贰零壹柒
    贰零壹柒
    09-21
    涛儿不得了不得了
    09-21
    赞同 1
    回复
  • 谋谋谋
    谋谋谋
    09-10

    不光分不清 读都不会读

    09-10
    赞同 1
    回复 3
  • 小仙哥     500城
    小仙哥 500城
    09-24
    牛逼克拉斯,给👍
    09-24
    赞同
    回复
  • 叶叶
    叶叶
    09-24
    不得了,刮目相看,666 出息了
    09-24
    赞同
    回复
  • X 。
    X 。
    09-23
    起飞了 🚀🚀🚀
    09-23
    赞同
    回复
  • OREREO
    OREREO
    09-22

    彩蛋在哪看

    09-22
    赞同
    回复
  • 果冻🐰
    果冻🐰
    09-22

    厉害了!建议增加菜谱做法

    09-22
    赞同
    回复

正在加载...

登录 后发表内容