preface

Uni-app is a full-end framework THAT I have been using for a long time. Although there are a few hicks, it is generally quite easy to use, fast to develop and easy to use. Use a blog post to record some of the problems I encountered and how to solve them.

demand

To develop android tablet App (landscape), it is natural to apply full screen and hide virtual buttons. After a simple search, find the following configuration method:

  • inpages.jsonApp landscape is faster than using the Plus Api in app. vue
"PageOrientation ": "landscape" // Landscape configuration, global screen rotation setting (APP/ wechat /QQ mini program only), auto/portrait/landscape supportedCopy the code
  • inApp.vuetheonLaunchAdd code to the method:
Plus. The navigator. HideSystemNavigation () / / hide the virtual keysCopy the code

Ok, after these two steps, we have a perfect landscape and full screen application. Now jump to the screen. There is white space at the bottom of all the pages except the first one.

To solve

Come to think of it, the white space is reserved for the bottom virtual button, and uni-app is essentially a browser app, so just reset the webView style of the current page

  • First, inApp.vueRecord the height of the screenwindowHeightAnd the +50 height, because that height is the one that removed the bottom virtual button and had to be added back
uni.getSystemInfo({
    success: function(e) {
            console.log(e)
            // #ifndef MP
            if (e.platform == "android") {
                    Vue.prototype.windowHeight = e.windowHeight + 50
            }
            // #endif
}
Copy the code
  • Encapsulate a global function that changes the height of the webView style of the current page. Here I put it in main.js
Vue.prototype.$setFullScreen = () => {
    // #ifdef APP-PLUS
    let pages = getCurrentPages();
    let page = pages[pages.length - 1];
    page.$getAppWebview().setStyle({height: Vue.prototype.windowHeight  + 'px'})
    // #endif
}
Copy the code
  • Call this method every time the page onShow

Check again, it’s perfect full screen, sometimes if the virtual button pops up again, call this method again and it’s ok

conclusion

This should be a bug, but many people have mentioned this problem, but the official has not solved it. ┏ ┓ (´ ∀ `)