mpvue自学记录(不定期更新)

废话不多说，直接上手。

mpvue继承自vue.js，技术规范和语法特点与vue保持一致。该博客是建立在已经使用过vue-cli的基础上，且默认已经了解微信小程序的基本知识。（比如标签，内置组件等）

准备：

• 首先通过命令行创建项目：

npm install --global vue-cli

vue init mpvue/mpvue-quickstart my-project

接下来的步骤和vuecli一样，最终执行 npm run dev 运行起来就好了。

此时不能通过端口号在浏览器中访问，需要在微信开发工具中小程序模式打开，如图：

选择项目目录为我们刚刚创建的项目，appid可不填写，如果有可以填写上，开发过程中可以通过手机预览查看效果。项目名称自定义。

官网提供的5分钟简单上手直通车。

查看官网的Q&A

QA直通车，个人建议，先了解一下一些常见问题，比如新增页面后没有反应，需要重启npm run dev。

---------------------------------------------------------分割线---------------------------------------------------------

mpVue底部导航条

1、按照默认配置，按照微信小程序写法直接设置底部导航条

        首先我们查看创建的目录列表，找到src下的mian.js，如下图：

简易效果图：

2、自定义底部导航条：

        思路：假设有a,b,c,d四个页面作为底部导航条，那么这个导航条就是公用的部分，设置为一个公用组件，在每个页面引入，并固定定位到底部，通过点击事件进行跳转。这里不建议使用a标签直接跳转页面，因为我们要在跳转时做判断。

    （1）、创建四个页面，用于底部导航，然后重启npm run dev。不然无法跳转页面。

    （2）、创建一个公用组件nav；

    

<template>
  <div class="nav">
    <div v-for="(l,i) in data" :key="i">
      <a  class="nav_list" :class=" {active:l.active}" @click='clickTo(l.path)'>
          <p>
            <i class="icon iconfont icon-daohangshouye"></i>
          </p>
          <P>{{l.name}}</P>
      </a>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    data: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      // 是否是当前页  如果是那么点击tabbar不跳转
      isNowPath: false
    }
  },
  mounted () {
    // console.log(this.data)
  },
  methods: {
    clickTo (e) {
      console.log(this.$root.$mp)
      var pages = getCurrentPages()
      var currentPage = pages[pages.length - 1]
      var urlP = currentPage.route
      console.log(urlP)
      // var nowUrl = this.$root.$mp.appOptions.path
      console.log(e)
      if (this.comparePath(urlP, e)) {
      } else {
        wx.navigateTo({ url: e })
      }
    },
    // 比较当前页和点击跳转的页面是否为同一个
    comparePath (old, n) {
      // n.substr(1) 截取掉n的第一位/ 用于判断old路径
      if (old === n.substr(1)) {
        return true
      } else {
        return false
      }
    }
  }
}
</script>
<style scoped lang="scss">
$background_color: #1989df;
$font_color: #fff;
.nav {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 50px;
  background-color: $background_color;
  text-align: center;
  .active {
    color: red !important;
  }
  .nav_list {
    color: $font_color;
  }
  .icon {
    font-size: 40rpx;
  }
  .nav_list {
    width: 25%;
    height: 100%;
    float: left;
  }
}
</style>

    （3）、以index页面为例，需要引入nav组件，但是注意我们组件名命名的是nav，引入的时候尽量避免直接使用nav，具体代码如下：

<template>
  <div class="container">

    <a href="/pages/counter/main" class="counter">去往Vuex示例页面</a>
    <a href="/pages/shop/main" class="counter">去往shop页面</a>    
    <a href="/pages/mine/main" class="counter">去往mine页面</a>
    <Nav-tab :data='navData'></Nav-tab>
  </div>
</template>

<script>
// 引入组件需要注意：避免使用header  nav 等语义化标签作为组件名
import card from '@/components/card'
import NavTab from '@/components/nav'
export default {
  data () {
    return {
      motto: 'Hello World',
      navData: []
    }
  },

  components: {
    card,
    NavTab
  },

  methods: {
    bindViewTap () {
      const url = '../logs/main'
      wx.navigateTo({ url })
    }
  },

  created () {
    // 调用应用实例的方法获取全局数据
    this.navData = [
      {
        name: '首页',
        path: '/pages/index/main',
        active: true
      },
      {
        name: '购物车',
        path: '/pages/shop/main',
        active: false
      },
      {
        name: '发布',
        path: '/pages/counter/main',
        active: false
      },
      {
        name: '我的',
        path: '/pages/mine/main',
        active: false
      }
    ]
  }
}
</script>

<style scoped lang='scss'>
$base_color: #1989df;
.usermotto {
  margin-top: 150px;
}

.form-control {
  display: block;
  padding: 0 12px;
  margin-bottom: 5px;
  border: 1px solid $base_color;
}

.counter {
  display: inline-block;
  margin: 10px auto;
  padding: 5px 10px;
  color: blue;
  border: 1px solid blue;
}
</style>

（4）备注：点跳转必须判断是否是同一页，不然会出现点击同一页的时候出现跳转动画。具体的判断上面代码已经复现。另外由于微信小程序规定页面层级不能超过10层，因此，点击跳转只能跳转9次。后续只有返回后才能进行跳转，这不是bug。

--------------------------------------------------------------------------------------------------------------

mpvue引入原生map组件（主要记录cover-view 的用法）

    直接复制微信小程序官网代码。将语法改为vue写法。代码如下：

<map id="map" 
    :longitude="longitude" 
    :latitude="latitude" 
    scale="11"
    :markers="markers" 
    @markertap="markertap"
    style="width: 100%; height: 500rpx;">
    <cover-view class="control">
        <cover-image @click="getHere()" class="img" style="width:60rpx;height:60rpx" src="../../static/img/here.png"/>
    </cover-view>
</map>

为了在地图上显示控件，可以直接使用controls 定义几个控件数据，但是即将弃用，因此改为cover-view。 用法如上代码。在开发工具中完美展示。但是在真机中却不显示图片。原因是因为：于是将代码最终修改为绝对路径从而解决问题

<cover-view class="control">
        <cover-image @click="getHere()" class="img" style="width:60rpx;height:60rpx" src="../../static/img/here.png"/>
</cover-view>