新手入坑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坑裏的聲音