最近幫別人在做一個小程序,因為官方的支持不夠好,組件庫也不夠多,所以就沒有使用官方的操作。網(wǎng)上查找了一番，覺得mpvue還不錯（之前也沒玩過），索性拿來用吧！

01 前言

小程序的做法也是比較簡單的，假如你是老手的話基本上開箱即用，但是奈何自己技術(shù)不夠，那就手把手教你踩坑吧。

之前也做過幾個小程序，我用過官方的、uni-app開發(fā)，效果還行。然后現(xiàn)在是想嘗試一下mpvue，生態(tài)還可以，組件庫也多。拿到設(shè)計圖的時候覺得還可以，但是一看好像還是有點東西的。

02 自定義tabbar

我看到了頁面是有一個自定義tabbar的，自己之前沒有做做過這種，都是直接在app.json文件里面配置的，簡單高效不帶坑。雖然說官方支持自定義tabbar的功能，但是我和官方的意思就不是同一個頻道的。這是我拿到的原型圖：

一開始好像是有點蒙，但是谷歌了一下其實還有救。思想就是把原生的tabbar隱藏，然后把你自定義的tabbar放上去即可。

• 在app.json配置tabbar，因為后面要跳轉(zhuǎn)（不配置報錯）
• 新建一個mytabbar.vue文件，寫自己的tabbar
• 在app.vue的onShow的時候隱藏原生的tabbar,wx.hideTabBar();

這樣其實就好了，但是需要tabbar的頁面都要引入自己的組件，talk is cheap，接下來就開始實現(xiàn)自己的組件吧。

自定義組件

模板部分

<template><section class="tabBar-wrap"><article class="tabBar-box"><ul class="tabBar-nav" v-if="navList.length > 0"><liclass="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"><buttonv-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的頁面跳轉(zhuǎn)方式wx.navigateTo({url});},bindViewTap(url) {//tabbar頁面的跳轉(zhuǎn)方式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的開發(fā)模式，坑還是自己踩一邊的好。

首先我遇到的第一個問題就是如何引入組件庫，雖然官方的做法是直接安裝，但是我安裝之后發(fā)現(xiàn)老是找不到路徑，沒辦法只好放棄。我現(xiàn)在采用的是直接引入本地的方式進行，雖然每一次編譯都要一點時間，但是還好。以后上線的時候把沒用的組件刪除就好，保留你需要使用的組件（按需引入）

下載整個倉庫之后把里面的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的時候發(fā)現(xiàn)左邊的圖標點擊不了。

文檔上面是使用bind:click-left的方式，但是沒用，其實正確的寫法應(yīng)該是：

<van-nav-bar title="我的"><van-icon name="wap-home" slot="left" @click="toHome"/> </van-nav-bar>

圖片背景

使用圖片背景的時候，發(fā)現(xiàn)報錯說不可以引用本地的圖片，使用base64或者網(wǎng)絡(luò)圖片。但是我使用網(wǎng)絡(luò)圖片發(fā)現(xiàn)報了403錯誤，沒有權(quán)限。索性就使用了base64的方式。雖然不太接受這種方式，因為轉(zhuǎn)出來的字符串很長。

獲取定位

首頁需要有一個獲取定位的功能。但是看了一下小程序的官方文檔只能獲取到經(jīng)緯度。這里我就使用了第三方的接口，去騰訊位置服務(wù)平臺注冊一下，可以使用經(jīng)緯度逆向解析地址的功能。

然后里面有一個逆地址解析的功能，使用經(jīng)緯度作為參數(shù)就可以獲取了。但是開始你要去app.json配置：

//在app.json中配置權(quán)限 "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,頁面上有l(wèi)ocation: 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("定位完成");}});

但是你會發(fā)現(xiàn)也有一些小問題，比如一開始說你的合法域名問題。

然后你就可以去你的項目配置那里勾上不檢驗合法域名。

然后重新試一下，發(fā)現(xiàn)還是不行。

這里其實就要你去微信小程序的后臺加入請求源了，因為我現(xiàn)在是測試號沒有后臺弄不了。注意的是：

• 微信小程序使用的時候，WebServiceAPI 域名白名單不能配置，否則會報錯
• request合法域名要配置

05 小結(jié)

一頓操作下來發(fā)現(xiàn)自己還是可以接受，但是應(yīng)該說還有很多坑沒有親自踩，都是在前人的路上走，谷歌一搜mpvue的，為什么一堆都是踩坑記錄？？？

其實還好，mpvue對vue的語法支持還不錯，因為現(xiàn)在自己對vue的語法比較熟悉，寫起來是沒有毛病的，但是主要是一些細節(jié)上可能會難以把控。

特此記錄一下，也是對自己的記錄。發(fā)現(xiàn)其實學會了vue真的是很好，不僅可以開發(fā)web界面還可以把小程序也一起搞了。

參考文章：

• mpvue 小程序如何自定義tabBar，不使用navigateTo跳轉(zhuǎn)，模擬redirectTo跳轉(zhuǎn)

總結(jié)

以上是生活随笔為你收集整理的小程序转h5之后 vant文件查找失败:_你还在使用原生开发小程序吗的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。