前面简书同志分享的步骤和现阶段有些差异：本人现阶段学习的是v 2.0.0
文档：http://mpvue.com/mpvue/quickstart.html
mpvue是美团点评团队出品的小程序框架
传送门：https://www.jianshu.com/p/8f779950bfd9
WePY是由腾讯团队推出的小程序组件化开发框架
image.png
uni-app是一个使用vue.js开发所有前端应用的框架，开发者编写一套代码，可发布ios、android、H5以及各种小程序（微信、支付宝、百度、头条，钉钉、QQ）
传送门 https://uniapp.dcloud.io/
目录结构
类似于vue目录
- main.js+App.vue:这两个是入口文件，相当于原生小程序框架中的app.json和app.js的复合体
image.png
mian.js为入口文件
image.png
webpack需要修改的地方
传送门：http://mpvue.com/build/
小程序每个页面的配置和全局的配置有专门的json文件管理，全局的是app.json，每个页面时main.json
image.png
app.json文件
"pages":[
"pages/index/main" //路径为main.js，不是index.vue
]
main.js
import vue from 'vue'
import App from './index' //index.vue
const app=new vue(App)
app.$mount() //手动挂载
与vue的不同
跳转页面：
<a href="/pages/counter/main" class="counter">去往Vuex示例页面1</a>
新增页面（新建文件的时候）需要npm run dev 注意：新增文件必须重新启动，编译器不会自动检测新加入的文件
mpvue的局限性
1.在模板中，动态插入html的v-html指令不可用
可以使用<rich-text> wxParse(https://github.com/icindy/wxParse)来实现
2.在模板中，用于数据绑定的双括号{{}}中的表达式存在诸多限制
在vue本身模板内{{}}，我们可以对绑定变量进行比较丰富的处理，比如：
- 可以调用methods下的函数：例如：
<template>
<div>{{ formatMessage(msg) }}</div>
</template>
<script>
export default {
data() {
return {
msg: "Hello,World"
}
},
methods: {
formatMessage(str) {
return str.trim().split(',').join('#')
}
}
}
</script>
- vue中如果变量是对象的话，也可以调用对象的成员方法
<div>{{msg.trim().split(',').json('#')}}</div>
- vue中可以使用过滤器来处理变量，最有用的场景算是格式化数据了
<div>{{msg | format}}</div>
以上这些mpvue中都不可以使用，只能使用简单的运算（+ - * % ！ == ==== ：> < [] .）
复杂的运算的替换方法为计算属性computed
3.在模板中，除事件监听外，其余地方都不能调用methods下的函数
在vue中，模板里调用methods部分定义的函数是非常常见的，比如下面这段代码，在v-if指令中调用getErrorNum()
<div v-if="getErrorNum()>0 && code == 10001" class="error">{{errmsg}}</div>
可是在mpvue里，就是不可用的！ 因为小程序模板wxml里不支持这种函数调用，导致mpvue没有很好的方式转译过去。替代方法还是计算属性
4.在模板中，嵌套使用v-for，必须指定索引index
通常在vue模板中嵌套循环渲染数组的时候，一般是这个样子的
<template>
<ul v-for="category in categories">
<li v-for = product in categories.product>
{{product.name}}
</li>
</ul>
</template>
mpvue中
<template>
<ul v-for="(category ) in categories">
<li v-for = (product,proindex) in categories.product>
{{product.name}}
</li>
</ul>
</template>
5.事件处理中注意点
在mpvue中，一般可以使用web的DOM事件名来绑定事件，mpvue会将web事件名映射成对应的小程序事件名，对应列表如下：
//左侧为web事件，右侧为小程序事件
click : tap
touchstart : touchstart
touchmove : touchmove
touchcancel : touchcancel
touchend : touchend
tap : tap
longtap longtap
input input
change :change
submit : submit
blur : blur
focus : focus
reset : reset
confirm confirm
columnchange: columnchange
linechange :linechange
error: error
scrolltoupper : scrolltoupper
scrolltolower :scrolltolower
scroll : scroll
除了上面的的之外，web表单组件<input>/<textarea>的change事件会被转为blur事件，
keydown，keypress 键盘事件没有了，因为小程序没有键盘
vue事件修饰符
.prevent 可以直接干掉，因为小程序里没有默认事件，比如submit并不会跳转页面
.capture 支持1.0.9以后 事件捕获
含义：给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素，如果有多个该修饰符，则由外而内触发
.self 没有可以判断的标识
含义：只当事件在该元素本身（比如不是子元素）触发时触发，忽略事件冒泡和事件捕获的影响
7.对于表单，请直接使用小程序原生的表单组件
表单组件又多，又复杂，框架可能hold不住，所以在实际开发中，推荐使用小程序的表单组件标签来写，而不是使用web表单组件标签来写，当然了，在mpvue中使用了小程序的组件标签，数据绑定功能还是完全可以用的。示例:
<template>
<div>
<picker @change="handlePickerChange" :value="selectedIndex" :range="message">
<view class="picker">
当前消息：{{messages[selectedIndex]}}
</view>
</picker>
</div>
</template>
<script>
export default {
data(){
return {
selectedIndex:0,
message:['hello','word','haha']
}
},
methods:{
handlePickerChange (e) {
console.log(e)
}
}
}
</script>
其他注意事项：
在web vue开发中，通常使用vue-router来进行页面路由，但是在mpvue中使用<a>标签和小程序原生api wx.navigateTo等来做路由功能，还有请求后端数据，vue中使用的axios，mpvue中使用wx.request等来进行
网友评论