目录
1.自定义tabBar
因为低版本可能会不兼容自定义tabbar,所以我们在自定义tabbar的同时也需要配置小程序自带的tabbar,以确保在低版本的情况下最起码有一个tabbar显示在页面上。自定义tabbar可以更加灵活的设置样式,但是自定义tabber不可以使用文档中提供的tabbar相关的api接口。
(1)在app.json中的tabbar项指定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)我们可以参考微信开发文档中创建自定义tabbar组件的代码来自行修改合适的格式,需要注意的是自定义tabbar页面的高亮显示是由onshow中的一段代码来控制的,我们需要给设置tabbar页面的设置下列代码(记得修改对应的 selected值)。
onShow() {
if (typeof this.getTabBar === "function") {
this.getTabBar((tabBar) => {
tabBar.setData({
selected: 2,
});
});
}
},
2.小程序如何一键获取手机号
小程序获取手机号的接口是不对个人开发者开放的,且获取手机号是需要进行收费的。小程序获取有两个组件
- 手机号快速验证组件:平台会对手机号码进行验证,但不保证是实时验证;
- 手机号实时验证组件:在每次请求时,平台均会对用户选择的手机号进行实时验证。
获取手机号的步骤:
- 将button组件的open-type值设置为getPhoneNumber,当用户点击同意后通过bindgetPhoneNumber事件来获取回调信息,此时我们可以获得一个code(注意:此处的code和wx.login中返回的code是不一样的,注意区别)。
- 将bindgetPhoneNumber事件回调中获取到的动态令牌code传到开发者后台。
- 在开发者后台调用phonenumber.getPhoneNumber接口,从而获取用户的手机号。