mpvue常见问题总结,看看你有没有遇到(一)

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



下一章(mpvue常见问题总结,看看你有没有遇到(二))

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

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

vue项目常用到的,不看看吗?

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,839评论 6 482
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,543评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 153,116评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,371评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,384评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,111评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,416评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,053评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,558评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,007评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,117评论 1 334
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,756评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,324评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,315评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,539评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,578评论 2 355
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,877评论 2 345

推荐阅读更多精彩内容