新手入坑mpvue(没朋友)实战指南-白红宇

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

阅读量：5977 次

发布时间：2019-06-20

本文共 2216 字，大约阅读时间需要 7 分钟。

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

微信小程序

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

目前开发小程序，大多数都是通过看小程序的官网原生开发

官网：

Mpvue没朋友

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

mpvue官网：

github地址：

为啥好好的小程序原生开发需要加入vuejs？

1.小程序不能使用npm,使用第三方包的方式太原始

2.需要为小程序单独开发代码，不能和web系统重用

3.开发效率和学习成本（小程序的特有的语法）

mpvue和wepy对比最后mpvue是怎么胜出的？

wepy官网：

用一张图来简单概括下mpvue/wepy/原生小程序的区别：

再多说点mpvue的介绍（内容从参加美团点评技术峰会上Get）

mpvue的使用场景可以分为：

1.单独使用mpvue(标准的使用方式，quickstart)

2.mpvue为主，辅以其他

3.mpvue做增量开发（使用mpvueSimple轻量化构建工具）

更多的内容戳下面的地址：

美团点评技术沙龙第35期：北京站-前端热点技术的企业级实践-回放地址：

如何迈出跳进mpvue的第一步

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

# 1. 先检查下 Node.js 是否安装成功$ node -vv8.9.0$ npm -v5.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肯定是用小程序的，打开小程序文档找到扫码接口：

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

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

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