#小程序云开发挑战赛#-男人买菜-JS起舞
应用场景
少年主动承担买菜家务，但却分不清黍、稷、麦、菽、稻时。
青年独自生活，自己烧菜，却只菜名不知具体需要买啥时。
大叔熟练管理家庭，但在买菜时出现漏买，少买时。
目标用户
对食材陌生，不知道如何挑选食材的少年。
不熟菜谱的青年。
买菜时，漏买，少买的大叔。
实现思路
将菜谱的食材进行分割，对每种食材配以图片和挑选小技巧，当菜肴出现组合时，将会对食材进行整合处理：区分类别；合并份量；食材互斥的提示警告，使得用户得到的购物清单整洁明了。
架构图
[图片]
流程图
[图片]
效果截图
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帮助的大佬们。
