mpvue基本使用
## 什么是mpvue ##
- 美团开发使用vue语法开发小程序的前端框架
- 适用于vue语法开发
- 会调用部分小程序API
## 创建mpvue项目 ##
1. 必须安装node.js
2. 安装vue脚手架npm install -g vue-cli
3. 创建项目，找到项目目录运行:vue init mpvue/mpvue-quickstart mympvue01
4. cd到项目目录安装依赖modules: cnpm i
5. 在项目下运行npm run dev就可以将项目转化为小程序项目，自动生成一个小程序目录格式的dist文件夹
## 关联微信开发工具 ##
设置微信开发工具打开mympvue01,由于配置文件已经配置好了上传dist目录，所以在微信开发工具中上传代码只会上传dist目录
## mpvue目录解析 ##
#### src目录解析 ####
- component、pages、utils、目录与小程序中意义相同
- tips:小程序utils目录用于存放公共的方法，每个page都能调用
- App.vue，等同于小程序app.js和app.wxss
- main.js,相当于app.json
#### pages/index目录解析 ####
- index.vue 对应微信目录下index.js、index.wxml、index.wxss
- main.js 固定写法,类似配置
#### 创建一个page目录 ####
1. 在src目录下创建user目录
2. 在user目录下创建index.vue文件
3. 在user目录下创建main.js配置文件
4. 在src/main.js文件中配置pages路径
#### 项目appid配置 ####
-project.config.json 配置项目的appid等信息
### tips:index.vue文件必须增加export暴露数据不然打包会卡主###
<template>
<div>{{msg}}</div>
</template>
<script>
export default{
data(){
return{msg:'这是一个组件'}
}
}
</script>
## 配置底部tab切换，引入图片，请求数据 ##
#### 在pages/index.vue中引用图片 ####
先在static目录下创建images目录存放图片
<img src="../../../static/images/icon.png"/>
#### 在main.js中配置bar ####
{
“pages”:[ //配置目录信息
“pages/index/main”,
“^pages/logs/main” //^表示显示此路径为首页
],
“window”:{ //窗口样式
“backgroundTextStyle”:”Light”,
“navigationBackgroundColor:”#fff”,
“navigationBarTitleText”:”WeChat”,
“navigationBarTextStyle”:”black”
},
"tabBar": { //底部菜单栏配置
“color”:”#333”, //字体颜色
"list": [{
"pagePath": "pages/index/main",
“iconPath”:"static/images/icon.png",
"text": "首页"
}, {
pagePath": "pages/logs/logs",
"text": "日志",
}]
},
}
#### 请求数据 ####
使用wx.request,微信小程序的api请求数据，请求接口必须为https，如果不为https可以在微信开发者工具中点击详情设置
#### 页面跳转 ####
使用wx.navigateTo(url),微信API跳转
#### 获取其他页面url传递过来的参数 ####
onLoad：function (options){ //与小程序一致
console.log(options)
}
#### 解析html ####
1.直接使用vue的语法，v-html解析即可，但是会存在标签解析错误
2.使用mpvue-wxparse解析html
//引用wxparse
<wxParse :content="list.xxx"/> //引入显示组件
<script>
import wxParse from 'mpvue-wxparse'
export default{
data(){
return{list:[]}
},
components:{ //注册组件
wxParse
}
}
</script>
<style> //引入css样式
@import url("~mpvue-wxparse/src/wxParse.css")
</style>
3.使用过程中若本地图片真机未能显示，需要将图片地址换成https访问即可
## 使用小程序原生组件 ##
小程序原生组件中的事件需要使用vue语法编写：以scroll-view为例
//原生写法
<scroll-view bindscrolltolower="lower"></scroll-view>
//mpvue写法
<scroll-view @scrolltolower="lower"></scroll-view>
//绑定事件的获值由原生的event.detail 变为event.mp.detail
## 页面间参数传递 ##
- 通过 this.$root.$mp.query 进行获取小程序在 page onLoad 时候传递的 options
- 通过 this.$root.$mp.appOptions 进行获取小程序在 app onLaunch/onShow 时候传递的 options
- 使用 this.$root.$mp.query 获取参数需要在mounted中获取，在created中会报Cannot read property 'query' of undefined
