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

柔光的暖阳◎ 2022-05-20 23:48 219阅读 0赞

废话不多说，直接上手。

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

# 准备： #

###  ###

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

npm install --global vue-cli

vue init mpvue/mpvue-quickstart my-project

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

![70][]

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

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

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

### 查看官网的Q&A ###

###  ###

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

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

## mpVue底部导航条    ##

####     ####

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

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

![70 2][]

简易效果图：![70 3][]

#### 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>

![70 4][]

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

\--------------------------------------------------------------------------------------------------------------

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

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

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

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

[70]: /images/20220521/1b2ec846bac04386a8a655af7fbff8cc.png
[70 1]: /images/20220521/ec869aca10c24b2da6def9472cd44120.png
[Link 1]: http://mpvue.com/mpvue/quickstart/
[QA]: http://mpvue.com/qa/
[70 2]: /images/20220521/8c5af15816d64122b4a4a0a7a31ff470.png
[70 3]: /images/20220521/915fdb1da5d84d238e9ed465eb2a14f9.png
[70 4]: /images/20220521/50032fc5126248e0815a8ed112b81834.png
[70 5]: /images/20220521/dcdb7b311d454a599cb7b2a7c0b879e3.png