微信小程序開發(fā)之實(shí)現(xiàn)食堂點(diǎn)餐系統(tǒng)

更新時(shí)間：2023年01月14日 17:07:16 作者：失散多年的哥哥

這篇文章主要為大家詳細(xì)介紹了如何通過微信小程序開發(fā)一個(gè)簡單的食堂點(diǎn)餐系統(tǒng)，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以和小編一起學(xué)習(xí)一下

一、項(xiàng)目展示

這是一款?yuàn)蕵沸缘男〕绦?/p>

目的是為了解決大學(xué)生吃飯的選擇困難癥

用戶可以選擇不同的院校

并設(shè)置不同餐廳的概率

可以隨機(jī)選出去哪個(gè)食堂吃飯

二、操作流程和核心代碼

用戶可以選擇切換所在院校

同時(shí)用戶可以設(shè)置每個(gè)食堂的概率

并可以刪去不想去的食堂

最后點(diǎn)擊指引方向

便可以得出想去的食堂

院校信息修改

對(duì)index.js文件中的refectoryList進(jìn)行院校管理即可

  data: {
    schoolList:['北京大學(xué)','浙江大學(xué)'],
    schoolSelected: '北京大學(xué)',
    refectoryList:{
      '北京大學(xué)': [{
        name: '農(nóng)園一層',
        ratio: 1
      }, {
        name: '農(nóng)園二層',
        ratio: 1
      },{
        name: '燕南',
        ratio: 1
      },{
        name: '學(xué)一',
        ratio: 1
      },{
        name: '學(xué)五',
        ratio: 1
      },{
        name: '勺園',
        ratio: 1
      },{
        name: '藝園',
        ratio: 1
      },{
        name: '暢春新園',
        ratio: 1
      }],
      '浙江大學(xué)': [{
        name: '海寧食堂',
        ratio: 1
      },{
        name: '民族餐廳',
        ratio: 1
      },{
        name: '玉泉食堂',
        ratio: 1
      },{
        name: '清真餐廳',
        ratio: 1
      },{
        name: '留學(xué)生食堂',
        ratio: 1
      }]
    },
    refectorys: [{
        name: '農(nóng)園一層',
        ratio: 1
      }, {
        name: '農(nóng)園二層',
        ratio: 1
      },{
        name: '燕南',
        ratio: 1
      },{
        name: '學(xué)一',
        ratio: 1
      },{
        name: '學(xué)五',
        ratio: 1
      },{
        name: '勺園',
        ratio: 1
      },{
        name: '藝園',
        ratio: 1
      },{
        name: '暢春新園',
        ratio: 1
      }],
    selectedRefectory: null,
    ratioList: ['1倍概率','2倍概率','3倍概率','4倍概率','5倍概率'],
    userInfo: {}
  },

三、效果展示

到此這篇關(guān)于微信小程序開發(fā)之實(shí)現(xiàn)食堂點(diǎn)餐系統(tǒng)的文章就介紹到這了,更多相關(guān)小程序食堂點(diǎn)餐系統(tǒng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

在Monaco Editor中實(shí)現(xiàn)斷點(diǎn)設(shè)置的方法詳解
Monaco Editor 是 vscode 等產(chǎn)品使用的代碼編輯器,功能強(qiáng)大（且復(fù)雜）,由微軟維護(hù),本文在 React + TypeScript（Vite）框架下使用 @monaco-editor/react 并介紹開發(fā)斷點(diǎn)顯示時(shí)踩到的坑,文中有詳細(xì)的代碼示例供大家參考,需要的朋友可以參考下
2024-04-04
layui實(shí)現(xiàn)數(shù)據(jù)分頁功能（ajax異步）
這篇文章主要為大家詳細(xì)介紹了layui實(shí)現(xiàn)數(shù)據(jù)分頁功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-07-07
JMenuTab簡單使用說明
JMenuTab簡單使用說明參數(shù)
2008-03-03
Javascript實(shí)現(xiàn)div的toggle效果實(shí)例分析
這篇文章主要介紹了Javascript實(shí)現(xiàn)div的toggle效果的方法,實(shí)例分析了采用純javascript實(shí)現(xiàn)toggle效果的相關(guān)技巧,需要的朋友可以參考下
2015-06-06
你有必要知道的25個(gè)JavaScript面試題
這篇文章主要為大家分享了我們有必要知道的25個(gè)JavaScript面試題。想要順利通過面試的朋友可以參考一下
2015-12-12
select每選擇一個(gè)option選項(xiàng)減少對(duì)應(yīng)的option實(shí)現(xiàn)方法
這篇文章主要為大家介紹了select每選擇一個(gè)option選項(xiàng)減少對(duì)應(yīng)的option實(shí)現(xiàn)方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-12-12
echarts設(shè)置暫無數(shù)據(jù)方法實(shí)例及遇到的問題
Echarts是百度旗下的一款開源的商業(yè)級(jí)數(shù)據(jù)可視化產(chǎn)品,具有豐富的圖表類型,下面這篇文章主要給大家介紹了關(guān)于echarts設(shè)置暫無數(shù)據(jù)方法及遇到的問題的相關(guān)資料,需要的朋友可以參考下
2022-12-12
JS匿名函數(shù)內(nèi)部this指向問題詳析
這篇文章主要給大家介紹了關(guān)于JS匿名函數(shù)內(nèi)部this指向的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用JS具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
用js實(shí)現(xiàn)層隨著內(nèi)容大小動(dòng)態(tài)漸變改變推薦
以前做谷歌的小工具時(shí)，api里提供了一個(gè)很有用的函數(shù)，那就是在程序運(yùn)行時(shí)可以使層動(dòng)態(tài)隨內(nèi)容大小而變化，而且是平滑變換，在一些jquery的lightbox里也普遍有這種效果，看起來很酷的樣子。
2009-12-12
用js模擬JQuery的show與hide動(dòng)畫函數(shù)代碼
用javascript實(shí)現(xiàn)的模擬jquery下的顯示與隱藏的動(dòng)畫效果，學(xué)習(xí)的朋友可以參考下。
2010-09-09