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-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’

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.使用标签进行跳转

参数：url地址后面拼接的参数在页面的onLoad中的options中获取

8.数组遍历中出现should hava explicit keys 错误

在数组的遍历中，一定要加上：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.在子组件的页面上渲染你传过来的值

下一章（mpvue常见问题总结，看看你有没有遇到（二））

小程序反编译教程，可以直接获取到任何小程序的源码哦

使用promise封装小程序网络请求，很全哦

vue项目常用到的，不看看吗？