First post, if there are deficiencies or errors or better way, please point out, thank you
What-if scenarios
When the user enters the small program, it is necessary to obtain the authorization of avatar nickname and other relevant information before allowing him to carry out other interactive operations.
Because after the upgrade of wechat small program, wx.authorize({scope: “scope.userinfo “}) is directly called, the authorization window cannot pop up again.
For example, customize a dialog box with a masking layer to guide users to authorization information, such as this (please automatically ignore the coding part)
Implementation approach
As we know, wechat small program native Tabbar only provides wx.hideTabBar wX. showTabBar to control its hiding or display, and the level of native tabbar is always at the top, if the tabbar is in the display state, then the custom cover layer can not block it
Therefore, my idea is to use Wx. hideTabBar to first hide the Navigation bar of Tabbar in onLauch of the app, and then use a picture that is the same as the navigation bar to occupy the space of the navigation bar, and place it in the lower layer of the covering layer, and display and hide it together with the covering layer
Realize the point
At first, I thought I would fix the tabbar image with fixed “bottom” set to 0. Although there is no problem with the development tool, it looks like this on iPhone X:
In other words, tabbar is not located at the bottom of the page
Query. Select (‘#fake-tabbar’).boundingClientRect(); Query. Exec (function(res) {}) to obtain the actual rendered height of tabbar image; The difference between the two is the top value of dynamically set tabbar image;
Note: There should be two tabbar images, one for the base image and one for the Tabbar image, as follows:
The position of the bottom image is the same as that of the tabbar image and is located below it. In order to prevent the gap of the bottom end of a long screen mobile phone like iphoneX due to insufficient tabbar height, the height of the background image is set slightly higher
All the code
Wepy is written directly as a component
<style lang="less"Scoped > /* Authorization popover */.authorize_alert_wrapper {. Cover {position: fixed; left: 0; right: 0; top: 0; bottom: 0; background-color:# 000000;Opacity: 0.6; z-index: 110; } .authorize_alert { width: 506rpx; height: 232rpx; box-sizing: border-box; padding-top: 40rpx; background:#ffffff;
border-radius: 16rpx;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow: hidden;
z-index: 120;
.authorize_alert_describe {
font-family: 'PingFangSC-Regular'.'Microsoft Yahei', sans-serif;
font-size: 32rpx;
color: # 333333;
letter-spacing: 0;
text-align: center;
margin-top: 18rpx;
}
.confirm_cancel {
position: absolute;
width: 506rpx;
height: 72rpx;
box-sizing: border-box;
bottom: 0;
left: 0;
.confirm {
width: 100%;
height: 72rpx;
line-height: 72rpx;
padding: 0;
margin: 0;
text-align: center;
font-size: 32rpx;
color: # 999;
border: none;
border-radius: 0;
border-top: 2rpx solid #e1e1e2;
background-color: #fff;
font-family: 'PingFangSC-Regular'.'Microsoft Yahei', sans-serif;
float: right;
letter-spacing: 1px;
color: #21b922;
&:after {
border-radius: 0;
border: none;
}
}
.confirm_hover {
background-color: #eee;} } } } .pre-fake-tabbar, .pre-fake-tabbar-bg { width: 100%; height: 96rpx; position: fixed; left: 0; } .pre-fake-tabbar-bg { height: 150rpx; } .show { opacity: 1; } .hide { opacity: 0; } </style> <template> <! From April 30, 2018, wx.getUserInfo interface will not pop up the authorization query box, default call failure, following the workaround --> <view class="authorize_alert_wrapper {{showModal ? 'show' : 'hide'}}" @touchmove.stop="catchTouchEvent">
<image id="fake-tabbar_bg" class="pre-fake-tabbar-bg" src="{{fakeTabbarBgUrl}}" style="top:{{fakeTabbarTop}};"/>
<image id="fake-tabbar" class="pre-fake-tabbar" src="{{fakeTabbarUrl}}" style="top:{{fakeTabbarTop}};"/>
<view id="cover" class='cover'></view>
<view class="authorize_alert">
<view class="authorize_alert_describe"</view> <view class="confirm_cancel">
<button class="confirm" hover-class="confirm_hover" @tap.stop="tap" data-btn-type="confirm" open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo"</button> </view> </view> </view> </template> <script> import wepy from'wepy';
const app = wepy.$instance;
export default class AuthModal extends wepy.component {
data = {
showModal: false,
fakeTabbarUrl: '.. /images/index/fake_tabbar.png',
fakeTabbarBgUrl: '.. /images/index/fake_tabbar_bg.png',
fakeTabbarTop: null
};
methods = {
tap() {
this.hide();
},
onGotUserInfo(e) {
const self = this;
console.log('authorization', e);
if(e.daile.userinfo) {// Authorization succeeded console.log('Authorization successful', e);
app.globalData.wxUserInfo = e.detail.userInfo;
self.$apply(a); // Notify the main screen to update the user message self.$emit('userinfo-update', e.detail.userInfo);
} else{ self.show(); }},catchTouchEvent() {
console.log('Prevent touch penetration')}};hide() {
this.showModal = false;
this.$apply(a); wepy.showTabBar(); }show() {
this.showModal = true;
this.$apply(a); wepy.hideTabBar(); }autoAdjustTabTop() {
const res = wepy.getSystemInfoSync();
const {screenHeight} = res;
const self = this;
const query = wepy.createSelectorQuery();
query.select('#fake-tabbar').boundingClientRect();
query.exec(function(res) {
console.log('boundingClientRect', res); const resData = res[0]; Const fakeTabbarTop = screenheight-res [0]. Height; console.log('fakeTabbarTop', fakeTabbarTop)
self.$apply(a); }); }onLoad() {
this.autoAdjustTabTop();
}
}
</script>
Copy the codeTo discuss
The height of the native tabbar varies depending on the phone model, but the official wechat mini program does not provide an API to obtain the height of tabbar, which makes the effect of using tabbar images for placeholders different from the actual effect of tabbar display
