❝
Recently, I was working on a small program for others. Because the official support was not good enough and the component library was not enough, I did not use the official operation. I looked it up on the Internet and found mpvue is good (I haven’t played it before), just use it!
❞
01 preface
Small program practice is also relatively simple, if you are a veteran basically out of the box, but their own technology is not enough, then teach you to step on the pit.
I have also made several small programs before. I have used the official uni-app development, and the effect is ok. Now I want to try MPVue, ecology is ok, component library is also many. When I got the blueprints I thought they were ok, but at first glance there was something there.
02 Customizing tabbar
I have seen that there is a custom tabbar on the page. I have never done this before. It is configured directly in the app.json file, simple and efficient without pit. Although tabbar customization is officially supported, I’m not on the same page. Here’s the prototype I got:
It seemed a bit confusing at first, but googling actually saved the day. The idea is to hide the native Tabbar and put your own custom tabbar on it.
- Configure tabbar in app.json because it will jump later (error if not configured)
- Create a new myTabbar. vue file and write your own tabbar
- Hide native Tabbar in app.vue onShow,
wx.hideTabBar();
This is fine, but any page that requires tabbar should introduce its own component, talk is cheap, so let’s start implementing your own component.
Custom Components
“The template section“
<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 ===' 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>
Copy the code“The logical part“
<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: "Home page"
},
{
pagePath: ".. /share/main".
iconPath: ".. /.. /static/tabs/home.png".
selectedIconPath: ".. /.. /static/tabs/home-active.png".
text: "Share"
},
{
pagePath: ".. /center/main".
iconPath: ".. /.. /static/tabs/home.png".
selectedIconPath: ".. /.. /static/tabs/home-active.png".
text: "I"
}
]
};
},
methods: {
selectNavItem(index, pagePath) {
if (index === this.selectNavIndex) {
return false;
}
this.bindViewTap(pagePath);
},
bindNavigateTo(url) {// This is not tabbar's page-jumping mode
wx.navigateTo({
url
});
},
bindViewTap(url) {// The tabbar page jump mode
wx.switchTab({
url
});
}
}
};
</script>
Copy the code“Style part“
.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.24 s linear;
}
.item-text-active {
color: #fec754;
}
.item-images {
margin: 0 auto;
text-align: center;
transition: 0.24 s 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;
}
Copy the codeuse
The way to use it is also very simple, just bring it in and register it.
import mytabbar from "@/components/mytabbar";
components: {
mytabbar
},
Copy the codeAdd components to your page:
<mytabbar
:needButton="needButton"
:btnText="btnText"
:handButton="handButton"
:selectNavIndex="selectNavIndex"
></mytabbar>
Copy the code- NeedButton: Whether a button is needed, as I need it here
- BtnText: Text display inside button, because another page may display differently
- HandButton: Click the logic of the button
- SelectNavIndex: The subscript that needs to be highlighted, which varies from page to page
03 Combine Vants
Building your own wheels is a hassle, so use someone else’s component library. Look at Vant, it’s good, and others have tried using Vant + MPvue development model, pit or step aside.
The first problem I encountered was how to import the component library. Although the official method was to install it directly, I found that I could not find the path after installing it, so I had to give up. I’m going to do it native, which takes a little bit of time each time, but it’s fine. Just delete the unused components when you go live, and keep the ones you need (import as needed).
Download the entire repository and copy all files in the dist folder to your static/ Vant project. You can use this folder in the same way as 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"
},
Copy the codeIn fact, this is ok, when writing the page directly according to its documentation.
04 Encountered small pit
“Custom NavBar“
I had no choice but to use Vant’s van-nav-bar because of the custom navigation style on the UI diagram, but I found the left icon was not clicking when I used slot.
Bind :click-left bind:click-left bind:click-left
<van-nav-bar title="I">
<van-icon name="wap-home" slot="left" @click="toHome"/>
</van-nav-bar>
Copy the code“Image background“
Error: Use base64 or network image instead of local image. However, I reported error 403 using the network picture and did not have permission. It simply uses base64. I don’t like this, though, because it’s a long string.
“Access to locate“
The home page needs to have a location capture function. But a look at the official documentation of the small program can only get latitude and longitude. Here I use the third-party interface, to Tencent location service platform registration, you can use latitude and longitude reverse address resolution function.
Note: first of all, you need to introduce the SDK in your page, which can be downloaded from the home page of Tencent Map platform, click the entrance
❝
In fact, there is a small hole here, that is, ES6 grammar and ES5 grammar can not be mixed, you need to modify it in SDK export, change it to export default QQMapWX, in short, the introduction of the same syntax.
❞
import QQMapWX from '.. /.. /utils/qqmap-wx-jssdk.min.js';
Copy the code
Then there is a reverse address resolution function, using latitude and longitude as a parameter can be obtained. But to get started you need to go to the app.json configuration:
// Configure permissions in app.json
"permission": {
"scope.userLocation": {
"desc": "Your location information will be used to search for bank information to help you fill in the correct branch information."
}
},
Copy the code
Example code:
created() {
var that = this;
var qqmapsdk = new QQMapWX({
key: "HDABZ-JTWRG-MMLQI-I2CWI-6EPRE-?????" // After the new key is created
});
wx.getLocation({
type: "wgs84".// By default, wGS84 returns GPS coordinates and gcj02 returns coordinates available for wx.openLocation
success: function(res) {
console.log("Positioned successfully", res);
var locationString = res.latitude + "," + res.longitude;
qqmapsdk.reverseGeocoder({
location: locationString,
success: function(res) {
// Successful callback
console.log(res);
}
});
},
fail: function() {
console.log("Location failure");
},
complete: function() {
console.log("Location completed");
}
});
},
Copy the codeBut you will find that there are some minor issues, such as your legal domain name in the first place.
Do not verify valid domain names.
In fact, you have to go to the background of wechat applet to join the request source. Note that:
- Wechat applet when used, WebServiceAPI domain name whitelist
Can't configurationOtherwise, an error will be reported - Request Valid domain name
You want to configure
05 summary
A ton of operation down to find themselves or acceptable, but it should be said that there are many pits did not step on, are in the way of predecessors, Google a search mpVue, why are a pile of pit records??
In fact, MPVue syntax support for VUE is good, because NOW I am familiar with the syntax of VUE, there is no problem in writing, but mainly some details may be difficult to control.
This is for the record, but also for my own record. Found that actually learned vUE is really good, not only can develop the Web interface can also put small procedures together.
Reference article:
- How to customize tabBar with mpvue applets, without using navigateTo jump, simulate redirectTo jump
This article is formatted using MDNICE