你还在使用原生开发小程序吗

样式部分

.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”

• 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-icon name=“wap-home” slot=“left” @click=“toHome”/>

图片背景

使用图片背景的时候，发现报错说不可以引用本地的图片，使用base64或者网络图片。但是我使用网络图片发现报了403错误，没有权限。索性就使用了base64的方式。虽然不太接受这种方式，因为转出来的字符串很长。

获取定位

首页需要有一个获取定位的功能。但是看了一下小程序的官方文档只能获取到经纬度。这里我就使用了第三方的接口，去腾讯位置服务平台注册一下，可以使用经纬度逆向解析地址的功能。

然后里面有一个逆地址解析的功能，使用经纬度作为参数就可以获取了。但是开始你要去app.json配置：

//在app.json中配置权限

“permission”: {

“scope.userLocation”: {

“desc”: “您的位置信息将用于搜索银行信息,以帮助您填写正确的支行信息”

}

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。