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.在子组件的页面上渲染你传过来的值