mpvue從一無全部開始仿大衆點評小程序

最近嘗試了下用mpvue框架開發小程序，它是基於vue開發的。

官方介紹：
mpvue 是一個使用 Vue.js 開發小程序的前端框架。框架基於 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 實現，使其能夠運行在小程序環境中，從而爲小程序開發引入了整套 Vue.js 開發體驗。

但就使用感覺來講，還不如學原生呢，主要是mpvue和原生的客服體驗差異太大了，mpvue八白年纔有一次更新，而原生在小程序團隊的不斷完善下已經越來越好了，並且新開發的接口經過原生進行使用也會省去很多煩惱~

但會vue上手mpvue確實比較簡單哈，下面使用mpvue從一無全部開始仿大衆點評小程序。

---

1、開發準備(假設沒有部署任何環境)

(1) 安裝微信開發者工具

(2) 安裝node.js（主要是使用npm，方便對包進行管理）

(3) 全局安裝vue-cli, cmd中運行

npm install --g vue-cli

---

2、安裝mpvue模板

(1) 選擇一個工做路徑，cmd中運行

vue init mpvue/mpvue-quickstart dianping-demo

安裝途中詢問的選項基本均可以選y，但若是問到是否使用ESLint時，牆裂建議選n!。
ESlint主要是用來進行語法檢測的，在碼字時不時報錯，很！煩！的！若是手殘點了y，也能夠按這裏的操做來取消。

(2) 進入建立的dianping-test目錄，並安裝依賴

cd dianping-demo
npm install

(3) 編譯運行項目

npm start

編譯完成後，會顯示下圖，但先沒必要關閉這個窗口，由於若是修改代碼並保存後，它會自動從新編譯。

至此，一個簡單的小程序就建立完成了。
使用微信開發者工具打開當前工做目錄，便可看到當前的小程序。

---

3、開發大衆點評小程序

下面咱們在這鍋小程序模板的基礎上修改，來進行大衆點評小程序的開發。

(0) 首先咱們來大體瞭解一下項目的文件結構

dianping-demo
├── package.json
├── project.config.json       
├── static 
├── node_modules 
├── dist           
├── src
│    ├── components
│    ├── pages
│    ├── utils
│    ├── App.vue
│    ├── app.json
│    └── main.js
├── config
└── build

咱們主要關注的是src文件夾，在該文件夾下，模板已自動生成了一些文件。

• src/components中存放的是在界面上可複用的組件；
• src/pages中存放的是小程序的頁面，至關於原生小程序中的pages；
• src/utils存放的是工具函數，通常模板小程序中的工具函數都用不上，可刪；
• App.vue是小程序的入口文件，控制小程序的總體邏輯，至關於原生小程序中的app.js+app.wxss；
• app.json控制小程序頁面加載和狀態欄，至關於原生小程序中的app.json；
• main.js中生成vue實例並掛載，至關於原生小程序的main.js

其餘目錄和文件主要是小程序的配置文件，想詳細瞭解可看這篇博文使用mpvue開發小程序教程（二）
想了解原生小程序的目錄結構看這裏

(1) 全局配置
首先咱們能夠從這裏下載icon等本地文件，將整個images文件夾放入static文件夾中（或直接將整個項目下載，而後將其中的static與當前的static合併），
將dist、src/App.vue和src/app.json中的原內容清空，

將如下內容寫入App.vue:

<script>
/*至關於原生小程序的app.js*/
export default {
}
</script>

<style>
/*將橫向滑動欄隱藏*/
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}
</style>

將如下寫入app.json

{
  "pages": [
    "pages/index/main"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "大衆點評",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "color": "#999",
    "backgroundColor": "#fafafa",
    "selectedColor": "#333",
    "borderStyle": "white",
    "list": [{
      "text": "首頁",
      "pagePath": "pages/index/main",
      "iconPath": "static/images/home.png",
      "selectedIconPath": "static/images/home-on.png"
    }, {
      "text": "排行榜",
      "pagePath": "pages/index/main",
      "iconPath": "static/images/rankicon.png",
      "selectedIconPath": "static/images/rankicon-on.png"
    }, {
      "text": "關注",
      "pagePath": "pages/index/main",
      "iconPath": "static/images/follow.png",
      "selectedIconPath": "static/images/follow-on.png"
    }, {
      "text": "個人",
      "pagePath": "pages/index/main",
      "iconPath": "static/images/myicon.png",
      "selectedIconPath": "static/images/myicon-on.png"
    }],
    "position": "bottom"
  }
}

(2) 頁面配置
將src/pages下的全部原文件刪除,而後在該目錄下建立index文件夾，在index下建立index.vue、main.js
再main.js中寫入：

/*對每一個頁面生成vue實例，並掛載*/
import Vue from 'vue'
import App from './index'

const app = new Vue(App)
app.$mount()

(3) 首先在index.vue的<template>便籤中進行頁面結構的佈置，可用HTML進行書寫，如下代碼段爲例：

<template>
<!--至關於原生小程序的index.wxml-->
<div class="container">
    <div v-for="(item, index) in category1" class="category1">
      <img :src=item.icon>
      <div class="desc">{{item.desc}}</div>
    </div>
</div>
</template>

頁面模板遵循vue語法:

• 用v-for="(item, index) in category1對category1中的對象進行循環；
• 使用:src=item.icon將item.icon的值賦予src；
• 使用雙括號{{item.desc}}顯示變量tem.desc的值。

(4) 而後在<script>便籤中返回<template>綁定的數據，以上述代碼段爲例:

<script>
/*至關於原生小程序的main.js*/
export default {
  data() {
   return {
    category1: [
      {
        icon: "../../static/images/icon1.jpg",
        desc: "美食",
      },
      {
        icon: "../../static/images/icon2.jpg",
        desc: "美團外賣",
      },
      {
        icon: "../../static/images/icon3.jpg",
        desc: "休閒娛樂",
      },
      {
        icon: "../../static/images/icon4.jpg",
        desc: "酒店",
      },
      {
        icon: "../../static/images/icon5.jpg",
        desc: "電影/演出",
      },
      {
        icon: "../../static/images/icon6.jpg",
        desc: "麗人",
      },
      {
        icon: "../../static/images/icon7.jpg",
        desc: "周邊遊",
      },
      {
        icon: "../../static/images/icon8.jpg",
        desc: "購物/商場",
      },
      {
        icon: "../../static/images/icon9.jpg",
        desc: "KTV",
      },
      {
        icon: "../../static/images/icon10.jpg",
        desc: "親子",
      }]
    }
  }
}
</script>

(5) 在<style>標籤中完成樣式編寫。
mpvue支持sass，這裏先中止編譯的cmd窗口，在工做目錄下的package.json中加入sass-loader、node-sass保存後

在cmd 窗口再次運行：

npm install
npm start

一樣以上代碼段爲例：

<style lang="scss" scoped>
  .category1 {
    display: inline-block;
    width: 140rpx;
    margin: 15rpx 0;
    img { 
      margin: 10rpx 20rpx;
      height: 100rpx;
      width: 100rpx;
    }
    .desc {
      text-align: center;
      font-size: 75%;
    }
  }
</style>

注意這裏必須加上lang="scss"才能使用sass
上述代碼綜合起來便可獲得如下頁面片斷

首頁其餘頁面結構可仿照上面的模式進行開發。
首頁App.vue的完整代碼見這裏。
首頁效果圖：

項目完整代碼見這裏 https://github.com/Gavin257/mpvue-dianping-demo