web学习笔记（八十一）

目录

1.自定义tabBer

2.小程序如何一键获取手机号 

1.自定义tabBer

      因为低版本可能会不兼容自定义tabber，所以我们在自定义tabbar的同时也需要配置小程序自带的tabbar，以确保在低版本的情况下最起码有一个tabbar显示在页面上。自定义tabbar可以更加灵活的设置样式，但是自定义tabber不可以使用文档中提供的tabbar相关的api接口。

（1）在app.json中的tabber项指定custom字段，表示我们要开启自定义tabbar。

  "tabBar": {
    "color": "#000",
    "custom": true,
    "selectedColor": "#333",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "/static/tabbarimg/h.png",
        "selectedIconPath": "/static/tabbarimg/h-selected.png"
      },
      {
        "pagePath": "pages/cates/cates",
        "text": "分类",
        "iconPath": "/static/tabbarimg/c.png",
        "selectedIconPath": "/static/tabbarimg/c-selected.png"
      }
    ]
  },

（2）所有tab页的json里需要声明usingComponents项，也可以在app.json全局开启（注意：我们在页面中使用vant组件时需要先注册组件，组测组件的时候就已经开启usingComponents项了，因此如果我们需要留意页面是否重复开启usingComponents项）。 

  "usingComponents": {
  }

 (3)我们可以参考微信开发文档中创建自定义tabber组件的代码来自行修改合适的格式，需要注意的是自定义tabbar页面的高亮显示是由onshow中的一段代码来控制的，我们需要给设置tabbar页面的设置下列代码（记得修改对应的 selected值）。

  onShow() {
    if (typeof this.getTabBar === "function") {
      this.getTabBar((tabBar) => {
        tabBar.setData({
          selected: 2,
        });
      });
    }
  },

2.小程序如何一键获取手机号 

小程序获取手机号的接口是不对个人开发者开放的，且获取手机号是需要进行收费的。小程序获取有两个组件

1. 手机号快速验证组件：平台会对手机号码进行验证，但不保证是实时验证；
2. 手机号实时验证组件：在每次请求时，平台均会对用户选择的手机号进行实时验证。

获取手机号的步骤：

1. 将button组件的open-type值设置为getPhoneNumber，当用户点击同意后通过bindgetPhoneNumber事件来获取回调信息，此时我们可以获得一个code（注意：此处的code和wx.login中返回的code是不一样的，注意区别）。
2. 将bindgetPhoneNumber事件回调中获取到的动态令牌code传到开发者后台。
3. 在开发者后台调用phonenumber.getPhoneNumber接口，从而获取用户的手机号。