美团mpvue⼊门教程
美团⼩程序框架 mpvue ⼊门教程
⾃打写了 , ⼀发不可收拾，今天趁周末空闲，来写个 mpvue(没朋友)的简单⼊门教程，本教程只针对新⼿，⽼鸟勿喷。
另外，我还专门为本⽂做了⼀个简单的项⽬，如果懒得从头开始搭项⽬的童鞋，可以直接去我的上克隆到本地，安装⼀下依赖，即可直接在此基础在开发，不需要做任何配置。如果你觉得该项⽬对有帮助，请顺便给我 Star，你们的⽀持是我最⼤的动⼒，谢谢!
好了，我们进⼊主题，⾸先，请允许引⽤⼀下美团官⽅对 mpvue 的介绍
mpvue 是⼀个使⽤ Vue.js 开发⼩程序的前端框架。框架基于 Vue.js 核⼼，mpvue 修改了 Vue.js 的 runtime 和 compiler 实现，使其可以运⾏在⼩程序环境中，从⽽为⼩程序开发引⼊了整套 Vue.js 开发体验。
主要特性
使⽤ mpvue 开发⼩程序，你将在⼩程序技术体系的基础上获取到这样⼀些能⼒：
1. 彻底的组件化开发能⼒：提⾼代码复⽤性
2. 完整的 Vue.js 开发体验
3. ⽅便的 Vuex 数据管理⽅案：⽅便构建复杂应⽤
4. 快捷的 webpack 构建机制：⾃定义构建策略、开发阶段 hotReload
5. ⽀持使⽤ npm 外部依赖
6. 使⽤ Vue.js 命令⾏⼯具 vue-cli 快速初始化项⽬
7. H5 代码转换编译成⼩程序⽬标代码的能⼒
开始
学习最好的⽅式就动⼿，我们就徒⼿撸⼀个 demo 项⽬出来跑⼀跑，看看到底有没有官⽅说的那么好。如果你有过 vue 的开发经历，相信你会对这个过程⾮常熟悉，甚⾄你都不需要安装其他⼯具，直接⽤ vue-cli 创建项⽬，如果你⼀起没安装过 vue-cli，那么你要先运⾏⼀下命令
npm install --g vue-cli
安装完 vue-cli 以后，我们就可以运⾏⼀下命令，来⾃动构建⼀个项⽬（期间会询问你是否使⽤⼀些⼯具 /插件，请根据⾃⼰的实际情况选择y 或 n，对于不懂得该选 y 还是 n 的，统统选 n ）
vue init mpvue/mpvue-quickstart test-wxapp
php实例代码教程然后进⼊我们创建的项⽬，并安装依赖
cd test-wxapp
npm i
最后，在运⾏⼀下我们的开发服务
npm run dev
项⽬就跑起来了，这个时候，我们打开开发者⼯具，选择⼩程序，然后新建⼀个，项⽬⽬录填我们项⽬⽬录下的dist⽬录test-wxapp/dist，就可以看到效果了
进阶
到此为⽌，⼀个基本的项⽬就完成了，但是，本⽂的⽬的不是让你学会搭⼀个空项⽬的，空项⽬的话，
我觉得官⽅教程做的已经够好了。接下来，我们来删掉⼏个⽰例⽂件，然后⼀步步添加页⾯. ⾸先，我们看⼀下项⽬的配置⽂件/src/main.js⾥⾯的初始内容如下：
import Vue from 'vue'
import App from './App'
App.mpType = 'app'
const app = new Vue(App)
app.$mount()
export default {
// 这个字段⾛ app.json
config: {
/
/ 页⾯前带有 ^ 符号的，会被编译成⾸页，其他页⾯可以选填，我们会⾃动把 webpack entry ⾥⾯的⼊⼝页⾯加进去
pages: ['pages/logs/main', '^pages/index/main'],
window: {
backgroundTextStyle: 'light',
navigationBarBackgroundColor: '#fff',
navigationBarTitleText: 'WeChat',
navigationBarTextStyle: 'black'
}
}
}
这⾥的config字段下⾯的内容，就是整个⼩程序的全局配置了，其中pages是页⾯的路由，window则是页⾯的⼀些配置（⼤部分都是顶部栏的配置），这些配置，最终都会被打包到原⽣⼩程序的app.json，对这些配置不了解的，建议看⼀下⽅法的⼩程序⽂档，这⾥不做赘述。
我们先把/src/pages下⾯的counter和logs两个⽂件夹删掉，只保留⼀个index ，顺便把/src/components⽂件夹下⾯的⽂件也全删掉, 然后
把/src/main.js⾥⾯的config.pages⾥⾯多余的路由也删掉，只保留⼀条['^pages/index/main']，这样⽬前就只有个 index 页⾯，
然后我们打开/src/pages/index/index.vue我们把⾥⾯多余的代码删掉，只保留⼀个基础⾻架
<template>
<div class="container">
我是⾸页
</div>
</template>
<script>
export default {
data () {
return { }
},
methods: {},
created () {}
}
</script>
<style scoped>
</style>
tip /src/utils/index.js是⼀个公共函数库，⾥⾯只有⼀个简单的格式化⽇期函数，不要也可以删掉
到⽬前为⽌，⼀个⼲净的空项⽬就算是 ok 了，接下来我们来对原⽣的⼀些反⼈类的东西来做⼀下优化。
⼀、先⽤ mptoast 组件代替官⽅提供的 wx.showToast, wx.showToast 诸多不便我就不说了，关键是还有坑⼩程序基础库⽐较低的，不管你怎么设置，总是会在弹窗⾥⾯加⼀个钩钩，有时候我想弹出错误消息也是打钩，严重误导⽤户，字数上还有限制有带 icon 的不能超过 7 个字，你说说，你说说 7 个字够⼲嘛的，那我们来看看 mptoast，据mptoast 具有轻量，配置少，冗余少，使⽤简单，可定制性强等特点
我们开根据官⽅介绍，从 npm 引⼊并配置
npm i vuex
npm i mptoast -D
在项⽬的主配置⽂件（⼀般位于 src/main.js ）加⼊以下代码
import mpvueToastRegistry from 'mptoast/registry'
mpvueToastRegistry(Vue)
在你需要弹窗的页⾯，引⼊组件，并注册，然后在页⾯内加⼊⼀个你注册的组件，就可以在 js ⾥⾯调⽤ this.$mptoast()了，以下是⼀个简单的实例
<template>
<div>
<-- 省略其他代码 -->
<mptoast />
</div>
</template>
<script>
import mptoast from 'mptoast'
export default {
components: {
mptoast
},
data () {
return {}
},
methods: {
showToast () {
this.$mptoast('我是提⽰信息')
},
}
}
</script>
使⽤起来还是蛮简单的
⼆，⽤ promise 封装异步请求函数在⼩程序的环境下⾯，要想发送⼀个外部请求，我们只能使⽤⼩程序官⽅提供的 wx.request ⽅法，但是该⽅法的代码风跟跟 Jquery 年代的 Ajax ⼀样，都散靠回调来处理请求响应，如果有很多层回调，就会有很多层嵌套，这让我们这些平时被async-await 惯坏的⼈怎么接受？
所以，建完基本项⽬，我们要做的第⼀件事，就是⽤ wx.request ⾃⼰封装⼀个基于 promise 的异步请求⽅法。我们先来看⼀下 wx.request 的⼀个官⽅⽰例代码
url: 'test.php', //仅为⽰例，并⾮真实的接⼝地址
data: {
x: '' ,
y: ''
},
header: {
'content-type': 'application/json' // 默认值
},
success: function(res) {
console.log(res.data)
}
})
可以看到，每次请求都要发送⼀⼤堆的东西，重点少这些东西⾥⾯，很可能对于⼀个项⽬来说，绝⼤部分都是固定不变的，那这样，不是冗余了么。
tip: 更多 wx.request 参数，请参考
第⼆个参数是请求的参数，请求的参数应该是每次都不⼀样的，所以这个我们就不做修改（事实上实际应⽤中，经常有可能出现需要每个接⼝都带⼀个 token 的，我们也可以在这⾥统⼀加上去，不过这⾥就不做深⼊）
第三个参数是请求头，这个⼀般同⼀个项⽬⾥⾯，这些都是⼀样的，所以我们就写死。这⾥还有⼀个参数method请求⽅法，这⾥因为使⽤默认值 GET，所以就没列出，我们这边需要做设置，因为现在前后分离的模式，现在基本上⼤部分都是 POST 请求，所以我们这边也写死成 method:'POST'
最后⼀个就是处理请求结果回调函数，⽰例⾥⾯只有⼀个请求成功的回调，其实我们应该再加⼀个请求实例的处理函数，fail，⽽我们封装这个函数的重点，就是要⽤ promise 来处理这两个回调函数，使它们可以⽤ async-await 的语法
// 假设以下代码在 `/src/utils/requestMethod.js`
let serverPath = 'www.abc/api/'
export function post(url,body) {
return new Promise((resolve,reject) => {
url: serverPath + url    // 拼接完整的 url
data: body
method:'POST',
header: {
'content-type': 'application/json'
},
success(res) {
resolve(res.data)  // 把返回的数据传出去
},
fail(ret) {
reject(ret)  // 把错误信息传出去
}
})
})
}
有了这样的封装，我们就可以在其他地⽅引⼊上⾯这个⽂件，然后使⽤ post 函数请求
import {post} from '/src/utils/requestMethod.js'
// 需要注意的是，这⾏代码必须要在 async 修饰的函数⾥⾯才能正确调⽤
let res = await post('member/login',{name:myname})
如果你觉得每次都要 import 这个⽂件很⿇烦，那我们也可以把它挂在到 Vue(mpvue)的原型(prototype)上，我们打开/src/main.js⽂件，然后在⾥⾯加⼊以下代码
import {post} from '/src/utils/requestMethod.js'
Vue.prototype.$post = post
这样，我们就可以在 Vue(mpvue)的所有实例⾥⾯，直接使⽤ this.$post()来调⽤，只要⼀⾏代码，
// 这⾏代码同样需要在 async 修饰的函数⾥⾯才能正确调⽤
let res = await this.$post('member/login',{name:myname})
怎么样？是不是⽐原⽣的⽅便很多呢？
结束语
当然，跑起来以后，你可能还会遇到各种问题，这⾥我有对我⾃⼰遇到的问题做了⼀些总结，希望对你有帮助, 还有也是很不错的哦

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。