mpvue从一无所有开始仿大众点评小程序

最近尝试了下用mpvue框架开发小程序，它是基于vue开发的。

官方介绍：
mpvue 是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验。

但就使用感受来说，还不如学原生呢，主要是mpvue和原生的客服体验差别太大了，mpvue八白年才有一次更新，而原生在小程序团队的不断完善下已经愈来愈好了，而且新开发的接口通过原生进行使用也会省去不少烦恼~

但会vue上手mpvue确实比较简单哈，下面使用mpvue从一无所有开始仿大众点评小程序。

---

一、开发准备(假设没有部署任何环境)

(1) 安装微信开发者工具

(2) 安装node.js（主要是使用npm，方便对包进行管理）

(3) 全局安装vue-cli, cmd中运行

npm install --g vue-cli

---

二、安装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

编译完成后，会显示下图，但先不必关闭这个窗口，因为如果修改代码并保存后，它会自动重新编译。

至此，一个简单的小程序就创建完成了。
使用微信开发者工具打开当前工作目录，即可看到当前的小程序。

---

三、开发大众点评小程序

下面我们在这锅小程序模板的基础上修改，来进行大众点评小程序的开发。

(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

转载于:https://www.cnblogs.com/Gavin257/p/10991948.html