本文主要描述一个需求的产生到落地，并以最简单的方式实现上线
背景
外卖的盛行，方便了我们的生活，同时也给我们出了新的难题。中午吃什么？已经是人们每天必须面对的最大的难题。对于我这个挑食精致的广东仔来说，更是雪上加霜。每到中午，都要花上数十分钟在纠结要吃什么，结果往往最后还是点了昨天那份。
“中午吃什么？”绝对是打工人的宇宙难题。今天就来尝试解开这个难题。
分析问题
为了一探究竟，找了一批同为“外卖党”的同事，朋友，网友了解情况。得出以下结论：
- 平台内选择太多
- 没有特别喜欢的口味
- 想吃的太贵，便宜的不放心（还需要配送费）
- 外卖平台推荐的单一
第 3 点可以通过开通会员，领优惠券来解决。其他的可以通过给出推荐“菜品”来解决。
解决方案
根据以上的分析，最主要的问题是怎么给出一个或多个菜品？
这是一个很泛的问题，某团拥有这么多数据也没能解决，何况我这条小“菜狗”。逆向思考，是不是可以说明推荐菜品不一定需要算法和数据，仅仅用随机就好，就像是考试时抓阄。
原型
一次随机给出 8 个菜品，再从 8 个菜品中随机出一个作为推荐菜品。
秉着“点到为止”的想法，“解决即可”的原则，到此本该结束。在跟朋友聊天的时候了解到有优惠券这种神奇的东西。花时间研究了一番，并添加到原型。
为了体现菜品是随机选取的，所以把所有菜品都展示出来。
技术实现
根据原型展示的内容进行需求拆解：
- 九宫格随机（抽奖）
- 跳转第三方（某团，某了么）
- 上拉加载更多
点外卖都是手机下单，而某团，某了么均有小程序，并且有提供 小程序的 appID 和跳转的 path，所以选用小程序实现。
九宫格
九宫格菜品，然后随机抽取一个展示，本质上就是“九宫格抽奖”。既然决定要用最简单的方式实现，那就直接用第三方组件就好。lucky-canvas 刚好满足需求，且配置简单，并有完整实例。在实例的基础上修改即可。
安装 npm 包：
npm install mini-luck-draw
复制代码小程序不能直接使用 npm 包，需要先构建 npm 包，具体的内容请看：developers.weixin.qq.com/miniprogram…
引入组件：
{
"usingComponents": {
"lucky-grid":"/miniprogram_npm/mini-luck-draw/lucky-grid/index"
}
}
复制代码wxml:
<lucky-grid
id="myLucky"
width="100vw"
height="100vw"
blocks="{{blocks}}"
prizes="{{prizes}}"
buttons="{{buttons}}"
defaultStyle="{{defaultStyle}}"
bindstart="start"
bindend="end"
></lucky-grid>
复制代码js:
Page({
data: {
luckyNum: 0,
prizes: [],
blocks: [
{ padding: '16px', background: '#fff', borderRadius: 28 },
{ padding: '1px', background: '#f5f5f5', borderRadius: 23 },
{ padding: '6px', background: '#eee', borderRadius: 20 },
],
buttons: [{
x: 1,
y: 1,
background: '#fff',
borderRadius: 15,
shadow: '0 5 1 #ebf1f4',
fonts: [
{ text: '干饭', fontColor: '#f2a057', top: '70%', fontSize: '16px'},
],
imgs: [
{ src: '/images/eat.jpeg', width: '80%', top: '0' }
]
}],
defaultConfig: {
gutter: 6,
},
defaultStyle: {
borderRadius: 15,
fontColor: '#323232',
fontSize: '14px',
textAlign: 'center',
background: '#fff',
shadow: '0 5 1 #ebf1f4'
},
activeStyle: {
background: 'linear-gradient(270deg, #FFDCB8, #FDC689)',
shadow: ''
},
},
start () {
// 获取抽奖组件实例
const child = this.selectComponent('#myLucky')
// 调用play方法开始旋转
child.$lucky.play()
// 用定时器模拟请求接口
setTimeout(() => {
// 3s 后得到中奖索引
const index = Math.random() * 6 >> 0
// 调用stop方法然后缓慢停止
child.$lucky.stop(index)
}, 3000)
},
end (e) {
// 中奖奖品详情
this.setData({
activeIndex: e.detail.index,
showEatRes: true,
showResult: true,
['shareInfo.title']: `中午我吃<${e.detail.fonts[0].text}>，快来试试吧！`,
['shareInfo.imageUrl']: e.detail.imgs[0].src
})
},
fetchPrizeList () {
const data = items
const prizes = []
let axis = [[0, 0], [1, 0], [2, 0], [2, 1], [2, 2], [1, 2], [0, 2], [0, 1]]
for (let i = 0; i < 8; i++) {
let item = data[i]
prizes.push({
index: i, x: axis[i][0], y: axis[i][1],
fonts: [{ text: item.name, top: '70%' }],
imgs: [{ src: item.imgURL, width: '55%', top: '8%' }]
})
}
this.setData({
luckyNum: 1,
prizes: prizes
})
},
onLoad() {
this.fetchIndexConfigs()
},
})
复制代码加载更多
上拉加载更多会触发 onReachBottom()。
既然要最简单开发，就尽量造轮子了，其他的组件均使用 Vant 好了。
安装 npm 包：
npm i @vant/weapp -S --production
复制代码构建 npm 包
引入组件：
{
"usingComponents": {
"van-cell": "@vant/weapp/cell/index",
"van-cell-group": "@vant/weapp/cell-group/index"
}
}
复制代码wxml:
<view class="products">
<van-cell-group>
<van-cell wx:for="{{ allProducts }}" wx:key="name" title="{{ item.name }}"value="{{ item.number }}" />
</van-cell-group>
<view
class="isAll"
wx:if="{{ isAll }}"
>
我也是有底线的～
</view>
</view>
复制代码Js:
Page({
data: {
allProducts: [],
isAll: false,
},
fetchProducts() {
this.setData({
allProducts: this.data.allProducts.concat(items)
})
},
onLoad() {
this.fetchProducts()
},
onReachBottom() {
console.log('加载更多')
this.fetchProducts();
},
})
复制代码跳转小程序
...
linkTo(appId, path) {
wx.navigateToMiniProgram({
appId: appId,
path: path,
success(res) {
// 打开成功
}
})
}
// 传入小程序对应的 appID 和 path 即可跳转
...
复制代码到此，功能均以实现。详细代码请看：github.com/bucket-man/…
小程序预览：
总结
虽然是简单到不能再简单的需求，但也是“五脏俱全”。通过一个小需求，切实体会到不一样的感受。把自己代入到一个不懂技术的“产品”角色去考虑问题，会深切体会到技术只是一个工具，在目前的硬件条件下，工具的好坏对项目初期并不会体现出区别。现实的是，绝大多数项目并不能挺过初期。作为技术人员，保持好奇心，不断精进技术是立命之本。但快速实现，推进业务，帮助产品试错，体现自己的价值。不但能得到钱途，而且能有前途。何乐不为呢？
参考
Vant：vant-contrib.gitee.io/vant-weapp/…
lucky-canvas：github.com/LuckDraw/lu…