Sham@双目瞿作为一个食堂餐饮服务小程序，没有菜单展示怎么行，于是，Sham就试着给小程序添加今日菜单展示功能。
首先要做的是将菜单上传到服务器数据库中，这里，我们可以使用PHPEXCEL，这样能省去学习研究PHP代码的功夫。需要的可以现在附件，里面包含全套源文件。
上传之前，需要制作1个菜单excel表模板，这样也方便后期定期更新（Sham公司是每周更新一次，然后每日有4餐，所以模板是4餐及对应4个窗口，可以自行修改）。附件中提供了文件，就不上图了。
然后就是将菜单excel上传并导入到服务器数据库，通过访问附件中foodmenu_upload.html直接上传即可（原谅Sham没有做页面美化）
下面就是通过微信小程序来读取数据库数据了，使用 wx.request ，根据当天日期来通过后台php读取数据库数据，js代码如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
data: { foodmenu:[], hasfoodmenu:false, }, onLoad: function (res) { var that = this; var date = new Date(); var n_date = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate(); wx.request({ url: 'https://你的网址/foodmenu.php?n_date=' + n_date, //接口地址 data: { }, header: { 'content-type': 'application/json' //默认值 }, success: function (res) { console.log(res.data) that.setData({ foodmenu: res.data.foodmenu,//将表中查询出来的信息传给foodmenu n_date: n_date, hasfoodmenu:true, }) } }) }, |
然后就是前台渲染展示了，wxml代码如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 |
<view class="main"> <view wx:if="{{!hasfoodmenu}}"> <view class="m_items"> <view class="m_content"> 餐厅暂未提供今日菜单，请耐心等候或联系人事行政部！ </view> </view> </view> <!--如果数据库有菜单信息，则显示--> <block wx:else> <view wx:for="{{foodmenu}}" wx:key="foodmenu" class='menulist'> <view class="title">每日菜单{{date1}}</view> <view class="subtitle">{{item.m_date}}\t{{item.m_week}}</view> <view class="m_items"> <view class="m_tips">大荤二选一，以上面可添加，干锅两份卡一份。</view> <view class="m_tips">如市场采购不到的菜品，将可能调换。</view> </view> <!--早餐菜单--> <view class="m_items"> <view class="m_title">早餐菜单</view> <view class="m_content"> <view class="m_window">1号窗口</view> <view class="m_list"> <view class="m_name">{{item.b_6}}</view> </view> </view> <view class="m_content"> <view class="m_window">2号窗口</view> <view class="m_list"> <view class="m_name">{{item.b_1}}</view> <view class="m_name">{{item.b_2}}</view> <view class="m_name">{{item.b_3}}</view> <view class="m_name">{{item.b_4}}</view> <view class="m_name">{{item.b_5}}</view> </view> </view> </view> <!--午餐菜单--> <view class="m_items"> <view class="m_title">午餐菜单</view> <view class="m_content"> <view class="m_window">1号窗口</view> <view class="m_list"> <view class="m_name">{{item.l1_1}}</view> <view class="m_name">{{item.l1_2}}</view> </view> </view> <view class="m_content"> <view class="m_window">2号窗口</view> <view class="m_list"> <view class="m_name">{{item.l2_d1}}</view> <view class="m_name">{{item.l2_d2}}</view> <view class="m_name">{{item.l2_x1}}</view> <view class="m_name">{{item.l2_s1}}</view> <view class="m_name">{{item.l2_s2}}</view> <view class="m_name">{{item.l2_td}}</view> </view> </view> <view class="m_content"> <view class="m_window">3号窗口</view> <view class="m_list"> <view class="m_name">{{item.l3_1}}</view> <view class="m_name">{{item.l3_2}}</view> </view> </view> <view class="m_content"> <view class="m_window">4号窗口</view> <view class="m_list"> <view class="m_name">{{item.l4_1}}</view> <view class="m_name">{{item.l4_2}}</view> </view> </view> </view> <!--晚餐菜单--> <view class="m_items"> <view class="m_title">晚餐菜单</view> <view class="m_content"> <view class="m_window">1号窗口</view> <view class="m_list"> <view class="m_name">{{item.d1_1}}</view> <view class="m_name">{{item.d1_2}}</view> </view> </view> <view class="m_content"> <view class="m_window">2号窗口</view> <view class="m_list"> <view class="m_name">{{item.d2_d1}}</view> <view class="m_name">{{item.d2_d2}}</view> <view class="m_name">{{item.d2_x1}}</view> <view class="m_name">{{item.d2_s1}}</view> <view class="m_name">{{item.d2_s2}}</view> <view class="m_name">{{item.d2_td}}</view> </view> </view> <view class="m_content"> <view class="m_window">3号窗口</view> <view class="m_list"> <view class="m_name">{{item.d3_1}}</view> <view class="m_name">{{item.d3_2}}</view> </view> </view> <view class="m_content"> <view class="m_window">4号窗口</view> <view class="m_list"> <view class="m_name">{{item.d4_1}}</view> <view class="m_name">{{item.d4_2}}</view> </view> </view> </view> <!--夜宵菜单--> <view class="m_items"> <view class="m_title">夜宵菜单</view> <view class="m_content"> <view class="m_window">1号窗口</view> <view class="m_list"> <view class="m_name">{{item.md1_1}}</view> <view class="m_name">{{item.md1_2}}</view> </view> </view> <view class="m_content"> <view class="m_window">2号窗口</view> <view class="m_list"> <view class="m_name">{{item.md2_d1}}</view> <view class="m_name">{{item.md2_d2}}</view> <view class="m_name">{{item.md2_x1}}</view> <view class="m_name">{{item.md2_s1}}</view> <view class="m_name">{{item.md2_s2}}</view> <view class="m_name">{{item.md2_td}}</view> </view> </view> <view class="m_content"> <view class="m_window">3号窗口</view> <view class="m_list"> <view class="m_name">{{item.md3_1}}</view> <view class="m_name">{{item.md3_2}}</view> </view> </view> <view class="m_content"> <view class="m_window">4号窗口</view> <view class="m_list"> <view class="m_name">{{item.md4_1}}</view> <view class="m_name">{{item.md4_2}}</view> </view> </view> </view> </view> </block> </view> |
顺带附上wxss代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 |
page{ background-color: #f0f0f0; width: 100%; height:100%; padding-top:10px; } .main{ align-items: center; justify-content: center; margin:auto; padding:10px; } .title{ width:95%; height:20px; margin:auto; padding:10px 0px; font-size:18px; font-weight:bold; color:#fff; background-color: #50aaff; border-radius:5px; text-align: center; box-shadow:0 6rpx 10rpx 2rpx #DCDCDC;/*for Android*/ -webkit-box-shadow:0px 3px 5px 1px #DCDCDC;/*for IOS*/ } .subtitle{ width:95%; margin-top:-15px; margin-bottom:10px; font-size:10px; font-weight:bold; color:#fff; text-align: right; } .m_items{ width:95%; margin:10px auto; padding:0px 0px 5px; border-radius:5px; background-color: #fff; box-shadow:0 6rpx 10rpx 2rpx #DCDCDC;/*for Android*/ -webkit-box-shadow:0px 3px 5px 1px #DCDCDC;/*for IOS*/ } .m_title{ width:96%; height:20px; margin:auto; padding:5px 0px 5px 10px; font-size:14px; font-weight:bold; color:#fff; background-color: #50aaff; border-radius:5px 5px 0px 0px; text-align: left; border:1px solid #50aaff; } .m_content{ display: flex; flex-direction:row; margin:auto; padding:0px; background-color: #fff; } .m_window{ width:30px; padding:5px; margin:0px 0px 0px 5px; font-size:12px; font-weight:bold; text-align: center; display: flex; align-items: center; justify-content: center; } .m_list{ width:80%; padding:5px; flex-direction: row; display: flex; margin:0px; } .m_name{ padding:5px 0px; margin-right:8px; border-bottom: 2rpx dashed #50aaff; font-size:11px; line-height: 11px; text-align: center; display: flex; align-items: center; justify-content: center; } .m_tips{ padding:5px 10px; margin-top:5px; font-size:11px; line-height: 11px; text-align: left; } |
这样，就可以让大家看到当日菜单了，当然，如果你需要让别人看到其他日期的菜单，可以通过传对应日期值到后台读取对应菜单，Sham也还没有研究透，就暂时先不放代码了。
最后附上phpexcel及对应上传文件，以及对应mysql文件。
支持一下!