美团小程序框架mpvue(花名：没朋友)蹲坑指南
第一次接触小程序大概是17年初,当时小程序刚刚内侧,当时就被各类限制折腾的死去活来的,单向绑定, 没有promise,请求数限制,包大小限制,各类反人类,...反正我是感觉到了满满的恶意. 最近接到一个工程类的小程序项目,作技术选型的时候,又把之前的东西捡起来看了看,从新熟悉了一下, 感受小程序仍是有在努力的,支持大部分es6语法了,还出了一个类Vue的mvvm框架wepy,还支持redux状态管理, 就大体建了个demo,跑了起来,赶忙虽然没有vue那么酸爽,可是仍是挺ok的,至少比原生的小程序语法亲民不少.vue
而后就开始用wepy搭项目,写静态页面(因为公司的开发模式是先写静态页面, 等待后端的同窗接口出来了再绑定数据),虽然wepy用起来比原生的顺手, 可是仍是有不少坑的,这里就不列举了.....webpack
就在咱们静态页面快写完的时候,某天晚上论坛的时候看到一条消息, 美团出了个小程序框架mpVue （不知道为何，每次看到这个名字，我只想到3个字，没朋友,哈哈）, 大体看了一下官方的介绍,主要有一下亮点:git
- 跟vue同样的开发体验,包括vuex
- H5代码转换编译成小程序目标代码的能力
也就是说,不但能够用咱们熟悉的vue语法开发,还有可能直接把你的h5页面编译成小程序. 该项目到目前位置，开源不到20天，已经收到将近7000个star,可见天下苦秦已久。es6
建了个demo,跑了一下,感受简直就是开发界的良心之做啊.顺便把以前写的wepy的静态页面代码复制过来看了一下, 发现只要改动一点点,就能够顺利从wepy切换到mpvue上来(整个项目的切换时间在半天左右). 说作就作,当天就切到mpvue.一直到如今项目接近尾声了,整个开发过程,真是使人愉悦.github
Bug....我今天好像不是来给mpvue作广告的,我是来找茬的..web
下面就盘点一下我最近用mpvue开发,遇到的一些须要须要注意的细节.(或者说跟vue不一样的地方)vuex
一, 这个我的感受是最大的坑,除了缺乏文件会报错外,其余的代码语法错误等, 控制台大部分时间都是安静的(偶尔也会报一个xxx is undefined) 比较常常碰到的是这样 this.xxx =5 有些状况下会报错,而有些状况下则没有任何反应, 具体什么状况下会,什么状况下不会,我如今还没摸出规律来..json
有一次我把redux
this.dataObject.map(() => { ...这里省略... })
结果map前面的 . 不当心给露掉了,实际代码变成canvas
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里面去请求数据的话，会相对的减小白屏时间（这里说的白屏是指数据未渲染的界面）， 并且官方没说明为何不建议使用小程序的生命周期，咱们也尝试了，用小程序的生命周期，没发现生命问题， 因此咱们仍是比较倾向优先使用小程序的生命周期，毕竟用户体验才是王道。
4、挂载在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
5、用 v-for循环的时候，若是要给当前项指定一个索引，在vue下，为了省事，我一般喜欢这样作
v-for="item,index in list"
由于多打一对括号真的是很烦人。可是在mpvue下面却不行，你必须老老实实这样写，不然会报错。
v-for="(item,index) in list"
6、单独为每一个页面的设置页面头部信息，有提供这个功能，不过文档不是很详细，几经尝试，才试出来。
咱们的入口文件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的属性
7、组件的命名问题，有一次，我写了一个局部的组件，为何叫局部的组件呢，由于我只在某个页面里面使用， 因此为了简单化，我给这个组件取了个名字叫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,搞得我如今命名的时候，看到一些疑似关键的字眼，心理都有点阴影。。 这个应该是微信的问题吧，总之遇到了，就一块写出来。
8、组件第一次加载的时候不能执行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函数
9、canvas放在scroll-view不会随着页面滚动，看起来好像是fixed固定在某个位置的，可是在普通的view里面却能够正常滚动。 这个问题实际上是微信的问题，官方文档里面是有说明这点，不过我碰见问题的时候，没想到会是微信官方出的问题，各类百度谷歌， 都没找到这跟这个问题有关的，甚至我很怀疑是我本身代码的问题，因而新建了一个项目，而后直接考官方的示例代码，也是同样的效果。 后面就准备放弃，想其余解决方案了，没想到今天在官方文档 -scroll-view组件的介绍的最底部的 小字 里看到了
tip: 请勿在 scroll-view 中使用 textarea、map、canvas、video 组件
进一步查看了canvas组件的文档，发现也有相似的提示
tip: 请勿在 scroll-view、swiper、picker-view、movable-view 中使用 canvas 组件。
之因此把这一点也算进来，一是为这个问题坑了我好几天，我都在想其余方案了，二是这几天各类百度谷歌， 是有搜到几个相似的问题，可是都没人回答，我就在这边记录一下，但愿后面踩到这个坑的童鞋能搜到。
10、同一个子组件,在2个不一样的地方引用,会致使2个地方的样式都加载不了,而若是只在一个地方引用却没问题， 为何把这个问题放到最后？ 由于这只是前几个版本的脚手架有这个问题，后面的应该就没有这个问题了。 这个问题我也给官方提过Issue,官方给的回答是用新版本的脚手架从新生成项目，可是项目都快作完了， 这个时候从新生成，而后拷贝代码，感受心太累了，因此抱着不折腾不罢休的态度，终于找到缘由，是由于早期版本的脚手架， 缺乏了 webpack-mpvue-asset-plugin 这个插件,新版的cli里面会自动添加这个插件。具体看Issue #180
还有一些官方明确指出的问题，这里就不一一列举了，有兴趣的童鞋能够直接查看mpvue官方文档
另外，最近正在作一个mpvue的基础教程，有兴趣的童鞋请前往个人 github mpvue-tutorials, 您的一个Star,就是我最大的动力了。