美团小顺序框架mpvue(诨名：没朋侪)蹲坑指南
第一次打仗小顺序也许是17年终,当时小顺序方才内侧,当时就被种种限定折腾的死去活来的,单向绑定,
没有promise,要求数限定,包大小限定,种种反人类,…横竖我是以为到了满满的歹意.
近来接到一个工程类的小顺序项目,做手艺选型的时刻,又把之前的东西捡起来看了看,从新熟习了一下,
以为小顺序照样有在勤奋的,支撑大部分es6语法了,还出了一个类Vue的mvvm框架wepy,还支撑redux状况治理,
就大抵建了个demo,跑了起来,赶忙虽然没有vue那末酸爽,然则照样挺ok的,最少比原生的小顺序语法亲民许多.
然后就最先用wepy搭项目,写静态页面(由于公司的开辟形式是先写静态页面,
守候后端的同砚接口出来了再绑定数据),虽然wepy用起来比原生的随手,
然则照样有许多坑的,这里就不列举了…..
就在我们静态页面快写完的时刻,某天晚上论坛的时刻看到一条音讯, 美团出了个小顺序框架mpVue
（不知道为何，每次看到这个名字，我只想到3个字，没朋侪,哈哈）,
大抵看了一下官方的引见,主要有一下亮点:
- 跟vue一样的开辟体验,包含vuex
- H5代码转换编译成小顺序目的代码的才
也就是说,不只能够用我们熟习的vue语法开辟,另有能够直接把你的h5页面编译成小顺序.
该项目到如今位置，开源不到20天，已收到快要7000个star,可见世界苦秦已久。
建了个demo,跑了一下,以为几乎就是开辟界的良知之作啊.趁便把之前写的wepy的静态页面代码复制过来看了一下,
发明只需修正一点点,就可以够顺遂从wepy切换到mpvue上来(全部项目的切换时候在半天摆布).
说做就做,当天就切到mpvue.一向到如今项目靠近尾声了,全部开辟历程,真是使人愉悦.
Bug….我本日彷佛不是来给mpvue做广告的,我是来找茬的..
下面就清点一下我近来用mpvue开辟,遇到的一些须要须要注重的细节.(或许说跟vue差别的处所)
一, 这个个人以为是最大的坑,除了缺乏文件会报错外,其他的代码语法错误等,
控制台大部分时候都是平静的(偶然也会报一个xxx is undefined)
比较常常遇到的是如许 this.xxx =5 有些状况下会报错,而有些状况下则没有任何回响反映,
细致什么状况下会,什么状况下不会,我如今还没摸出规律来..
有一次我把
this.dataObject.map(() => { ...这里省略... })
结果map前面的 . 不小心给露掉了,现实代码变成
this.dataObjectmap(() => { ...这里省略... })
结果找了半天没找到题目的缘由
二, 这个也是比较难熬痛苦的处所,就是模板的数据绑定内里,没办法在模板语法内里挪用methods要领
(或许说没办法挪用computed之外的函数),有人或许会说,那能够用computed属性,那假如我想给函数传参怎么办?
看下面代码:
<template>
<view v-for="item in costList" >
{{formatCost(item)}}
</view>
</template>
<script>
export default {
data(){
return{
costList:[]
}
},
methods: {
formatCost(item){
return item.toFixed(2)
},
getData(){
let arr = [3.255,4.1,5,15]
this.costList = arr
}
}
</script>
这个时刻 {{formatCost(item)}}内里的内容,会衬着成空字符串,来由就是由于不支撑函数,而且这中状况,
也没法运用computed属性,除非你想为每一个数组元素写一个computed
这类状况,我的处理计划是在在获取到数据的时刻,就先把数据改了.如上面的例子,我们能够在 getData要领内里如许写
let arr = [3.255,4.1,5,15]
// 遍历数组内里的元素,然后格式化一下,增加到 costList里去
arr.map(item => {
this.costList.push = this.formatCost(item)
})
三, 统统页面内里的created性命周期函数 都邑在小顺序加载的时刻，
一次性实行，而不是每进入一个页面实行一次，如，我有3个页面
pageA
...省略一些代码...
creatted(){
console.log('pageA 的 created函数实行')
}
pageB
...省略一些代码...
creatted(){
console.log('pageB 的 created函数实行')
}
pageC
...省略一些代码...
creatted(){
console.log('pageC 的 created函数实行')
}
然后，启动小顺序，不进入这3个页面，假定我如今有一个index页面，我们翻开这个页面，会有一下输出
pageA 的 created函数实行
pageB 的 created函数实行
pageC 的 created函数实行
这个实在很好处理，用mounted或许onLoad或许onReady替代，说到这几个函数，那就趁便提一下,
这里的created和mounted是vue(mpvue)的性命周期，而onLoad、onReady是小顺序的性命周期，mpvue官方给的申明是：
除了 Vue 自身的性命周期外，mpvue 还兼容了小顺序性命周期，这部分性命周期钩子的来源于微信小顺序的
Page，
除特殊状况外，不发起运用小顺序的性命周期钩子。
然则官方给的性命周期图示内里，也表清楚明了，小顺序的onLoad、onReady比created、mounted实行的早，
也就是说假如我们在和onLoad onReady内里去要求数据的话，会相对的削减白屏时候（这里说的白屏是指数据未衬着的界面），
而且官方没申明为何不发起运用小顺序的性命周期，我们也尝试了，用小顺序的性命周期，没发明性命题目，
所以我们照样比较偏向优先运用小顺序的性命周期，毕竟用户体验才是霸道。
四、挂载在Vue.prototype上的属性，在模板语法内里是undefined，必需经由computed计算过一下才用。
在用vue的时刻，我喜好把图片的服务器途径存到vue的原型内里：
import config from './config'
Vue.prototype.$serverPath = config.serverPath
然后 我们在页面内里如许用
<img :src="$serverPath + 'logo.png'" />
如许 就可以够防止在每一个页面导入config文件，后期假如我们宣布正式版的时刻，只需在这边修正一下config设置文件就可以够了
然额，如许写在mpvue内里，现实衬着出来的会是
<image src="undefinedlogo.png" ></image>
要想在每一个页面内里运用，只能乖乖在每一个页面内里导入，或许在computed内里返回this.$serverPath
五、用 v-for轮回的时刻，假如要给当前项指定一个索引，在vue下，为了费事，我一般喜好如许做
v-for="item,index in list"
由于多打一对括号真的是很烦人。然则在mpvue下面却不可，你必需老老实实如许写，不然会报错。
v-for="(item,index) in list"
六、零丁为每一个页面的设置页面头部信息，有供应这个功用，不过文档不是很细致，几经尝试，才试出来。
我们的进口文件main.js（连续vue的叫法，临时这么称谓吧，实在我以为应当叫设置文件）内里能够如许设置，
官方文档也许也是这么说的
这部分内容来源于 app 和 page 的 entry 文件，一般习气是 main.js，你须要在你的进口文件中
export default { config: {} }，这才被我们的 loader 识别为这是一个设置，须要写成 json 文件。
import Vue from 'vue';
import App from './app';
const vueApp = new Vue(App);
vueApp.$mount();
// 这个是我们商定的分外的设置
export default {
// 这个字段下的数据会被填充到 app.json ／ page.json
config: {
pages: ['static/calendar/calendar', '^pages/list/list'], // Will be filled in webpack
window: { // 顶部栏的一致设置
backgroundTextStyle: 'light',
navigationBarBackgroundColor: '#455A73',
navigationBarTitleText: '美团汽车票',
navigationBarTextStyle: '#fff'
}
}
};
同时，这个时刻，我们会依据 entry 的页面数据，自动填充到 app.json 中的 pages 字段。
pages 字段也是能够自定义的，商定带有 ^ 标记开首的页面，会放到数组的最前面。
我们看到，能够在config.window下面设置全局的顶部栏款式，然则假如我们想为每一个页面指定一个款式呢？事实上，
以上要领只合适设置app.json内里的内容，假如你想要为你的每一个页面都增加一种款式，那末应当如许做：
在页面所属的进口文件（main.js）内里增加以下内容，比方我想为 userCenter/index页面设置一个题目，
应当在userCenter/main.js内里到场
export default {
config: {
navigationBarTitleText: '个人中间',
}
}
注重 这里跟上面谁人全局设置差别的是，设置内容navigationBarTitleText是config的属性，
而全局设置里，则是config.window的属性
七、组件的定名题目，有一次，我写了一个部分的组件，为何叫部分的组件呢，由于我只在某个页面内里运用，
所以为了简单化，我给这个组件取了个名字叫list.vue,然后在父组件援用：
<template>
<!-- 省略其他代码 -->
<list />
</template>
<script>
import list from './components/list'
export default {
components: {list},
// 省略其他代码
}
</script>
组件能一般显现，款式也没题目，统统看上去都是那末的一般，但是组件内里的逻辑就是不会实行。
加上本文第一点提到的，不会报错，让我一顿好找啊…
经由排查发明，跟组件的引入称号有关，应当是跟微信的症结字同名了。
<template>
<!-- 省略其他代码 -->
<listA />
</template>
<script>
import listA from './components/list'
export default {
components: {listA},
// 省略其他代码
}
</script>
如许就可以一般运转，出了list,我如今踩到的另有tabbar,搞得我如今定名的时刻，看到一些疑似症结的字眼，心思都有点暗影。。
这个应当是微信的题目吧，总之遇到了，就一块写出来。
八、组件第一次加载的时刻不能实行onShow内里的内容，只要在隐蔽又显现后，才会显现，而页面却每次进入都邑显现
比方我们在一个组件里有一下代码
onLoad () {
console.log('onLoad')
},
onShow () {
console.log('onShow')
},
mounted () {
console.log('mounted')
},
页面加载的时刻，我们希冀打印出来的是
onLoad
onShow
mounted
然后现实上，只打印出
onLoad
mounted
这个题目，我已给官方提Issue,不过如今还没获得回应
说到这里，我们趁便看看小顺序的页面跳转体式格局，小顺序在一个页面跳转（挪用wx.navigateTo）到另一个页面的时刻，
并不会烧毁本来的页面，而是转到背景去，而且实行原页面内里的onHide里的代码，
这也是为何小顺序的页面途径最多只能十层，由于你访问过的页面，一般都邑保留在内存里，相当于vue里的keep-alive，
假如许可跳转异常多页面的话，很轻易致使内存运用太高。
固然，我们也能够运用wx.navigateBack wx.redirectTo wx.reLaunch 来烧毁页面，这3个要领，会挪用页面的onUnload函数
九、canvas放在scroll-view不会跟着页面转动，看起来彷佛是fixed固定在某个位置的，然则在一般的view内里却能够一般转动。
这个题目现实上是微信的题目，官方文档内里是有申明这点，不过我碰见题目的时刻，没想到会是微信官方出的题目，种种百度谷歌，
都没找到这跟这个题目有关的，以至我很怀疑是我本身代码的题目，因而新建了一个项目，然后直接考官方的示例代码，也是一样的结果。
背面就预备摒弃，想其他处理计划了，没想到本日在官方文档 –scroll-view组件的引见的最底部的 小字 里看到了
tip: 请勿在 scroll-view 中运用 textarea、map、canvas、video 组件
进一步检察了canvas组件的文档，发明也有相似的提醒
tip: 请勿在 scroll-view、swiper、picker-view、movable-view 中运用 canvas 组件。
之所以把这一点也算进来，一是为这个题目坑了我好几天，我都在想其他计划了，二是这几天种种百度谷歌，
是有搜到几个相似的题目，然则都没人回复，我就在这边纪录一下，愿望背面踩到这个坑的童鞋能搜到。
十、统一个子组件,在2个差别的处所援用,会致使2个处所的款式都加载不了,而假如只在一个处所援用却没题目，
为何把这个题目放到末了？ 由于这只是前几个版本的脚手架有这个题目，背面的应当就没有这个题目了。
这个题目我也给官方提过Issue,官方给的回复是用新版本的脚手架从新天生项目，然则项目都快做完了，
这个时刻从新天生，然后拷贝代码，以为心太累了，所以抱着不折腾不罢休的立场，终究找到缘由，是由于初期版本的脚手架，
缺乏了 webpack-mpvue-asset-plugin 这个插件,新版的cli内里会自动增加这个插件。细致看Issue #180
另有一些官方明确指出的题目，这里就不一一列举了，有兴致的童鞋能够直接检察mpvue官方文档
别的，近来正在做一个mpvue的基础教程，有兴致的童鞋请前去我的
github mpvue-tutorials,
您的一个Star,就是我最大的动力了。
