mpvue遇到的一些问题

1.页面配置后没有找到pages下对应的wxml文件

看看 dist 目录下有没有生成，没有的话删除dist文件然后npm run dev会自动生成dist文件

2.删除文件夹最好更新一下dist

然后npm run dev

3.vue中访问原始的DOM事件，使用$event

<button v-on:click="warn('Form cannot be submitted yet.', $event)">
  Submit
button>

// ...
methods: {
  warn: function (message, event) {
    // 现在我们可以访问原生事件对象
    if (event) event.preventDefault()
    alert(message)
  }
}

4.mpvue中input输入框输入触发事件

bindinput 是原生里的用法，mpvue 里用 @input
同理bindblur用@blur

5.page is not constructed because it is not found

npm run build 然后在npm start试试,文件建多了就会，还有我从配置到出现这个问题没npm run build过，以至于dist的文件夹里连以前删掉的文件都还存在

6.每次保存后自动刷新到首页

这是小程序的启动机制，一般开发哪个页面就先把它写到第一个，写完再放后面
在app.json中把当前编辑页放在pages下第一位，如：

"pages":[
    "pages/demo/demo",
    "pages/index/index"
  ],

每次保存刷新默认就是demo页了。

7.小程序设置open-data头像样式

常规的方法是设置border-radius：50%；
但是在微信小程序的头像上，还得加 overflow：hidden；
另外，还要注意父级容器为flex布局。

<view class="userinfo">
  <view class="userinfo-avatar">
    <open-data  type="userAvatarUrl">open-data>
  view>
    <open-data type="userNickName">open-data>
view>

.userinfo {
  position: relative;
  width: 750rpx;
  height: 320rpx;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.userinfo-avatar {
  overflow:hidden;
  display: block;
  width: 160rpx;
  height: 160rpx;
  margin: 20rpx;
  margin-top: 50rpx;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
}
.userinfo text {
  /* color: #fff; */
  font-size: 14px;
  background-color: #c0c0c0;
  border-radius:40%;

8.自定义微信小程序swiper轮播图面板指示点的样式

微信小程序的swiper组件是滑块视图容器，轮播图就可以用它来做，不过这个组件有很多样式是固定的
调试可以看到选择器



接下来操作一下个性化面板指示点

原始样式：

修改代码：

<div class="banner">
  <swiper
    class="swiper-box"
    :indicator-dots="indicatorDots"
    :autoplay="autoplay"
    :interval="interval"
    :duration="duration"
    :circular="circular"
  >
    <div v-for="item in imgUrls" :key="item">
      <swiper-item>
      <image :src="item" alt="" class="slide-image" mode="aspectFill" width="750" height="312">image>
      swiper-item>
    div>
  swiper>
div>

css

效果图：

9.mpvue用getCurrentPages一直报错

—eslint配置

10.cannot read property ‘dispatch’ of undefined in mpvue

用store.dispatch(‘fetchNewsInfo’),不要用this.$store