mpvue新人会踩的坑

网上很多写mpvue的坑，有的我踩过了，有的还没来得及踩吧……·

但是踩过并且觉得新人经常会踩的就说下吧！！

1、新建页面

mpvue新建一个页面，

1）要重新npm run dev，这个没得说

2）要再app.json里面添加路径，也没的说

3）要注意的是，pages下面要新建一个文件夹，里面的vue文件和js文件名最好是不变的，都是index.vue和main.js因为在main.js里面要import App from './index/如果vue文件不是index.vue的话会报错的！！

image

2、mpvue用for循环必须要加key

<div class="icon" v-for="(item,index) of iconslist" :key="index"></div>

3、mpvue 中设置页面背景色：

要写个没有scoped的style，因为json里面"backgroundColor": "#eeeeee",不是页面背景色，是窗口·背景色，下拉刷新才能看到的！

<style>

  page {

    background-color: #f9f9f9;      //这个才是真正的我们想要的背景色！

  }

</style>

4、mpvue使用小程序的textarea怎样布局：

<div>

<textarea placeholder="请写下参加聚会的感受……（140字以内）"

          placeholder-style="" class="boxarea" v-model="commentdsc"></textarea>

</div>

设置外层divpadding是上下无，左右有，设置textarea的padding是上下有，左右无，否则会混乱！！！

div {

  padding: 0 10px;

  background:#fff;

  margin: 20px 0;

}

.boxarea {

  width: 100%;

  padding: 10px 0;

}

5、mpvue 小程序picker组件，时间选择怎样让开始日期在结束日期之前。结束日期不能选择在开始日期的前面：

设置开始日期得结束是结束日期的选值，设置结束日期的开始是开始日期的选值

<picker mode="time" :value="time1" :end="time2" @change="bindTimeChange1">

  <div class="picker pickerright">

    {{time1}}

  </div>

</picker>

picker mode="time" :value="time2" :start="time1" @change="bindTimeChange2">

  <div class="picker pickerright">

    {{time2}}

  </div>

</picker>

data{

  return{

time1: "00:00",      //初始值

time2: "23:59"

}

}

bindTimeChange1(e) {

  this.time1 = e.target.value;        //picker使用后，让value值发生改变，去更新绑定value的变量

},

bindDateChange1(e) {

  this.date1 = e.target.value;

}

6、mpvue巨大的坑，下面这些不能写作组件名，包含也不行！！：

image

否则会报一个奇怪的错！

a

canvas

cell

content

countdown

datepicker

div

element

embed

header

image

img

indicator

input

link

list

loading-indicator

loading

marquee

meta

refresh

richtext

script

scrollable

scroller

select

slider-neighbor

slider

slot

span

spinner

style

svg

switch

tabbar

tabheader

template

text

textarea

timepicker

trisition-group

trisition

video

view

web