最近，我正在帮助某人建立一个迷你计划。因为官方支持还不够好，并且组件库还不够，因此我没有使用官方操作。我在网上搜索，认为它很好（我以前从未玩过），所以我只是使用了它！

01前言

迷你程序的方法也相对简单。如果您是退伍军人，那么您基本上将其开箱即用，但是如果您没有足够的技能，请教您如何进入坑。

我以前还制作了几个迷你程序。我已经使用了官方和Uni-App开发，结果非常好。然后，我想尝试一下。生态系统还可以，并且有许多组件库。当我获得设计图纸时，我认为还可以，但似乎有些东西。

02自定义

我看到该页面有一个自定义。我以前从未做过。它们都直接在app.json文件中配置，该文件简单有效，没有任何陷阱。尽管该官员支持自定义功能，但我和官员并不是说同一渠道。这是我得到的原型：

起初似乎有些困惑，但实际上对谷歌有帮助。思想是隐藏原件，然后将您的自定义版本放在上面。

这实际上很好，但是所需的页面必须介绍自己的组件，谈话是，然后开始实施自己的组件。

自定义组件

模板部分

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

03组合使用Vant

构建自己的车轮非常麻烦，因此您可以使用其他人的组件库。我看着万特，这很不错，其他人尝试使用Vant+开发模型，因此最好自己踏上技巧。

首先，我遇到的第一个问题是如何介绍组件库。尽管官方方法是直接安装它，但是在安装它后，我发现我找不到路径，所以我别无选择，只能放弃。我现在正在使用直接引入本地的方法。尽管每次都需要一点时间来编译，但这还可以。将来在线上线时，只需删除无用的组件并保留您需要使用的组件（请按需引入）

下载整个存储库后，将DIST文件夹下方的所有文件复制到您的项目中，并在 /VANT中。将来，您可以从这里介绍它们。使用时，将其配置在app.json（相同的级别）中：

"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遇到的小坑

定制

因为UI图上的导航具有自定义样式，所以我别无选择，只能使用Vant的Van-Nav-bar，但是当我使用插槽时，我发现无法单击左侧的图标。

该文档使用绑定： - 左，但没有用。实际上，编写它的正确方法应该是：

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

图片背景

当使用图片背景时，我发现一个错误，说您不能引用本地图片或使用在线图片。但是，我使用了图片，发现有403的错误，我没有权限。只需使用它。尽管我不太接受这种方法，因为转移的字符串很长。

获得定位

主页需要具有一个功能才能获得定位。但是，在查看了迷你计划的官方文件之后，您只能获得纬度和经度。在这里，我使用了第三方接口，并在 平台上注册。我可以使用反向纬度和地址的经度分辨率的功能。

然后是反地址分辨率的函数，可以通过使用纬度和经度作为参数获得。但是在开始时，您需要转到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("定位完成"); } });

但是您会发现有一些小问题，例如一开始您的法律域名问题。

然后，您可以转到项目配置以检查法律域名而无需检查。

然后重试，发现它仍然不起作用。

实际上，您需要转到微信Mini程序的背景来加入请求源，因为我现在正在测试没有背景的数字，但无法获得它。注意：

05摘要

过了一会儿，我发现我仍然可以接受，但是应该说仍然有很多陷阱我没有踩到自己，他们都在我的前任之路上。搜索之后，为什么所有陷阱记录？ ？ ？

实际上，这还不错，对Vue的语法支持非常好，因为我现在熟悉Vue的语法，因此写作没有错，但是可能很难控制一些细节。

让我在这里记录下来，这也是我自己的记录。我发现学习Vue真的很好。您不仅可以开发网络界面，而且还可以一起完成Mini程序。

参考文章：