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>
上一篇: Ehcache的优缺点以及分布式详解
下一篇: maven 命令,不定期更新