mpvue总结
在小程序中使用mpvue，有哪些需要注意的地方，我在这里记录一下
1.设置项目tabbar
在文件目录src——>app.json设置页面的tabbar，具体写法和小程序中的一样，值得注意的是这里tabbar的跳转路径，是每个页面中的main.js,而不是index.vue,一开始我也以为是index.vue，结果试了才知道是main.js，每个页面中都会有main.js，tabbar跳转的路径就写“pages/index/main”
2.引入第三方组件
比如iview组件，首先去github上下载第三方组件(https://github.com/iview/iview)，下载成功之后可以看里面有一个dist文件夹，把它复制到项目的static文件夹里面，然后在你要使用的页面的json页面中引入
"usingComponents": {
"i-button": "../../static/dist/button/index"
}
3.修改第三方组件的样式
在小程序的官方文档中指出，在小程序中引入的组件，是不可以修改它的css样式的，但是在项目中引入的组件，我们一定需要修改它原来的css,这个时候该怎么办呢？自定义组件时会之定义个外部类，通过这个外部类来修改样式。
通过第三方组件提供的externalClasses: ['i-class']来自定义你要写的css<i-button i-class="view-btn">默认按钮</i-button>
注意：这里的i-class就是自定义的class名称，可以覆盖iview里面自带的样式，我试过了很多方法，只有这个行，百度很多方法都是错的
4.设置全局变量
a.新建一个组件compontent，在里面定义项目中用到的全局变量，然后使用export default 导出来
const userInfo = ""; //用户信息
const localImg = "../../static/images/";
export default {
userInfo,
localImg
};
b.接着在整个项目的main.js中引入这个组件，并绑定到vue的原型上
import global from './components/Global'; //全局变量
Vue.prototype.GLOBAL = global; //绑定到vue原型上
c.使用
在你需要的地方使用this.GLOBAL .userInfoj即可
5.在项目中使用less
a.使用npm下载
npm install less less-loader --save
b.修改build文件下面的webpack.base.conf.js文件，配置loader加载依赖，让其支持外部的less,在原来的代码上添加
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader",
}，
c.在你的页面中加入lang='less'
<style lang="less" scoped>
</style>
6.新增页面需要npm run build
因为 webpack 编译的文件是由配置的 entry 决定的，新增的页面并没有添加进 entry，所以需要手动 npm run dev 一下，考虑不是高频操作，所以还可以忍受
7.页面跳转以及参数传递
mpvue中不支持路由跳转
解决办法:
a.小程序的api进行跳转
wx.navigateTo({
url:"http://www.baidu.com?openid=121212'
})
b.小程序中从一个页面跳到另一个页面
let url="../log/main";
wx.navigateTo({ url })
注意 .这里页面路径不要加上后缀.js，直接写main就可以
c.使用a标签进行跳转
<a href = "http://www.baidu.com"/>
参数：url地址后面拼接的参数在页面的onLoad中的options中获取
8.数组遍历中出现should hava explicit keys 错误
<div v-for="(value,index) in imglise" :key="index">
在数组的遍历中，一定要加上：key,不然会一直报错，很慢的
9.对象上添加新属性
方法a:
Vue.set(obj, 'newProp', 123)
obj：你所要改变的那个对象
‘newProp’:你要添加的新属性
‘123’：你添加的属性值
方法b:
let {x，y，... z} = {x ：1，y ：2，a ：3，b ：4 };
10.引入自定义组件
a. 把项目中一些公共的样式抽取出来，写在Component目录中
b. 在你要使用的页面上引入
"@/ Components/card" 前面的@写法会自动追寻到项目的根目录去查找
引入之后，记得在components中注册一下，不然也是不会起作用的，这一步很多人会忘了
c. 接着就可以在你的页面中引入了
具体传参到组件可以去看看文档
11.父组件给子组建传值
a. 在父组件的data中定义你要传过去的值，（当然并不是非要在data中定义啊，只是项目中一般都会这么做）
b. 在父组件上自定义一个名称，然后值放在后面传过去
c. 在子组件的props中接受传过来的值
d. 在子组件的页面上渲染你传过来的值
12.子组件给父组件传值
a. 先在子组件中定义事件，当触发这个事件后才开始传值
b. 当触发子组件中的事件后，使用$emit把传递事件名称和值给父组件，事件名称是自定义的
c. 父组件在页面子组件的模板上定义事件，名称是子组件传过来的名字
d. 获取子组件传递的值
13.绑定class,style样式（三元表表达式写法，经常会用到）
在项目中经常会遇到如图1，点击tab栏，当前点击的颜色其他的不变色，就免不了使用三元表达式写法
这里的index,currIndex都是变量，通过判断他们两个是否相等，来决定tab栏的哪一项变色
14.获取textarea中的值
vue必须借助事件的 event 对象 的 currentTarget 才能获取事件对象
a. 第一步
<textarea cols="30" rows="10" :value="nowDay" @input="getChange($event)" class="view-area"></textarea>
注：必须在事件中传递$event
b. 第二步
getChange(e){
console.log(e)
}
**打印e,可以获取到你动要的值
15.在mpvue中引入字体图标iconfont
a. 先去iconfont官网下载你要的字体图标 http://www.iconfont.cn/
注意必须留如下图1的四个文件，其他的都可以删除，如果你只留下iconfont.css文件，其他的都删除，就会报错，然后把这个文件夹放到项目的static文件夹里面
b. 在项目的根目录里面里面有个App.vue,这个App.vue是全局的，也就是App.vue页面的style里面引入iconfont,，在页面的任何位置都可以直接使用
16.用npm下载的插件，和自己封装的插件，如何引用到自己的项目中？
a. 如果是自己封装的插件，比如说自己封装的网络请http.js
在项目的根目录下的main.js中引入，具体如图一所示
注意：
(1)使用的是相对路径
(2)要绑定到vue的原生上面
因为这是全局的main.js，所以你可以直接在你要用的页面使用this.axios就可以获取到
b. 如果使用npm下载的插件,在项目的根目录下的main.js中直接引入，引入路径 如图二所示
注意：
(1)无需相对路径或绝对路径，直接写插件名字即可
(2)调用的方法同其上
如果你只想某个页面需要使用那个插件，就无需引入到全局，只需在当前页面引入即可，如下所示
important moment from 'moment'; //引入使用npm下载的
important http from '../utils/http' //引入自己封装的文件
17.mpvue中的created不是按需加载，而是一次性把所有页面的created都加载
最近发现一个棘手的问题,就是created
在vue中，created是按需加载，当我们进入某个页面，才会加载当前的created
在mpvue中，所有页面的created都是在页面渲染的一开始都一起加载出来
解决方法:使用mounted生命周期
弊端：小程序生命周期的onLoad，用户进入B页面，会触发onLoad,然后返回A页面，再进入B页面，不会触发onLoad
而mounted是用户每次进入页面， 都会执行，无论是否点击返回，反正各有利弊吧！！！