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

蔚落 2023-05-21 11:55 35阅读 0赞

> 最近帮别人在做一个小程序,因为官方的支持不够好,组件库也不够多,所以就没有使用官方的操作。网上查找了一番，觉得mpvue还不错（之前也没玩过），索性拿来用吧！

![aHR0cHM6Ly9pbWdrci5jbi1iai51ZmlsZW9zLmNvbS85M2NhMzZhYy00ZTNkLTQxNGItOThmOC01NjlhYzZlOGM5ZGQuZ2lm][]

## 01 前言 ##

小程序的做法也是比较简单的，假如你是老手的话基本上开箱即用，但是奈何自己技术不够，那就手把手教你踩坑吧。

之前也做过几个小程序，我用过`官方的`、`uni-app`开发，效果还行。然后现在是想尝试一下`mpvue`，生态还可以，组件库也多。拿到设计图的时候觉得还可以，但是一看好像还是有点东西的。

## 02 自定义tabbar ##

我看到了页面是有一个自定义tabbar的，自己之前没有做做过这种，都是直接在app.json文件里面配置的，简单高效不带坑。虽然说官方支持`自定义tabbar`的功能，但是我和官方的意思就不是同一个频道的。这是我拿到的`原型图`：

![原型图][format_png]

一开始好像是有点蒙，但是谷歌了一下其实还有救。思想就是把原生的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>

**逻辑部分**

**样式部分**

.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
      },

在你的页面里面放上组件：

*  needButton:是否需要一个button，就像我这里就需要了
 *  btnText：button里面的文字显示，因为可能另一个页面显示不一样
 *  handButton：点击button的逻辑
 *  selectNavIndex：需要高亮的下标，每个页面的高亮不一样

![最后实现][format_png 1]

## 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的方式。虽然不太接受这种方式，因为转出来的字符串很长。

**获取定位**

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

![format_png 2][]

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

//在app.json中配置权限
    "permission": { 
        "scope.userLocation": { 
          "desc": "您的位置信息将用于搜索银行信息,以帮助您填写正确的支行信息"
        }
      },

![format_png 3][]

实例代码：

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("定位完成");
          }
        });

但是你会发现也有一些小问题，比如一开始说你的合法域名问题。

![format_png 4][]  
然后你就可以去你的项目配置那里勾上`不检验合法域名`。

![format_png 5][]  
然后重新试一下，发现还是不行。

![请求源未授权][format_png 6]

这里其实就要你去微信小程序的后台加入请求源了，因为我现在是测试号没有后台弄不了。注意的是：

*  微信小程序使用的时候，WebServiceAPI 域名白名单`不能配置`，否则会报错
 *  request合法域名`要配置`

## 05 小结 ##

一顿操作下来发现自己还是可以接受，但是应该说还有很多坑没有亲自踩，都是在前人的路上走，谷歌一搜mpvue的，为什么一堆都是踩坑记录？？？

其实还好，mpvue对vue的语法支持还不错，因为现在自己对vue的语法比较熟悉，写起来是没有毛病的，但是主要是一些细节上可能会难以把控。

特此记录一下，也是对自己的记录。发现其实学会了vue真的是很好，不仅可以开发web界面还可以把小程序也一起搞了。

参考文章：

*  [mpvue 小程序如何自定义tabBar，不使用navigateTo跳转，模拟redirectTo跳转][mpvue _tabBar_navigateTo_redirectTo]

![在这里插入图片描述][20200418215037900.gif_pic_center]

[aHR0cHM6Ly9pbWdrci5jbi1iai51ZmlsZW9zLmNvbS85M2NhMzZhYy00ZTNkLTQxNGItOThmOC01NjlhYzZlOGM5ZGQuZ2lm]: /images/20230521/b4263dde514545fa8425a309234791a3.png
[format_png]: /images/20230521/a6f03046c18141f893cb417f5ffdfad3.png
[format_png 1]: /images/20230521/23f9f052c0c24c9fa88dc107267e4629.png
[format_png 2]: /images/20230521/fd9a3d5045c045e0a12a8d138a3e2f5d.png
[format_png 3]: /images/20230521/83bb8fe6a4534bd6a3601e63b559d710.png
[format_png 4]: /images/20230521/2ff1fc5854f045c7972ebaed0a514476.png
[format_png 5]: /images/20230521/46b0578761a04568aa80702056a0a667.png
[format_png 6]: /images/20230521/7b085d22997a4f3cb158a7b3489d94e1.png
[mpvue _tabBar_navigateTo_redirectTo]: https://segmentfault.com/a/1190000015027980
[20200418215037900.gif_pic_center]: /images/20230521/17f0705bffbb496fadd6efeab77b1f2e.png