新手入坑mpvue(没朋友)实战指南

本文的核心宗旨是带着新手一起入坑mpvue(没朋友)，如果看完没有成功入坑，请再看一遍，谢谢

微信小程序

微信小程序简称小程序，英文名Mini Program，也被称为微信应用号，不同于微信订阅号或公众号，微信小程序被赋予了应用程序的能力，它是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用；也体现了“用完即走”的理念，用户不再需要关心是否安装太多应用的问题。

目前开发小程序，大多数都是通过看小程序的官网原生开发
官网：https://developers.weixin.qq....

Mpvue没朋友

mpvue是一个使用 Vue.js 开发小程序的前端框架，由美团点评技术团队开发在2018年3月开源。框架基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验。

mpvue官网：http://mpvue.com/
github地址：https://github.com/Meituan-Di...

为啥好好的小程序原生开发需要加入vuejs？
1.小程序不能使用npm,使用第三方包的方式太原始
2.需要为小程序单独开发代码，不能和web系统重用
3.开发效率和学习成本（小程序的特有的语法）

mpvue和wepy对比最后mpvue是怎么胜出的？
wepy官网：https://tencent.github.io/wepy/
用一张图来简单概括下mpvue/wepy/原生小程序的区别：

再多说点mpvue的介绍（内容从参加美团点评技术峰会上Get）
mpvue的使用场景可以分为：
1.单独使用mpvue(标准的使用方式，quickstart)
2.mpvue为主，辅以其他
3.mpvue做增量开发（使用mpvueSimple轻量化构建工具）

更多的内容戳下面的地址：
美团点评技术沙龙第35期：北京站-前端热点技术的企业级实践-回放地址：http://www.itdks.com/eventlis...

如何迈出跳进mpvue的第一步

官网有个五分钟教程，当然，你也可以再看一遍我搬运过来的二分钟教程

# 1. 先检查下 Node.js 是否安装成功
$ node -v
v8.9.0

$ npm -v
5.6.0

# 2. 由于众所周知的原因，可以考虑切换源为 taobao 源
$ npm set registry https://registry.npm.taobao.org/

# 3. 全局安装 vue-cli
# 一般是要 sudo 权限的
$ npm install --global vue-cli

# 4. 创建一个基于 mpvue-quickstart 模板的新项目
# 新手一路回车选择默认就可以了
$ vue init mpvue/mpvue-quickstart my-project

# 5. 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev

执行上面的命令后，一路下来的应该长成这样子

这里不要忘记npm install，下面该打开生成项目了，拆箱图解如下



好了，接下来就是你大展身手的时候了~

豆瓣读书：（一）图书扫码

首先第一步你旁边要现有一本书，翻到书的B面，看到后面的条码就是即将要扫的东西

开始写代码，扫码这个API肯定是用小程序的，打开小程序文档找到扫码接口：
https://developers.weixin.qq....

提供的示例代码，一会就能直接复制了

// 允许从相机和相册扫码
wx.scanCode({
  success: (res) => {
    console.log(res)
  }
})

// 只允许从相机扫码
wx.scanCode({
  onlyFromCamera: true,
  success: (res) => {
    console.log(res)
  }
})

修改index.vue 毕竟它才是主页，像平时vue一样，加点击事件只不过方法里面的内容换成了小程序的API

准备就绪后，在微信开发者工具里面点击预览，就可以拿出你的手机扫一扫了，在console控制台可以看到的输出的ISBN码 9787535732309 ，打开豆瓣读书官网搜索一下

这就完成了扫码的过程，拿到图书的ISBN码之后，存数据库或者干嘛都可以了

豆瓣读书：（二）图书列表

图书列表的数据来源使用easy-mock

easy-mock(https://www.easy-mock.com)是...，模拟后端的接口完成数据请求绑定，其实就是把之前本地写死的JSON文件，换了一个地方写，前端不用等待后端的接口开发完成再进行工作，可以同后端协商好数据格式后就开工了

下图是easy-mock创建接口后进入到的编辑页面，大刀破斧的写你的json数据吧

数据写完后，地址栏的URL就是一会要访问的接口地址，回到项目中来发送请求即可，还是写在index.vue下

<template>
<div>
  <button @click="scanCode()">
    扫描图书
  </button>
  <h3>图书列表</h3>
  <div v-bind:key='book.isbn' v-for='book in books'>{{book.title}}</div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data:{
      books: []
  },
  methods: {
    scanCode() {
      wx.scanCode({
        success: res => {
          console.log(res);
        }
      });
    }
  },
  mounted() {
    wx.request({
      url:
        "https://www.easy-mock.com/mock/5b3ec93b119b373c0443793d/mpvuedata/list",
      success: res => {
        this.books = res.data.data;
      }
    });
  }
};
</script>

<style scoped>
h3{
  font-size:60rpx;
}
div{
  font-size: 40rpx;
}
</style>

运行后结果就会把数据动态的输出出来了

最后彩蛋

稍微总结下，通过上面做的两个功能（扫码、图书列表数据绑定）已经可以知道如何使用mpvue进行小程序的开发，如需调用其他的API使用方法同扫码功能，做数据请求同图书列表功能一样，希望本文帮助新入坑mpvue的小伙伴成功进坑~

如果本文对你有一丢丢帮助，可以点一个赞再走，每个赞都是支持我继续写下去的动力 ~
——来自mpvue坑里的声音