微信小程序關于橫屏存在的一些問題

最近新的項目中涉及到小程序通過webview跳轉h5時切換橫豎屏的需求，在項目正式開工的時候我提前進行了踩坑，關于小程序在前不久添加的橫屏屬性，只需要在app.json或者單個頁面的json文件中添加“pageOrientation”屬性，就可以實現橫豎屏的切換，如下面的示例代碼

{"usingComponents": {},"pageOrientation": "landscape"}

關于屬性的具體配置，文檔中給出的是[auto：自動切換]，[landscape：強制橫屏]，[portrait：強制豎屏]

對于橫屏，使用auto屬性，在ios中是可以正常的自動切換，但是在安卓系統中，會出現一個問題，就是微信的瀏覽器已經自動橫屏了，但是webview的內容卻不會，就導致了手機屏幕橫屏了，但是webview的內容多旋轉了90度，如下圖

這個問題在官方社區中也有多人提出，但并未得到實際解決，下面是相關帖子鏈接

就連官方文檔也進行了標識

針對以上的問題，我便請教了一位大牛，給了我提示，我的做法如下：

1、首先讓小程序在webview頁面中配置pageOrientation屬性為強制橫屏

2、由于這次的項目我使用了anniejs引擎，所以我在index.html中對系統進行了判斷，并把相應的判斷值用做一個全局的屬性進行傳遞

3、在anniejs中讓整個stage舞臺進行-90度的旋轉并把anniejs中自動旋轉的功能進行關閉

好了，下面我們看看結果

這樣就解決了安卓內webview內容無法自動旋轉的問題，但是這個不是長久之計，只是曲線救國的方法，希望小程序的官方能盡快修復這個問題，讓我們能愉快的使用這個功能

同樣，這個問題也適用于其它引擎，如egret，cocos2d，laya等，因為只是一個思路，如果有更好的方法，可以一起學習交流，共同提高

原文：https://www.cnblogs.com/BingDaYe/p/12194609.html

總結

以上是生活随笔為你收集整理的android微信小程序支持横屏,微信小程序关于横屏存在的一些问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。