挠痒尝试，解决中午吃什么

本文主要描述一个需求的产生到落地，并以最简单的方式实现上线

背景

外卖的盛行，方便了我们的生活，同时也给我们出了新的难题。中午吃什么？已经是人们每天必须面对的最大的难题。对于我这个挑食精致的广东仔来说，更是雪上加霜。每到中午，都要花上数十分钟在纠结要吃什么，结果往往最后还是点了昨天那份。

“中午吃什么？”绝对是打工人的宇宙难题。今天就来尝试解开这个难题。

分析问题

为了一探究竟，找了一批同为“外卖党”的同事，朋友，网友了解情况。得出以下结论：

1. 平台内选择太多
2. 没有特别喜欢的口味
3. 想吃的太贵，便宜的不放心（还需要配送费）
4. 外卖平台推荐的单一

第 3 点可以通过开通会员，领优惠券来解决。其他的可以通过给出推荐“菜品”来解决。

解决方案

根据以上的分析，最主要的问题是怎么给出一个或多个菜品？

这是一个很泛的问题，某团拥有这么多数据也没能解决，何况我这条小“菜狗”。逆向思考，是不是可以说明推荐菜品不一定需要算法和数据，仅仅用随机就好，就像是考试时抓阄。

原型

一次随机给出 8 个菜品，再从 8 个菜品中随机出一个作为推荐菜品。

秉着“点到为止”的想法，“解决即可”的原则，到此本该结束。在跟朋友聊天的时候了解到有优惠券这种神奇的东西。花时间研究了一番，并添加到原型。

为了体现菜品是随机选取的，所以把所有菜品都展示出来。

技术实现

根据原型展示的内容进行需求拆解：

1. 九宫格随机（抽奖）
2. 跳转第三方（某团，某了么）
3. 上拉加载更多

点外卖都是手机下单，而某团，某了么均有小程序，并且有提供 小程序的 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…

小程序：developers.weixin.qq.com/miniprogram…