本章涉及知識(shí)點(diǎn)

1级解、前言

2、mpVue框架簡介

3田绑、項(xiàng)目配置和結(jié)構(gòu)

4勤哗、主程序入口配置

5、首頁頁面

6掩驱、城市選擇頁面

7芒划、搜索頁面

8、訂單列表頁面

9昙篙、我的頁面

10腊状、商品詳情頁面

11、評(píng)論列表頁面

12苔可、提交訂單頁面

13缴挖、訂單詳情頁

14、通用方法封裝

15焚辅、Vuex的設(shè)計(jì)

16映屋、后記

一、前言

繼寫完上一篇原生JS實(shí)現(xiàn)輕量Vue+指令解析+變異數(shù)組監(jiān)聽的代碼和文章后同蜻，本來筆者已經(jīng)寫完了原生JS實(shí)現(xiàn)輕量React的代碼棚点，而正在寫其文章的時(shí)候，突然被mpVue打斷湾蔓，因?yàn)閺那白约阂恢辈幌矚g小程序開發(fā)瘫析，依賴微信平臺(tái)不說，微信還重新封裝了一遍其語法糖默责，但是mpVue的開源讓開發(fā)者可以用原生Vue來開發(fā)小程序贬循，其實(shí)其本質(zhì)任然是將Vue編譯成原生小程序的AST，最后再翻譯成原生webView代碼桃序，于是筆者暫停下了寫React的文章轉(zhuǎn)而用mpVue先開發(fā)個(gè)小程序

既然是美團(tuán)開源的框架杖虾，那我們就高仿一個(gè)美團(tuán)唄！于是就寫了這篇文章教程媒熊，筆者花了3天時(shí)間奇适，用mpVue框架+自定義Vue組件+原生小程序組件+Vuex開發(fā)出了一個(gè)高仿美團(tuán)的小程序坟比，相似度達(dá)到90%以上，體驗(yàn)程度還是非常流暢的嚷往，畢竟翻譯到最后是原生App代碼

二葛账、mpVue框架簡介

我們知道微信小程序有著自己的一套語法糖，包括自己的標(biāo)簽皮仁，樣式規(guī)范和語法注竿，本身也沒有組件化機(jī)制（表示難以接受），其推出的Wepy也是類Vue的開發(fā)規(guī)范魂贬，用著也是別扭，為此裙顽，mpVue是完全基于Vue的開發(fā)規(guī)范付燥，包括生命周期，且完全支持Vue自定義組件規(guī)范愈犹，對(duì)于Vue開發(fā)者來說键科，可以無縫對(duì)接的開發(fā)小程序

關(guān)于mpVue更多的功能，可以參考其官網(wǎng)：mpVue官網(wǎng)

三漩怎、項(xiàng)目配置和結(jié)構(gòu)

整體項(xiàng)目結(jié)構(gòu)

可以看到mpVue的項(xiàng)目目錄結(jié)構(gòu)非常熟悉勋颖，下面我們開始開發(fā)各個(gè)頁面

四、主程序入口配置

入口設(shè)計(jì)-1

我們?cè)陧?xiàng)目入口里引入公共css勋锤、公共方法饭玲、以及store，并將公共方法掛載到Vue的原型上

入口設(shè)計(jì)-2

根據(jù)小程序app.json的配置叁执，我們配置好所有頁page茄厘、window以及tabBar

五、首頁頁面

首頁有輪播圖谈宛，圖標(biāo)九宮格次哈，猜你喜歡的商品列表，還有當(dāng)前城市和搜索面板吆录，其分別是選擇城市頁面和搜索頁面頁面的入口

首頁頁面的頁面布局代碼為

首頁部分代碼-1

首頁部分代碼-2

首頁部分代碼-3

其中我們提取封裝出商品卡片組件good

good組件部分代碼

注意我們注入store中的當(dāng)前城市變量窑滞，讓其不被跳轉(zhuǎn)影響

引入store

最終首頁在真機(jī)上顯示如下

首頁

六、城市選擇頁面

城市選擇頁面有當(dāng)前/最近訪問城市恢筝、熱門城市哀卫、根據(jù)首字母展示所有城市，還有右側(cè)固定住的26個(gè)首字母作為點(diǎn)擊事件滋恬，可以滑動(dòng)到相應(yīng)的首字母下的城市列表

我們封裝出city組件聊训，其頁面布局代碼為

city組件部分代碼-1

city組件部分代碼-2

我們引入cityData，并在點(diǎn)擊任意城市的時(shí)候emit給父組件（即城市選擇頁面）

對(duì)于點(diǎn)擊首字母滑動(dòng)頁面到相應(yīng)首字母對(duì)應(yīng)城市的位置的處理恢氯，由于小程序沒有任何dom带斑，我們不能使用錨點(diǎn)或者window.scrollTo鼓寺，但是我們可以利用原生小程序提供的scroll-view中scroll-into-view屬性來滾動(dòng)到相應(yīng)位置，為此我們只需要用Vue來托管scroll-into-view變量currView即可

city組件部分代碼-3

最終城市選擇頁面在真機(jī)上顯示如下

城市選擇頁面

七勋磕、搜索頁面

搜索頁面有搜索輸入框妈候，猜你想找和歷史搜索的面板，對(duì)于動(dòng)態(tài)監(jiān)聽到輸入的搜索關(guān)鍵詞挂滓，以滾動(dòng)列表的形式展示符合搜索關(guān)鍵詞的結(jié)果集合苦银，所以猜你想找和歷史搜索的面板，與搜索結(jié)果列表為互斥關(guān)系

搜索頁面的頁面布局代碼為

搜索頁面部分代碼-1

搜索頁面部分代碼-2

對(duì)于模擬搜索動(dòng)態(tài)列表赶站，我們?cè)赿ata里定義搜索總集合幔虏、當(dāng)前搜索關(guān)鍵詞和根據(jù)當(dāng)前搜索關(guān)鍵詞匹配到的結(jié)果列表

搜索頁面部分代碼-3

我們需要監(jiān)聽input的輸入事件和完成事件，來維護(hù)當(dāng)前搜索關(guān)鍵詞和動(dòng)態(tài)過濾符合搜索關(guān)鍵詞的結(jié)果集

搜索頁面部分代碼-4

最終搜索頁面在真機(jī)上顯示如下

搜索頁面

八贝椿、訂單列表頁面

訂單列表頁面比較簡單了想括，只有商品列表的滾動(dòng)展示

這里為了演示滾動(dòng)效果，我模擬循環(huán)了12次常量數(shù)據(jù)烙博，訂單列表頁面的頁面布局代碼為

訂單列表頁面部分代碼-1

最終訂單列表頁面在真機(jī)上顯示如下

訂單列表頁面

九瑟蜈、我的頁面

我的頁面有登錄、退出渣窜、以及4個(gè)入口項(xiàng)铺根，在點(diǎn)擊登錄后動(dòng)態(tài)獲取用戶信息，渲染登錄按鈕為用戶的頭像乔宿、昵稱位迂、性別和居住地信息，點(diǎn)擊退出按鈕后清除用戶信息并替換為登錄按鈕

我的頁面的頁面布局代碼為

我的頁面部分代碼-1

我的頁面部分代碼-2

我們引入store來在用戶點(diǎn)擊登錄或者退出的時(shí)候予颤，動(dòng)態(tài)維護(hù)用戶登錄狀態(tài)和用戶信息

我的頁面部分代碼-3

最終我的頁面在真機(jī)上顯示如下

我的頁面

十囤官、商品詳情頁面

商品詳情頁面有商品主圖價(jià)格信息、映像標(biāo)簽蛤虐、商家信息党饮、套餐信息、購買須知驳庭、部分用戶評(píng)論和相關(guān)商品推薦板塊刑顺，頁面里有兩個(gè)其它頁的入口，分別是提交訂單和用戶評(píng)論列表入口

商品詳情頁面的頁面布局代碼為

商品詳情頁部分代碼-1

商品詳情頁部分代碼-2

商品詳情頁部分代碼-3

商品詳情頁部分代碼-4

商品詳情頁部分代碼-5

這個(gè)頁面里用到了卡片組件good饲常，打星評(píng)分組件star和評(píng)論組件comment蹲堂，good組件首頁已經(jīng)封裝好，下面我們封裝出star和comment組件

下面是star組件的布局代碼

star組件部分代碼-1

注意：由于小程序沒有偽類贝淤，為此我們利用absolute來動(dòng)態(tài)渲染星星的顏色

為此需要?jiǎng)討B(tài)的計(jì)算每一個(gè)星星染色寬度柒竞，100表示完全染色，30表示1/3染色

star組件部分代碼-2

下面是comment組件的布局代碼

comment組件部分代碼-1

最終商品詳情頁面在真機(jī)上顯示如下

商品詳情頁面

十一播聪、評(píng)論列表頁面

這個(gè)頁面是通過商品詳情頁為入口進(jìn)入朽基，其評(píng)論分為全部布隔、曬圖評(píng)論、低分評(píng)論和最新評(píng)論稼虎，各個(gè)評(píng)論的通過swiper滑動(dòng)切換來更新相應(yīng)的評(píng)論列表

評(píng)論列表頁面的頁面布局為

評(píng)論列表頁面部分代碼-1

評(píng)論列表頁面部分代碼-2

評(píng)論列表頁面部分代碼-3

為了演示不同類型評(píng)論的切換衅檀，我們定義好全集評(píng)論列表，并過濾計(jì)算出不同類型的數(shù)組用于渲染不同的列表

評(píng)論列表頁面部分代碼-4

最終評(píng)論列表頁面在真機(jī)上顯示如下

評(píng)論列表頁面

十二霎俩、提交訂單頁面

這個(gè)頁面主要有數(shù)量的動(dòng)態(tài)增加或者減少哀军，以及價(jià)格的動(dòng)態(tài)變化

提交訂單頁面的頁面布局為

提交訂單頁面部分代碼-1

提交訂單頁面部分代碼-2

由于數(shù)量需要?jiǎng)討B(tài)增減，我們封裝出計(jì)數(shù)組件counter

counter組件的布局為

counter組件部分代碼-1

增減數(shù)量后emit給父組件即可

counter組件部分代碼-2

最終訂單提交頁面在真機(jī)上顯示如下

訂單提交頁面

十三打却、訂單詳情頁面

訂單詳情頁面由訂單列表頁進(jìn)入杉适，主要就是商家信息和訂單信息的展示

訂單詳情頁部分代碼-1

訂單詳情頁部分代碼-2

最終訂單詳情頁面在真機(jī)上顯示如下

訂單詳情頁

十四、通用方法封裝

開發(fā)完所有頁面后柳击，我們來封裝一些通用函數(shù)淘衙，方便掛載到Vue原型上在任何頁面使用

首先是Ajax封裝，由于微信提供的request是類似Jquery的語法里帶上各個(gè)回調(diào)函數(shù)腻暮，這讓我們使用習(xí)慣Promise或者es7的async/await的異步編程風(fēng)格后顯得非常不舒服，所以我們將request封裝成Promise風(fēng)格毯侦，讓我們可以在任何頁面通過async/await來接收服務(wù)器的返回值

封裝Ajax為Promise風(fēng)格的函數(shù)如下

封裝Ajax

下面我們簡單的封裝一些常用的方法哭靖，如打開新窗口，返回上一級(jí)窗口和重定向

常用的方法

最后在主程序入口里掛載即可

掛載通用方法

十五侈离、Vuex的設(shè)計(jì)

我們?cè)趕tore里設(shè)置三個(gè)狀態(tài)试幽，分別為當(dāng)前城市、用戶是否登錄標(biāo)志和用戶信息集合卦碾，并在mutations里提供更新維護(hù)這三個(gè)狀態(tài)的方法接口即可

Vuex的設(shè)計(jì)-1

Vuex的設(shè)計(jì)-2

最后將store掛載到Vue的原型上即可

掛載store

十六铺坞、后記

這個(gè)案例，通過使用mpVue框架模仿一個(gè)美團(tuán)小程序洲胖，業(yè)務(wù)上模擬了從商品列表济榨，到商品詳情，到評(píng)論列表绿映，到訂單提交擒滑，到訂單列表，到訂單詳情叉弦，以及城市選擇丐一、全局搜索過濾，以及我的頁面的登錄等淹冰，可以看到用Vue模板引擎框架和原生JS編程库车，能夠非常輕易的做出一個(gè)體驗(yàn)非常流暢的小程序

由于案例只是做純前端的渲染邏輯展示，所以數(shù)據(jù)全集都是寫死的樱拴，并沒有Ajax服務(wù)器數(shù)據(jù)柠衍，不過開發(fā)者應(yīng)該都知道洋满，前后端分離，只要將所有頁面data里的數(shù)據(jù)通過封裝好的Ajax拉取到服務(wù)器數(shù)據(jù)后渲染即可

案例代碼見：高仿美團(tuán)小程序