最近幫別人在做一個小程序,因爲官方的支持不夠好,組件庫也不夠多,所以就沒有使用官方的操作。網上查找了一番，覺得mpvue還不錯（之前也沒玩過），索性拿來用吧！
01 前言
小程序的做法也是比較簡單的，假如你是老手的話基本上開箱即用，但是奈何自己技術不夠，那就手把手教你踩坑吧。
之前也做過幾個小程序，我用過官方的、uni-app開發，效果還行。然後現在是想嘗試一下mpvue，生態還可以，組件庫也多。拿到設計圖的時候覺得還可以，但是一看好像還是有點東西的。
02 自定義tabbar
我看到了頁面是有一個自定義tabbar的，自己之前沒有做做過這種，都是直接在app.json文件裏面配置的，簡單高效不帶坑。雖然說官方支持自定義tabbar的功能，但是我和官方的意思就不是同一個頻道的。這是我拿到的原型圖：
一開始好像是有點蒙，但是谷歌了一下其實還有救。思想就是把原生的tabbar隱藏，然後把你自定義的tabbar放上去即可。
- 在app.json配置tabbar，因爲後面要跳轉（不配置報錯）
- 新建一個mytabbar.vue文件，寫自己的tabbar
- 在app.vue的onShow的時候隱藏原生的tabbar,
wx.hideTabBar();
這樣其實就好了，但是需要tabbar的頁面都要引入自己的組件，talk is cheap，接下來就開始實現自己的組件吧。
自定義組件
模板部分
<template>
<section class="tabBar-wrap">
<article class="tabBar-box">
<ul class="tabBar-nav" v-if="navList.length > 0">
<li
class="item"
v-for="(item, index) in navList"
@click="selectNavItem(index,item.pagePath)"
:key="index"
>
<p class="item-images">
<img
:src="selectNavIndex === index ? item.selectedIconPath : item.iconPath"
alt="iconPath"
/>
</p>
<p
:class="selectNavIndex === index ? 'item-text item-text-active' : 'item-text' "
>{{item.text}}</p>
</li>
<li v-if="needButton" style="flex: 2">
<div class="submit-box">
<button
v-if="btnText==='抽大禮'"
:disabled="!handButton"
@click="bindNavigateTo('../game/main')"
:class="handButton ? 'submit-box-btn submit-box-btn-active' : 'submit-box-btn' "
>{{ btnText }}</button>
</div>
</li>
</ul>
</article>
</section>
</template>
邏輯部分
<script>
export default {
props: ["selectNavIndex", "needButton", "handButton", "btnText"],
data() {
return {
navList: [
{
pagePath: "../index/main",
iconPath: "../../static/tabs/home.png",
selectedIconPath: "../../static/tabs/home-active.png",
text: "首頁"
},
{
pagePath: "../share/main",
iconPath: "../../static/tabs/home.png",
selectedIconPath: "../../static/tabs/home-active.png",
text: "分享"
},
{
pagePath: "../center/main",
iconPath: "../../static/tabs/home.png",
selectedIconPath: "../../static/tabs/home-active.png",
text: "我的"
}
]
};
},
methods: {
selectNavItem(index, pagePath) {
if (index === this.selectNavIndex) {
return false;
}
this.bindViewTap(pagePath);
},
bindNavigateTo(url) {//不是tabbar的頁面跳轉方式
wx.navigateTo({
url
});
},
bindViewTap(url) {//tabbar頁面的跳轉方式
wx.switchTab({
url
});
}
}
};
</script>
樣式部分
.tabBar-box {
position: fixed;
bottom: 0;
width: 100%;
height: 50px;
padding: 10rpx 0;
border-top: 1px solid #eee;
background-color: #eb8c2b;
}
.tabBar-nav {
width: 100%;
display: flex;
justify-content: center;
align-items: baseline;
}
.item {
flex: 1;
text-align: center;
}
.item-text {
color: #666;
font-size: 14px;
font-weight: bold;
transition: 0.24s linear;
}
.item-text-active {
color: #fec754;
}
.item-images {
margin: 0 auto;
text-align: center;
transition: 0.24s linear;
}
img {
width: 60rpx;
height: 60rpx;
}
.submit-box-btn {
position: relative;
z-index: 999;
width: 70%;
height: 80rpx;
line-height: 80rpx;
border-radius: 50rpx;
color: #404040;
font-size: 20px;
font-weight: bold;
border: none;
background-color: #eee;
text-align: center;
border: 1px solid #eee;
}
.submit-box-btn-active {
color: #fff;
border: none;
border: 1px solid #fca542;
background-color: #fca542;
}
button {
border: none;
outline: none;
}
使用方式
使用方式也很簡單，直接把它引入進來，然後註冊一下就可以了。
import mytabbar from "@/components/mytabbar";
components: {
mytabbar
},
在你的頁面裏面放上組件：
<mytabbar
:needButton="needButton"
:btnText="btnText"
:handButton="handButton"
:selectNavIndex="selectNavIndex"
></mytabbar>
- needButton:是否需要一個button，就像我這裏就需要了
- btnText：button裏面的文字顯示，因爲可能另一個頁面顯示不一樣
- handButton：點擊button的邏輯
- selectNavIndex：需要高亮的下標，每個頁面的高亮不一樣
03 組合使用Vant
自己造輪子很麻煩，就用別人的組件庫好了。看了一下Vant還不錯，而且別人也嘗試過使用vant+mpvue的開發模式，坑還是自己踩一邊的好。
首先我遇到的第一個問題就是如何引入組件庫，雖然官方的做法是直接安裝，但是我安裝之後發現老是找不到路徑，沒辦法只好放棄。我現在採用的是直接引入本地的方式進行，雖然每一次編譯都要一點時間，但是還好。以後上線的時候把沒用的組件刪除就好，保留你需要使用的組件（按需引入）
下載整個倉庫之後把裏面的dist文件夾下面的所有文件複製到你的項目，static/vant當中，以後使用就從這裏引入好了，使用的時候還是在app.json裏面配置(與pages同級)：
"usingComponents": {
"van-button": "/static/vant/button/index",
"van-tab": "/static/vant/tab/index",
"van-tabs": "/static/vant/tabs/index",
"van-nav-bar": "/static/vant/nav-bar/index",
"van-icon": "/static/vant/icon/index",
"van-row": "/static/vant/row/index",
"van-col": "/static/vant/col/index",
"van-dialog": "/static/vant/dialog/index",
"van-field": "/static/vant/field/index",
"van-area": "/static/vant/area/index",
"van-popup": "/static/vant/popup/index",
"van-picker": "/static/vant/picker/index"
},
這樣其實就可以了，寫頁面的時候直接按照它的文檔寫就好了。
04 遇到的小坑
自定義NavBar
因爲UI圖上面的導航有自定義的樣式，沒辦法只好使用vant的van-nav-bar，但是我使用slot的時候發現左邊的圖標點擊不了。
文檔上面是使用bind:click-left的方式，但是沒用，其實正確的寫法應該是：
<van-nav-bar title="我的">
<van-icon name="wap-home" slot="left" @click="toHome"/>
</van-nav-bar>
圖片背景
使用圖片背景的時候，發現報錯說不可以引用本地的圖片，使用base64或者網絡圖片。但是我使用網絡圖片發現報了403錯誤，沒有權限。索性就使用了base64的方式。雖然不太接受這種方式，因爲轉出來的字符串很長。
獲取定位
首頁需要有一個獲取定位的功能。但是看了一下小程序的官方文檔只能獲取到經緯度。這裏我就使用了第三方的接口，去騰訊位置服務平臺註冊一下，可以使用經緯度逆向解析地址的功能。
然後裏面有一個逆地址解析的功能，使用經緯度作爲參數就可以獲取了。但是開始你要去app.json配置：
//在app.json中配置權限
"permission": {
"scope.userLocation": {
"desc": "您的位置信息將用於搜索銀行信息,以幫助您填寫正確的支行信息"
}
},
實例代碼：
wx.getLocation({
type: "wgs84", // 默認爲 wgs84 返回 gps 座標，gcj02 返回可用於 wx.openLocation 的座標
success: function(res) {
console.log("定位成功",res);
var locationString = res.latitude + "," + res.longitude;
wx.request({
url: "http://apis.map.qq.com/ws/geocoder/v1/?l&get_poi=1",
data: {
key: "xxxxx-xxxxx-xxxxx-xxxx-xxxxx-xxxxx",//你自己的key,頁面上有
location: locationString
},
method: "GET",
success: function(res) {
console.log("請求成功",res);//這裏就可以獲取你的地址了
},
fail: function() {
console.log("請求失敗");
},
complete: function() {
console.log("請求完成");
}
});
},
fail: function() {
console.log("定位失敗");
},
complete: function() {
console.log("定位完成");
}
});
但是你會發現也有一些小問題，比如一開始說你的合法域名問題。
然後你就可以去你的項目配置那裏勾上不檢驗合法域名。
然後重新試一下，發現還是不行。
這裏其實就要你去微信小程序的後臺加入請求源了，因爲我現在是測試號沒有後臺弄不了。注意的是：
- 微信小程序使用的時候，WebServiceAPI 域名白名單
不能配置，否則會報錯 - request合法域名
要配置
05 小結
一頓操作下來發現自己還是可以接受，但是應該說還有很多坑沒有親自踩，都是在前人的路上走，谷歌一搜mpvue的，爲什麼一堆都是踩坑記錄？？？
其實還好，mpvue對vue的語法支持還不錯，因爲現在自己對vue的語法比較熟悉，寫起來是沒有毛病的，但是主要是一些細節上可能會難以把控。
特此記錄一下，也是對自己的記錄。發現其實學會了vue真的是很好，不僅可以開發web界面還可以把小程序也一起搞了。
參考文章：
