7附加模塊-移動(dòng)電子商務(wù)開發(fā)技術(shù)

美團(tuán)外賣小程序開發(fā)案例美團(tuán)外賣是美團(tuán)網(wǎng)旗下的網(wǎng)上訂餐平臺，于2013年11月正式上線，目前覆蓋全國兩百余個(gè)城市。美團(tuán)外賣精心挑選眾多優(yōu)質(zhì)外賣商家，為客戶提供快速、便捷的線上訂外賣服務(wù)。美團(tuán)外賣小程序相比原版App，小程序的功能界面進(jìn)行了精簡，信息量更少，保留了主體功能。進(jìn)入小程序速度及定位上都可以用瞬間來形容，選擇商戶，即可享受與APP端一樣的訂餐服務(wù)。一、優(yōu)勢體現(xiàn)美團(tuán)外賣小程序打通“點(diǎn)餐-支付-出單-配送”等各個(gè)環(huán)節(jié)，實(shí)現(xiàn)一體化的營銷管理。商戶可自主創(chuàng)建外賣菜單，配置營業(yè)時(shí)間、配送范圍、配送費(fèi)用等參數(shù)，顧客在微信上就能完成下單支付，商戶則可通過系統(tǒng)后臺接收顧客訂單，實(shí)現(xiàn)便捷的訂單管理。二、美團(tuán)外賣小程序開發(fā)步驟步驟1：獲取微信小程序的AppID首先需要登錄微信公眾號平臺小程序，就可以在網(wǎng)站的“設(shè)置”-“開發(fā)者設(shè)置”中，查看到微信小程序的AppID了，注意不可直接使用服務(wù)號或訂閱號的AppID。步驟2：開發(fā)者工具安裝完成后，打開并使用微信掃碼登錄。選擇創(chuàng)建“項(xiàng)目”，填入上文獲取到的AppID，設(shè)置一個(gè)本地項(xiàng)目的名稱（非小程序名稱），比如“我的第一個(gè)項(xiàng)目”，并選擇一個(gè)本地的文件夾作為代碼存儲的目錄，點(diǎn)擊“新建項(xiàng)目”就可以了。項(xiàng)目創(chuàng)建成功后，可以點(diǎn)擊該項(xiàng)目，進(jìn)入并看到完整的開發(fā)者工具界面，點(diǎn)擊左側(cè)導(dǎo)航，在“編輯”里可以查看和編輯代碼，在“調(diào)試”里可以測試代碼并模擬小程序在微信客戶端效果，在“項(xiàng)目”里可以發(fā)送到手機(jī)里預(yù)覽實(shí)際效果。步驟3：編寫代碼點(diǎn)擊開發(fā)者工具左側(cè)導(dǎo)航的“編輯”，可以看到這個(gè)項(xiàng)目，已經(jīng)初始化并包含了一些簡單的代碼文件。最關(guān)鍵也是必不可少的，是app.js、app.json、app.wxss這三個(gè)。其中，.js后綴的是腳本文件，.json后綴的文件是配置文件，.wxss后綴的是樣式表文件。微信小程序會讀取這些文件，并生成小程序?qū)嵗?。步驟4：創(chuàng)建頁面以index頁面和logs頁面為例，即歡迎頁和小程序啟動(dòng)日志的展示頁，它們都在pages目錄下。微信小程序中的每一個(gè)頁面的【路徑+頁面名】都需要寫在app.json的pages中，且pages中的第一個(gè)頁面是小程序的首頁。每一個(gè)小程序頁面是由同路徑下同名的四個(gè)不同后綴文件的組成，如：index.js、index.wxml、index.wxss、index.json。.js后綴的文件是腳本文件，.json后綴的文件是配置文件，.wxss后綴的是樣式表文件，.wxml后綴的文件是頁面結(jié)構(gòu)文件。運(yùn)行結(jié)果如下：步驟5：手機(jī)預(yù)覽開發(fā)者工具左側(cè)菜單欄選擇“項(xiàng)目”，點(diǎn)擊“預(yù)覽”，掃碼后即可在微信客戶端中體驗(yàn)。步驟6：體驗(yàn)小程序下載源碼使用開發(fā)者工具預(yù)覽微信小程序的完整功能。美團(tuán)外賣小程序基本涵蓋了美食、美團(tuán)專送及下午茶等常規(guī)的外賣服務(wù)，完全能夠滿足用戶的日常需求，而且打開速度、地址定位、順暢程度都相當(dāng)出色，對于