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