欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-05-23 10:20:28
...

废话不多说,直接上手。

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

准备:

  • 首先通过命令行创建项目:
npm install --global vue-cli
vue init mpvue/mpvue-quickstart my-project

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

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

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

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

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

查看官网的Q&A

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

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


mpVue底部导航条


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

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

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

简易效果图:mpvue自学记录(不定期更新)


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>

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

(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。 用法如上代码。在开发工具中完美展示。但是在真机中却不显示图片。原因是因为:mpvue自学记录(不定期更新)于是将代码最终修改为绝对路径从而解决问题

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