《基于微信平臺(tái)的美食菜譜系統(tǒng)小程序設(shè)計(jì)與實(shí)現(xiàn)》11000字（論文）

頁(yè)1緒論1.1課題背景及意義因?yàn)榭萍嫉目焖倏焖侔l(fā)張，各種智能設(shè)備品牌層出不窮，互聯(lián)的快速發(fā)展，必定伴隨了手機(jī)移動(dòng)端市場(chǎng)的激流勇進(jìn)。所以近些年像華為，小米等國(guó)產(chǎn)手機(jī)移動(dòng)品牌逐漸改變了三星，蘋(píng)果等國(guó)外移動(dòng)端設(shè)備的霸主地位。從此中國(guó)市場(chǎng)實(shí)現(xiàn)了質(zhì)的飛躍，中國(guó)品牌實(shí)現(xiàn)了國(guó)際化的提升。所以中國(guó)移動(dòng)設(shè)備的快速發(fā)展必定要在中國(guó)軟件市場(chǎng)掀起一場(chǎng)腥風(fēng)血雨最近幾年，隨著社交新潮更迭和人們思想的層層解放，社交軟件也變得如雨后春筍般的應(yīng)，運(yùn)而生。以美團(tuán)為例，其作為中國(guó)中國(guó)為數(shù)不多的火爆的生活服務(wù)類(lèi)設(shè)計(jì)軟件，美團(tuán)再不僅僅于送外賣(mài)的形式，它還可以購(gòu)買(mǎi)電影票，還有最近增加的美團(tuán)共享單車(chē)也著實(shí)讓美團(tuán)活了一把。美團(tuán)的交易用戶(hù)訂單終于也在2020年11月30日短短的一年內(nèi)超過(guò)6.6億的用戶(hù)，活躍用戶(hù)達(dá)到一個(gè)600w的平臺(tái)高層次數(shù)量。美團(tuán)用戶(hù)越來(lái)越多，所以作為一個(gè)兼容性和服務(wù)型如此強(qiáng)大的平臺(tái)，要求他在每一方面都做的面面俱到，事無(wú)巨細(xì)，那是很難得，所以就需要更多的生活服務(wù)類(lèi)的app來(lái)彌補(bǔ)大型生活服務(wù)類(lèi)app的短板，把更好的服務(wù)送給人們，把更優(yōu)質(zhì)的效果呈現(xiàn)出來(lái)此外，隨著終端設(shè)備、移動(dòng)通信網(wǎng)絡(luò)以及app響應(yīng)式開(kāi)發(fā)，移動(dòng)web端的大力和高速發(fā)展、軟件的研發(fā)變得越來(lái)越必不可少。而軟件開(kāi)發(fā)的種類(lèi)也變得更加復(fù)雜，但代碼框架的開(kāi)發(fā)卻變得更加簡(jiǎn)單。手機(jī)、平板等移動(dòng)設(shè)備已經(jīng)融入人們的生活，變成人們生活中不可分割，難以摒棄的一部分。在現(xiàn)實(shí)生活中基本上每一個(gè)成年人都會(huì)有屬于自己的手機(jī)。而且人均手機(jī)數(shù)量不僅僅局限在一輛，在經(jīng)過(guò)過(guò)手機(jī)文藝復(fù)興時(shí)代的成年人基本可以達(dá)到3-4部手機(jī)。在移動(dòng)應(yīng)用可以為企業(yè)和商家提供巨大利益的時(shí)代，移動(dòng)應(yīng)用的增長(zhǎng)也程指數(shù)級(jí)增長(zhǎng)趨勢(shì)。1.2國(guó)內(nèi)外研究現(xiàn)狀目前我國(guó)的美食美餐app屬于方興未艾的時(shí)期，可以說(shuō)對(duì)于未來(lái)美食菜譜的微信小程序發(fā)展可以說(shuō)是未來(lái)可期。近些年陸續(xù)出現(xiàn)了許多移動(dòng)菜譜APP，目前在移動(dòng)應(yīng)用和移動(dòng)web端上比較火熱的一些美食app主要有：懶人做飯、下廚房、好豆網(wǎng)、做菜，名廚。這些APP主要以推薦菜譜，教學(xué)美食的做法為主要內(nèi)容。在這種大趨勢(shì)下，許多學(xué)者兼美食愛(ài)好者便做了研究，研究如下。對(duì)現(xiàn)階段移動(dòng)菜譜應(yīng)用的點(diǎn)評(píng)與數(shù)據(jù)統(tǒng)計(jì)：小豐美食說(shuō)發(fā)布了“2020年11月移動(dòng)美食類(lèi)APP數(shù)據(jù)分析”報(bào)告，按照菜譜類(lèi)APP的點(diǎn)贊和好評(píng)排名，其中下廚房，好豆食譜，懶人做飯位列前三名?！跋聫N房”以97571586次位居第一名，“好豆菜譜”87265121次位列第二，“懶人做飯”79545592僅次于前倆者，排第三。而排名較后的都是其他種類(lèi)的的app，綜合上面的數(shù)據(jù)我們可以得到一個(gè)結(jié)論，美食菜譜類(lèi)的app更被大眾所喜歡。對(duì)移動(dòng)美美食美餐app的發(fā)展前景和預(yù)測(cè)：因?yàn)楝F(xiàn)階段大部分的美食app都像是說(shuō)明書(shū)類(lèi)型的應(yīng)用軟件，所以大家拼的都是下載量和流量。參照大眾點(diǎn)評(píng)百度地圖這類(lèi)餐廳搜索，人們下一步很有可能將美食美餐app與電商相連，在實(shí)現(xiàn)美餐美食app功效最大化的情況下實(shí)現(xiàn)利益最大化。而實(shí)現(xiàn)利益最大化的路上必定離不開(kāi)廣告和贊助，所以下一步的發(fā)展方向必定朝著廣告，代言和充值的方向上面去的。沈紅彬表示“現(xiàn)如今的細(xì)分APP由于其主推內(nèi)容的細(xì)節(jié)化就導(dǎo)致了用戶(hù)的單一性，用戶(hù)的數(shù)量難以實(shí)現(xiàn)質(zhì)的突破，用戶(hù)的存在決定了一個(gè)app的價(jià)值，如果考慮這方面的話就要學(xué)習(xí)LBS（又稱(chēng)定位服務(wù)）的O2O餐飲服務(wù)，所有的網(wǎng)絡(luò)運(yùn)營(yíng)商都想擴(kuò)大自己的商業(yè)占用領(lǐng)域，增加自己的影響力。相對(duì)于這既不缺用戶(hù)，也不缺資源的強(qiáng)大運(yùn)營(yíng)商。這些單一的沒(méi)有什么大后臺(tái)支持的應(yīng)用可謂是夾縫生存。所以定位服務(wù)，實(shí)時(shí)創(chuàng)新也是移動(dòng)美食美餐app能夠活下去的立足之本。如果一個(gè)菜譜美食app的發(fā)展不能隨著時(shí)代的發(fā)展而改變，不能根據(jù)用戶(hù)的口味改變而調(diào)整。那么他一定就會(huì)成為落后淘汰的那一批軟件。服務(wù)行業(yè)終究離不開(kāi)服務(wù)態(tài)度，和服務(wù)質(zhì)量，移動(dòng)菜譜作為美食服務(wù)行業(yè)在移動(dòng)app的分工戰(zhàn)略部分。那么他的設(shè)計(jì)必定要朝著人性化，合理化，智能化，這些方面去磨合去發(fā)展，（三）微信是的一款來(lái)自騰訊公司即時(shí)通訊智能終端可供全民娛樂(lè)交友娛樂(lè)移動(dòng)端應(yīng)用app。但是微信信小程序卻在生命開(kāi)發(fā)周期、成本、技術(shù)難度等方面都要比移動(dòng)web更為優(yōu)越。并且現(xiàn)在微信小程序也越來(lái)越受學(xué)生們的喜愛(ài)，畢竟使用方便、操作簡(jiǎn)單、用完即走的絕對(duì)式優(yōu)點(diǎn)在市場(chǎng)范圍內(nèi)都是受用戶(hù)所青睞的。微信小程序的開(kāi)發(fā)相對(duì)來(lái)說(shuō)也較為簡(jiǎn)單，微信開(kāi)發(fā)的時(shí)，開(kāi)發(fā)展一般都會(huì)調(diào)用一些免費(fèi)的接口，只要把接口地址api簡(jiǎn)單的復(fù)制一下，那么接口里面的數(shù)據(jù)就會(huì)呈對(duì)象的形式出現(xiàn)，這個(gè)時(shí)候我們只需要采用發(fā)送ajax的方法來(lái)實(shí)現(xiàn)前后端的交互，把接口里面的數(shù)據(jù)動(dòng)態(tài)渲染到我們已經(jīng)合理布局的html組件里面去。而且隨著接口數(shù)據(jù)的升級(jí)我們的數(shù)據(jù)也會(huì)發(fā)生相應(yīng)的改變。唯一的不足之處就是如果接口后期出現(xiàn)了問(wèn)題，那我們的程序也就不能正常運(yùn)行了。在使用微信小程序來(lái)使用微信小程序app的時(shí)候，我們只需要下拉微信小程序隱藏的彈幕，微信小程序app的搜索框就會(huì)出來(lái)。我們只需要在里面輸入我們想輸入的內(nèi)容，那么列表里面就會(huì)出現(xiàn)那個(gè)app，而且對(duì)于常用的app他會(huì)保存下來(lái)。而且微信小程序的隨用隨下載。對(duì)用內(nèi)存比較小的用戶(hù)來(lái)說(shuō)，可謂是給予了極大的方便。他的代碼開(kāi)發(fā)相對(duì)比較方便,沒(méi)有什么太難學(xué)習(xí)的或者隱晦的東西，代碼都是開(kāi)源的,有一個(gè)微信小程序官方文檔,當(dāng)有什么不懂的地方都可以參照文檔進(jìn)行學(xué)習(xí)和提升。1.3本課題主要工作本文正是基于微信小程序開(kāi)發(fā)平臺(tái)，針對(duì)美食美餐系統(tǒng)的需求,本文設(shè)計(jì)出一個(gè)包含美食制作展示、菜系展示、周邊美食、隨機(jī)獲取、個(gè)人信息的微信小程序,以此幫助美食美餐的實(shí)現(xiàn),促進(jìn)美食美餐工作的進(jìn)展。主要實(shí)現(xiàn)功能包括：1、美食模塊，用于顯示美食的詳情與制作步驟；2、美餐模塊，用于顯示菜系，并能提供制作方法；3、查詢(xún)模塊，調(diào)用一些公共的端口獲取信息可以顯示周?chē)母魃朗场?、隨機(jī)選擇模塊，當(dāng)不知道想吃什么的時(shí)候可以隨機(jī)出現(xiàn)美食。5、我的模塊，該模塊完成用戶(hù)對(duì)喜愛(ài)的美食美餐的收藏，關(guān)于軟件等功能。要求有創(chuàng)新點(diǎn)或創(chuàng)新理念的設(shè)計(jì)。2系統(tǒng)開(kāi)發(fā)環(huán)境自從2017年微信平臺(tái)正式上線了微信小程服務(wù)，最開(kāi)始上線發(fā)布的就有幾百個(gè)小程序。即使作為小程序試驗(yàn)品的微信小程序，這些也小程序涵蓋了各行各業(yè)，包括在線教育、新聞媒體、交通運(yùn)輸、房產(chǎn)行業(yè)、娛樂(lè)通訊、美食健康、政務(wù)服務(wù)，視頻影視等諸多領(lǐng)域。在經(jīng)歷過(guò)短暫上線后，微信小程序的得到了一致的好評(píng)。并且微信小程序在2019年又一步一步完善了各個(gè)功能模塊，因此微信小程序基本構(gòu)建了一個(gè)完整封閉的生態(tài)圈結(jié)構(gòu)，同時(shí)又不斷地根據(jù)用戶(hù)的使用反饋,響應(yīng)時(shí)代發(fā)展要求逐漸形成了可持續(xù)性發(fā)展的生命能力。但我們只要細(xì)細(xì)觀看微信小程序的成長(zhǎng)歷程就會(huì)發(fā)現(xiàn)，微信不僅擁有平臺(tái)強(qiáng)大的流量支持，成為幸運(yùn)寵兒的微信小程序已經(jīng)被微信開(kāi)放了全量搜索，微信小程序的搜索能力被大大的提高。目前，微信平臺(tái)每月就有十幾億的活躍用戶(hù)量，這一強(qiáng)大的流量平臺(tái)使微信小程序在上線之后光彩奪目。2.1微信小程序相關(guān)技術(shù)我的我愛(ài)美食美餐app在win10系統(tǒng)環(huán)境下進(jìn)行開(kāi)發(fā)的，在軟件開(kāi)發(fā)工程中，[4]面向?qū)ο蠓椒▽W(xué)引論、面向?qū)ο蠓治?、面向?qū)ο笤O(shè)計(jì)和面向?qū)ο髮?shí)現(xiàn)，都需要考慮到。而微信小程序借鑒了一些優(yōu)秀的的web技術(shù)，其實(shí)微信小程序的整體架構(gòu)偏向于vue，因?yàn)槠洫?dú)有的js前端框架和vue的感覺(jué)相似們還有他的頁(yè)面更傾向于數(shù)據(jù)的動(dòng)態(tài)驅(qū)動(dòng)，微信小程序本身就帶有一些插件，比如jquery和swrpper插件給開(kāi)發(fā)者帶來(lái)了極大地方便。但是我感覺(jué)微信小程序總體還是優(yōu)于web開(kāi)發(fā)技術(shù)的。在一些web技術(shù)上不好的地方他都做了比較細(xì)節(jié)的處理。其中一個(gè)區(qū)別就在于微信小程序是把頁(yè)面的渲染線程和腳本線程分別設(shè)計(jì)在了不同線程中進(jìn)行執(zhí)行。又因?yàn)槲⑿判〕绦蚴强梢栽趇SO端和Android端以及調(diào)試的工具上都可以運(yùn)行的，但在各個(gè)端運(yùn)行時(shí)執(zhí)行腳本的環(huán)境和渲染組件環(huán)境是不相同的，并且邏輯層的JS語(yǔ)法和API的存在少許差異。和html相似，wxml，wxss更趨向于CSS,wxss，他們的開(kāi)發(fā)或者布局方式的理念上基本上是一致的。那些主要的差別還是標(biāo)簽上面的改變。比如我們常用的div標(biāo)簽變成了view，h標(biāo)題標(biāo)簽變成了text，還有就是內(nèi)斂標(biāo)簽減少了，但是每個(gè)標(biāo)簽的內(nèi)置屬性確實(shí)增加了，這也標(biāo)志著同微信小程序功能性的增強(qiáng)。相較于html的原生js，對(duì)于微信小程序引入js的腳本，使用微信客戶(hù)端就可以用來(lái)中轉(zhuǎn)線程通信服務(wù)，因?yàn)镠TTPS請(qǐng)求是由微信客戶(hù)端發(fā)出并提交，再通過(guò)交互的方式發(fā)送到第三方的服務(wù)器。2.3微信小程序生命周期實(shí)際上，該程序的微字母有點(diǎn)類(lèi)似于RN，因?yàn)樗傻脑颊Z(yǔ)言也是從服務(wù)器端到程序包的，但是通過(guò)機(jī)械手邊界測(cè)試，您將知道applet實(shí)際上不僅僅是的原始副本。原始內(nèi)容生命周期就像從程序的角度模仿一個(gè)人的生命，生命周期是從開(kāi)始，暫停，激發(fā)，停止，轉(zhuǎn)儲(chǔ)的程序創(chuàng)建過(guò)程。在我看來(lái)，一個(gè)小程序的生命周期可以分為兩個(gè)解釋小程序生命周期的一般說(shuō)明當(dāng)用戶(hù)開(kāi)始啟動(dòng)小程序時(shí)，onlaunch方法將在全局范圍內(nèi)僅移動(dòng)一次，直到小程序的初始化完成，然后是生命周期。程序再次從后跳到前，必須采用onshow方法，如果小程序小消息后臺(tái)運(yùn)行時(shí)間過(guò)長(zhǎng)或超過(guò)一定時(shí)間，則系統(tǒng)資源所占比例將上升，將被終止隨著時(shí)間的流逝，整個(gè)過(guò)程就是applet生命周期，而頁(yè)面生命周期是啟動(dòng)applet時(shí)將以啟動(dòng)模式運(yùn)行程序，但是onlaunch啟動(dòng)（如果正在運(yùn)行），只有用戶(hù)按下返回鍵或主頁(yè)鍵，這時(shí)您將在我們重新打開(kāi)一個(gè)小程序時(shí)進(jìn)入這些小程序，并且在頁(yè)面加載后，我們將立即從后臺(tái)進(jìn)入前臺(tái)，或者當(dāng)程序從后臺(tái)進(jìn)入此時(shí)將顯示頁(yè)面的前部，在完成第一頁(yè)顯示后，將立即運(yùn)行該方法，以便顯示頁(yè)面樣式和元素，但是當(dāng)您運(yùn)行applet或輸入另一個(gè)頁(yè)面時(shí)，每個(gè)頁(yè)面將被調(diào)用一次頁(yè)面，將運(yùn)行onhide方法，當(dāng)加載applet時(shí)，然后從后臺(tái)跳轉(zhuǎn)或從頁(yè)面加載后跳轉(zhuǎn)，調(diào)用onshow方法，調(diào)用wx.navigateback方法以暫停當(dāng)前頁(yè)面信息或調(diào)用wx.redirect方法刷新頁(yè)面數(shù)據(jù)，正在加載當(dāng)API調(diào)用腳本或applet中發(fā)生的錯(cuò)誤時(shí)，該方法將調(diào)用頁(yè)面刷新方法，這會(huì)導(dǎo)致onerror并獲取錯(cuò)誤消息。整個(gè)過(guò)程是，頁(yè)面生命周期和頁(yè)面生命周期中的所有方法都將受到影響。一言以蔽之，從應(yīng)用程序生命周期來(lái)看，與繁重的本機(jī)應(yīng)用程序開(kāi)發(fā)相比，SmallMessageProgram在技術(shù)上非常清晰2.4微信小程序API接口微信提供了本機(jī)豐富的API接口，可以在X.ON的開(kāi)頭輕松設(shè)置小消息.ONAPI是一種偵聽(tīng)事件的API，該事件在觸發(fā)事件時(shí)會(huì)接受回調(diào)函數(shù)作為參數(shù)，如果存在則回調(diào)調(diào)用該函數(shù)沒(méi)有特殊協(xié)議，其他API接受對(duì)象作為對(duì)象中的參數(shù)，您可以指定成功，plete以接收抗議界面的結(jié)果參數(shù)名類(lèi)型必填說(shuō)明successFunction否接口調(diào)用成功的回調(diào)函數(shù)failFunction否接口調(diào)用失敗的回調(diào)函數(shù)completeFunction否接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行）API列表主要包括網(wǎng)絡(luò)API和文件API等，其中具體如下表所示：網(wǎng)絡(luò)API列表：API說(shuō)明wx.request發(fā)起網(wǎng)絡(luò)請(qǐng)求wx.uploadFile上傳文件wx.downloadFile下載文件wx.connectSocket創(chuàng)建WebSocket連接wx.onSocketOpen監(jiān)聽(tīng)WebSocket打開(kāi)wx.onSocketError監(jiān)聽(tīng)WebSocket錯(cuò)誤wx.sendSocketMessage發(fā)送WebSocket消息wx.onSocketMessage接受WebSocket消息wx.closeSocket關(guān)閉WebSocket連接wx.onSocketClose監(jiān)聽(tīng)WebSocket關(guān)閉文件API列表：API說(shuō)明wx.saveFile保存文件wx.getSavedFileList獲取已保存的文件列表wx.getSavedFileInfo獲取已保存的文件信息wx.removeSavedFile刪除已保存的文件信息wx.openDocument打開(kāi)文件3系統(tǒng)分析3.1可行性分析可行性分析在應(yīng)用開(kāi)發(fā)中發(fā)揮著十分關(guān)鍵的作用，也是保證程序順利開(kāi)發(fā)的前提條件。所以在開(kāi)發(fā)一種應(yīng)用時(shí)，程序的開(kāi)發(fā)者需要思考的要素有很多，比如：程序開(kāi)發(fā)的人員配置、開(kāi)發(fā)周期、預(yù)算成本、相關(guān)技術(shù)等等。開(kāi)發(fā)應(yīng)用程序的周期一般是十分長(zhǎng)的，并且在程序開(kāi)發(fā)期間有時(shí)會(huì)出現(xiàn)各種各樣的問(wèn)題，難免出現(xiàn)在程序開(kāi)發(fā)中途停止的情況，同時(shí)這也浪費(fèi)了我們大量的人力和物力。因此，在準(zhǔn)備開(kāi)始開(kāi)發(fā)一款應(yīng)用程序之前要做好充分的可行性分析是十分有必要的，這樣在程序開(kāi)發(fā)后期大大降低了開(kāi)發(fā)失誤率，也最大限度的減少了在開(kāi)發(fā)中途發(fā)生突然停止的情況。3.1.1技術(shù)可行性項(xiàng)目主要采用java和web前端技術(shù)以及php的后端語(yǔ)言，基于小程序開(kāi)發(fā)框架，對(duì)于應(yīng)用程序的開(kāi)發(fā)要求具備完整功能，使用簡(jiǎn)單的特點(diǎn)。微信小程序自問(wèn)世以來(lái)，不斷進(jìn)行技術(shù)更新，功能也日趨完善，并且微信小程序的框架為MINA框架，這個(gè)框架為“響應(yīng)-綁定”的運(yùn)行機(jī)制，所以開(kāi)發(fā)者在開(kāi)發(fā)過(guò)程中只要完成視圖層和邏輯層的開(kāi)發(fā)任務(wù)就可以。并且視圖層語(yǔ)法規(guī)則和HTML和CSS的WXML和WXSS十分相似。基于微信小程序的項(xiàng)目應(yīng)用具有很高可行性，并且我能夠嫻熟的使用微信小程序wxml語(yǔ)言和js，所以系統(tǒng)的開(kāi)發(fā)具有可行性。3.1.3經(jīng)濟(jì)可行性本次課題是在微信小程序的基礎(chǔ)上我愛(ài)美食美餐系統(tǒng)，在開(kāi)發(fā)成本上充分考慮到大多數(shù)高校的的資金情況，因此該開(kāi)放式實(shí)驗(yàn)室預(yù)約管理系統(tǒng)使用微信小程要針對(duì)不一樣的操作系統(tǒng)來(lái)開(kāi)發(fā)各種各樣的版本。相比于傳統(tǒng)APP應(yīng)用的開(kāi)發(fā)大大縮減了前期開(kāi)發(fā)和后期維護(hù)費(fèi)用。3.1.4法律可行性微信平臺(tái)在針對(duì)小程序的開(kāi)發(fā)和發(fā)布問(wèn)題，制定了最為完善的規(guī)則，比如在使用微信前可以看大《騰訊服務(wù)協(xié)議》，在進(jìn)入騰訊公眾平臺(tái)申請(qǐng)開(kāi)發(fā)小程序時(shí)，可以看到《微信公眾平臺(tái)服務(wù)協(xié)議》和《騰訊微信軟件許可及服務(wù)協(xié)議》，在和后期開(kāi)發(fā)和發(fā)布小程序過(guò)程中還會(huì)看到《微信小程序平臺(tái)服務(wù)條款》和《微信小程序平臺(tái)運(yùn)營(yíng)規(guī)范》等相關(guān)規(guī)定的文件?？梢詤⒄找陨夏夸泴?duì)我進(jìn)行、知識(shí)產(chǎn)權(quán)評(píng)判。項(xiàng)目本人獨(dú)立完成的程序項(xiàng)目，不存在抄襲和剽竊的事件，對(duì)于第三方軟件的使用也是通過(guò)花錢(qián)購(gòu)買(mǎi)來(lái)使用的，因?yàn)闊o(wú)論是軟件外觀前端設(shè)計(jì)，還是具體java邏輯功能都采用的代碼還是邏輯和框架等都是透明的，都是公開(kāi)的，因此這個(gè)系統(tǒng)的開(kāi)發(fā)和設(shè)計(jì)，不存在抄襲和剽竊等法律上關(guān)于知識(shí)產(chǎn)權(quán)的問(wèn)題，完全具有法律可行性。3.2系統(tǒng)流程分析3.2.1系統(tǒng)開(kāi)發(fā)流程 該項(xiàng)目在開(kāi)發(fā)時(shí)，首先進(jìn)行需求分析，進(jìn)而對(duì)系統(tǒng)進(jìn)行總體的設(shè)計(jì)規(guī)劃，設(shè)計(jì)系統(tǒng)功能模塊，數(shù)據(jù)庫(kù)的調(diào)用等，本系統(tǒng)的開(kāi)發(fā)流程如圖3-1所示圖3-1系統(tǒng)開(kāi)發(fā)流程圖4開(kāi)發(fā)環(huán)境和系統(tǒng)設(shè)計(jì)4.1系統(tǒng)開(kāi)發(fā)環(huán)境搭建4.1.1微信小程序的注冊(cè)在下載微信小程序開(kāi)發(fā)工具之前首先要注冊(cè)以下微信小程序。首先輸入/網(wǎng)址進(jìn)入微信公眾平臺(tái)用手機(jī)掃一下上面的二維碼登錄一下。只有登錄以后我們才可以注冊(cè)微信小程序的api。只有注冊(cè)了微信小程序的api我們才有資格來(lái)去開(kāi)發(fā)微信小程序。圖4-1微信公眾平臺(tái)主頁(yè)面（2）我們掃描二維碼就可以進(jìn)行注冊(cè)，接著就會(huì)出現(xiàn)一連串的提示，我們根據(jù)提示來(lái)填寫(xiě)我們的信息，有什么姓名，年齡，企業(yè)啥的必填項(xiàng)，，填寫(xiě)后點(diǎn)擊立即注冊(cè)即可。（3）點(diǎn)擊注冊(cè)后，微信公眾平臺(tái)會(huì)向我們填寫(xiě)的郵箱里面發(fā)送一封登錄郵件，我們打開(kāi)郵件，根據(jù)上面的提示就可以激活我們的認(rèn)證頁(yè)面了。圖4-2激活發(fā)送信息頁(yè)面（4）我們把信息填完之后，我們登陸一下微信小程序，緊接著我們就可以進(jìn)入微信小程序員的后臺(tái)了。這個(gè)時(shí)候我們也升級(jí)為微信小程序管理員了。進(jìn)入小程序后，將開(kāi)發(fā)所需要程序的命名、頭像、簡(jiǎn)介等。進(jìn)行補(bǔ)充。我們就可以自由的開(kāi)發(fā)微信小程序了。4.1.2微信小程序開(kāi)發(fā)工具的安裝（1）首先在微信公眾平臺(tái)上下載微信開(kāi)發(fā)者工具，一般都要下載最新版本的，因?yàn)樗哂凶钚碌牟寮?，以及能夠支持最新的vue版本或者其他腳本語(yǔ)言，能夠給開(kāi)發(fā)者帶來(lái)很大的方便。圖4-3微信開(kāi)發(fā)工具安裝頁(yè)面（2）然后我們需要打開(kāi)微信web開(kāi)發(fā)者工具，必須要使用微信來(lái)掃描他，對(duì)他進(jìn)行授權(quán)。（3）新建項(xiàng)目時(shí)，輸入項(xiàng)目名，選擇開(kāi)發(fā)模式是javascript還是云開(kāi)發(fā)模式，并點(diǎn)擊新建項(xiàng)目輸入一個(gè)appid，整個(gè)地方一般可以使用測(cè)試號(hào)。輸入項(xiàng)目名稱(chēng)，點(diǎn)擊確定，創(chuàng)建項(xiàng)目完成。圖4-4微信開(kāi)發(fā)者工具注冊(cè)4.2系統(tǒng)概要設(shè)計(jì)在用戶(hù)使用微信小程序進(jìn)入該我愛(ài)美食美餐系統(tǒng)后，首先可以在該系統(tǒng)的主頁(yè)面上看到該系統(tǒng)的登錄頁(yè)面，如果沒(méi)有進(jìn)行過(guò)注冊(cè)和登錄的用戶(hù)將沒(méi)有辦進(jìn)入該系統(tǒng)，在進(jìn)入我愛(ài)美食微信小程序之前，系統(tǒng)會(huì)提示用戶(hù)進(jìn)行登錄，因?yàn)檫M(jìn)行實(shí)驗(yàn)室前必須要確定用戶(hù)的身份。用戶(hù)就會(huì)根據(jù)自己的身份信息來(lái)注冊(cè)相應(yīng)的賬號(hào)和密碼。根當(dāng)前臺(tái)用戶(hù)完成提交完自己的賬號(hào)和密碼的信息后，用戶(hù)就可以進(jìn)入該系統(tǒng)，進(jìn)入該系統(tǒng)就可以看主頁(yè)的那些以前用戶(hù)就已經(jīng)發(fā)布的那些他們的一些美食心得，用戶(hù)看完后一般都會(huì)參照他們的格式進(jìn)行發(fā)布自己的美食西得。后后臺(tái)管理員會(huì)查看用戶(hù)發(fā)布的美食信息，他們可以參照網(wǎng)站的條款并有權(quán)對(duì)發(fā)布信息進(jìn)行修改和刪除一系列的操作，同時(shí)用戶(hù)也可以查詢(xún)?cè)谥黜?yè)看到自己發(fā)布的美食信息，并可以對(duì)他們進(jìn)行點(diǎn)贊評(píng)論和推廣。同時(shí)也可以查看別的用戶(hù)對(duì)于自己發(fā)布的美食信息的評(píng)論和點(diǎn)贊數(shù)，以此來(lái)判斷自己的美食究竟受不受大眾的歡迎。該我愛(ài)美食美餐app系統(tǒng)是基于微信小程序開(kāi)發(fā)，主要目標(biāo)是開(kāi)發(fā)并實(shí)現(xiàn)以美食愛(ài)好者為用戶(hù)的我愛(ài)美食美餐系統(tǒng)，使這個(gè)愛(ài)美食美餐app系統(tǒng)可以為用戶(hù)們提供提供更方便快捷的實(shí)現(xiàn)查詢(xún)美食，購(gòu)買(mǎi)美食，發(fā)布美食的操作。讓美食愛(ài)好者們可以隨時(shí)隨地的通過(guò)這個(gè)小程序來(lái)獲取當(dāng)?shù)馗浇拿朗常l(fā)布自己的美食心得，讓美食文化得到更好的宣揚(yáng)，我愛(ài)美食美餐app系統(tǒng)概要設(shè)計(jì)的流程圖如圖4-6所示：圖4-6系統(tǒng)概要設(shè)計(jì)流程圖4.2.1系統(tǒng)結(jié)構(gòu)設(shè)計(jì)設(shè)計(jì)階段開(kāi)發(fā)是離不開(kāi)系統(tǒng)結(jié)構(gòu)誰(shuí)，以下是基于微信小程序我愛(ài)美食美餐系統(tǒng)的項(xiàng)目設(shè)計(jì)的整體結(jié)構(gòu)設(shè)計(jì)如圖4-7所示。數(shù)據(jù)庫(kù)檢索微數(shù)據(jù)庫(kù)檢索微信用戶(hù)服務(wù)器接口輸入文字信息或圖片圖4-7系統(tǒng)結(jié)構(gòu)圖用戶(hù)通過(guò)微信和小程序進(jìn)行關(guān)聯(lián)登陸，通過(guò)輸入相應(yīng)的信息進(jìn)行檢索，進(jìn)而輸出檢索的結(jié)果并對(duì)該結(jié)果進(jìn)行展示。4.3數(shù)據(jù)庫(kù)設(shè)計(jì)是我愛(ài)美食美餐系統(tǒng)最需要的設(shè)計(jì)數(shù)據(jù)庫(kù)時(shí)候能夠構(gòu)想出一個(gè)最基本要點(diǎn)健壯和合理的數(shù)據(jù)庫(kù)，所有的數(shù)據(jù)庫(kù)的表格或者試圖或者函數(shù)都在在后期進(jìn)行運(yùn)行和維護(hù)。所以一個(gè)好的開(kāi)始決定了后期數(shù)據(jù)庫(kù)運(yùn)行時(shí)的流暢性。如果在系統(tǒng)設(shè)計(jì)之初沒(méi)有良好的數(shù)據(jù)庫(kù)設(shè)計(jì)，那么就會(huì)給后期程序設(shè)計(jì)帶來(lái)許多的麻煩，因?yàn)榍罢邉?chuàng)建時(shí)留下許多隱患給后期人員帶來(lái)怎么多麻煩這是不人性化的。所以要想實(shí)現(xiàn)系統(tǒng)的平穩(wěn)運(yùn)行，首先必須考慮一個(gè)好的數(shù)據(jù)庫(kù)MySQL之所以適合使用，是因?yàn)榕幚?，低成本，正常性能和響?yīng)速度在連接到服務(wù)器時(shí)具有標(biāo)準(zhǔn)規(guī)則，他還可以設(shè)置自己的密碼進(jìn)行加密，因此該系統(tǒng)使用我的SQL數(shù)據(jù)庫(kù)以及navicatMySQL來(lái)管理數(shù)據(jù)庫(kù)和處理數(shù)據(jù)，與其他數(shù)據(jù)管理工具相比，這是一個(gè)不錯(cuò)的選擇。數(shù)據(jù)庫(kù)中需要存儲(chǔ)用戶(hù)及各個(gè)模塊子功能比如用戶(hù)模塊，用戶(hù)菜譜模塊，用戶(hù)選擇，用戶(hù)咨詢(xún)模塊，這些信息將會(huì)被展示在應(yīng)用端的用戶(hù)界面上并且會(huì)被用于進(jìn)行數(shù)據(jù)分析。我設(shè)計(jì)的數(shù)據(jù)庫(kù)一共大概有內(nèi)容列表，發(fā)布列表，種類(lèi)列表這幾個(gè)列表。內(nèi)容日志列表主要就是用戶(hù)發(fā)布菜譜或者美食存儲(chǔ)內(nèi)容和圖片的數(shù)據(jù)庫(kù)。主要包括以下幾個(gè)鍵，id，title，note，btype，img，uid， username這些鍵名。還有一個(gè)美食種類(lèi)表，主要是美食的title和type方便以后再篩選種類(lèi)的時(shí)候做下鋪墊。還有一個(gè)用戶(hù)表，用戶(hù)表就是用戶(hù)再注冊(cè)成功后吧存儲(chǔ)用戶(hù)信息的mysql表單。里面記載著用戶(hù)的賬號(hào)密碼，身份信息等用戶(hù)的個(gè)人信息。5詳細(xì)設(shè)計(jì)5.1系統(tǒng)主界面用戶(hù)進(jìn)入小程序后，便可看到程序的主界面，具體如圖5-1所示。界面中首先展示的各類(lèi)菜單的頁(yè)面。頁(yè)面被分為三大塊，頂端是食譜圖片選擇。中間部分是食譜的分類(lèi)選擇，用戶(hù)還可以進(jìn)行關(guān)鍵字搜索。在下方是具體的菜單展示。底部是各個(gè)模塊的標(biāo)簽頁(yè)。在主頁(yè)的程序的右上方還有附近這一功能模塊，用戶(hù)可以通過(guò)查看附近的美食店鋪來(lái)篩選自己想去的美食。整個(gè)頁(yè)面的頁(yè)腳都是公共模板，在寫(xiě)入頁(yè)腳的時(shí)候都是引用的公共代碼塊節(jié)適當(dāng)降低了代碼的冗余度。整個(gè)頁(yè)面的的菜單列表是通過(guò)jquery動(dòng)態(tài)渲染來(lái)實(shí)現(xiàn)的在每一個(gè)li標(biāo)簽內(nèi)都藏了他的id值。所以再點(diǎn)擊后得到該li標(biāo)簽的id發(fā)送ajax請(qǐng)求來(lái)獲取對(duì)應(yīng)的后臺(tái)數(shù)據(jù)庫(kù)的數(shù)據(jù)來(lái)渲染到頁(yè)面里面去。圖5-1展示主界面5.2菜譜展示界面在菜譜展示界面中，將分類(lèi)展示各個(gè)菜單，用戶(hù)點(diǎn)擊某一個(gè)菜單，則將對(duì)具體的菜的做法進(jìn)行展示，如圖5-2所示。菜譜信息是發(fā)布的一些菜譜的做飯或者介紹?？梢酝ㄟ^(guò)點(diǎn)擊上年的全部的一級(jí)分類(lèi)來(lái)查看燒烤，煲湯，海鮮和家常菜的相關(guān)菜譜信息。也可以通過(guò)點(diǎn)擊最新和最熱來(lái)通過(guò)發(fā)布菜譜的時(shí)間和點(diǎn)贊數(shù)來(lái)排序。點(diǎn)擊菜譜列表就會(huì)進(jìn)入其相關(guān)的單列菜譜詳情。里面都是用戶(hù)發(fā)布的一些菜譜的做法和對(duì)美食的宣傳。用戶(hù)再進(jìn)入美食頁(yè)面后可以觀看里面的內(nèi)容，并作出點(diǎn)贊和評(píng)論的的操作，每次點(diǎn)擊一次贊后后天數(shù)據(jù)庫(kù)的blog表里面的zan列表的數(shù)量都會(huì)增加一個(gè)。圖5-2菜譜展示界面5.3菜譜發(fā)布界面在菜譜發(fā)布界面中，可以編輯菜譜，插入圖片，形成一個(gè)完整的菜譜，如圖5-3所示。用戶(hù)可以編輯菜譜的做法，自己的心得，以及美食的特點(diǎn)，通過(guò)上傳自己拍攝的圖片來(lái)發(fā)布自己的美食信息。用戶(hù)可以點(diǎn)擊即配圖從本地資源里面獲取圖片把對(duì)應(yīng)的圖片以字符串的形式上傳到數(shù)據(jù)庫(kù)。還可以點(diǎn)擊視頻來(lái)獲取本地資源的視頻。線面的是一個(gè)textare組件可以輸入你想輸入的正文，點(diǎn)擊之后技術(shù)如正文字樣消失，就可以輸入自己想介紹美食的內(nèi)容。我們?cè)佥斎肟蚶锩孑斎氲膬?nèi)容就再點(diǎn)擊發(fā)布后就會(huì)發(fā)送ajax，ajax的url的里面就是我們要調(diào)用的接口，發(fā)送方式就是post，我們整個(gè)時(shí)候調(diào)用封裝的ajax函數(shù)將輸入框，以及圖片，還有輸入的內(nèi)容傳給data對(duì)象，data對(duì)象就會(huì)將這些內(nèi)容傳給后臺(tái)。這個(gè)時(shí)候我們就完成了菜譜的發(fā)布。當(dāng)我們發(fā)布之后再跳到主頁(yè)就可一看到我們發(fā)布的內(nèi)容以多列布局的形式出現(xiàn)在主頁(yè)的主內(nèi)容模板區(qū)域。而我們輸入的內(nèi)容就會(huì)被整齊的擺到這個(gè)多列布局li標(biāo)簽上，每一個(gè)內(nèi)容被一個(gè)標(biāo)簽包裹，仔細(xì)看來(lái)我們發(fā)現(xiàn)li標(biāo)簽上藏了我們存入數(shù)據(jù)庫(kù)是的id值，這個(gè)值就是我們以后查看詳細(xì)內(nèi)容的關(guān)鍵，沒(méi)有這個(gè)值我們就會(huì)很難實(shí)現(xiàn)詳情頁(yè)面。圖5-3菜譜發(fā)布界面5.4后臺(tái)管理界面在后臺(tái)管理系統(tǒng)，用戶(hù)可以進(jìn)行文章信息、新聞資訊、菜譜發(fā)布、用戶(hù)信息等的管理，如圖5-5所示。管理員可以進(jìn)行用戶(hù)管理，對(duì)已經(jīng)存在的進(jìn)行修改和刪除。還可以對(duì)用戶(hù)已經(jīng)發(fā)布的菜譜信息進(jìn)行查詢(xún)和刪除。還可以發(fā)布一些美食資訊來(lái)進(jìn)行廣告的代言和宣傳?？梢园l(fā)布條款對(duì)用戶(hù)使用軟件發(fā)布菜譜信息作出要求。初次之外管理員還可以對(duì)已經(jīng)注冊(cè)的用戶(hù)的個(gè)人信息進(jìn)行編輯和修改，對(duì)于違反管理員發(fā)布的公告的用戶(hù)，可以給予封號(hào)和刪除該用戶(hù)的操作。管理員還可以增加分類(lèi)的種類(lèi)，隨著視頻的更新?lián)Q代，食品的花式也會(huì)隨著變多，管理員就可以通過(guò)添加美食的種類(lèi)，可以方便快捷的讓用戶(hù)更快更準(zhǔn)確的找到自己想要的美食種類(lèi)。左面的用戶(hù)管理和菜譜信息管理是一個(gè)個(gè)的li標(biāo)簽，每一個(gè)李標(biāo)簽對(duì)應(yīng)了右半部部分盒子里的一個(gè)div，通過(guò)點(diǎn)擊li標(biāo)簽的方式來(lái)切換右邊div的active屬性，屬性里面有display：block這個(gè)屬性。獲取li標(biāo)簽的下標(biāo)值，第一個(gè)li標(biāo)簽被點(diǎn)擊就讓它對(duì)應(yīng)的第一個(gè)div標(biāo)簽顯示，他兄弟隱藏。圖5-5后臺(tái)管理界面5.5公共美食接口界面通過(guò)調(diào)動(dòng)一些公共免費(fèi)的api接口來(lái)調(diào)取當(dāng)?shù)氐囊恍┟朗?，用?hù)可以自用查看當(dāng)?shù)氐拿朗?，里面都是一些透明共享的信息，用?hù)就可以通過(guò)查看店鋪的信息來(lái)進(jìn)行篩選并且找到自己想要的美食，再綜合一下距離就可以確定店鋪，店鋪里面有店鋪信息和聯(lián)系電話6系統(tǒng)測(cè)試6.1測(cè)試用例6.2.1、用戶(hù)登陸測(cè)試測(cè)試用例1（正確輸入）輸入：用戶(hù)：周文軒密碼：123456期望輸出：登入成功，進(jìn)入管理頁(yè)面能看到app的主頁(yè)。實(shí)際輸出：登入成功，進(jìn)入微信小程序。測(cè)試用例2（用戶(hù)名或密碼錯(cuò)誤）輸入：用戶(hù)：bb密碼：cc期望輸出：提示用戶(hù)名或密碼錯(cuò)誤實(shí)際輸出：提示用戶(hù)名或密碼錯(cuò)誤測(cè)試用例3（用戶(hù)名或密碼為空）輸入：用戶(hù)：空密碼：空期望輸出：登入失敗，請(qǐng)輸入用戶(hù)名和密碼。實(shí)際輸出：登錄失敗，請(qǐng)輸入用戶(hù)名和密碼。6.2.2、用戶(hù)管理測(cè)試測(cè)試用例1（正確輸入）輸入：用戶(hù)：周文軒期望輸出：出現(xiàn)周文軒的個(gè)人信息和刪除與編輯的按鈕實(shí)際輸出：搜索之出現(xiàn)關(guān)于周文軒的信息測(cè)試用例2（錯(cuò)誤輸入）輸入：用戶(hù)：卡卡西期望輸出：出現(xiàn)無(wú)數(shù)據(jù)的相關(guān)提示實(shí)際輸出：出現(xiàn)無(wú)數(shù)據(jù)的提示6.2系統(tǒng)測(cè)試的流程測(cè)試測(cè)試評(píng)價(jià)糾錯(cuò)系統(tǒng)測(cè)試數(shù)據(jù)測(cè)試結(jié)果錯(cuò)誤信息改正信息期望結(jié)果圖6-1測(cè)試與糾錯(cuò)信息流程6.3測(cè)試分析本基于微信小程序的美食美餐系統(tǒng)應(yīng)用滿足相關(guān)信息的管理需求，在設(shè)計(jì)時(shí)綜合了國(guó)內(nèi)外的開(kāi)發(fā)經(jīng)驗(yàn)，兼容其他技術(shù)的技術(shù)要素等特點(diǎn)，他的用戶(hù)使用界面還有功能都基本上滿足了用戶(hù)的需求。系統(tǒng)的主要特點(diǎn)和優(yōu)點(diǎn)歸納如下：（1）本系統(tǒng)用的兼容性以及針對(duì)性都是比較高的，他不僅可以在iOS系統(tǒng)上正常運(yùn)行，windows也是一點(diǎn)問(wèn)題沒(méi)有，ie瀏覽器和谷歌都可以，更給客戶(hù)帶來(lái)了極大的方便，尤其是那些本來(lái)就落后的企業(yè)，這種針對(duì)性兼容性極強(qiáng)的軟件無(wú)疑給他們帶來(lái)了極大的方便。（2）該基于微信小程序的應(yīng)用內(nèi)容全面，對(duì)于管理方面，錯(cuò)誤就很容易被揪出來(lái)，異常就很容易被監(jiān)聽(tīng)到，這樣避免了很多像用戶(hù)因?yàn)椴僮魇д`或者不注意產(chǎn)生錯(cuò)誤的發(fā)生，其操作方便。結(jié)論通過(guò)這次小程序的設(shè)計(jì)與開(kāi)發(fā)，我基本上掌握了實(shí)現(xiàn)了java與微信小程序相結(jié)合構(gòu)建的應(yīng)用，同時(shí)也鞏固了前端知識(shí)中html，css，js，微信小程序等語(yǔ)言的書(shū)寫(xiě)和結(jié)構(gòu)。加深熟悉盒模型，浮動(dòng)與定位的相關(guān)知