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


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

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

 

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

 

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

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

 

 

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

https://developers.weixin.qq.com/community/develop/doc/0006c6e801c058a7cf991b1a551000?highLine=%25E5%25B0%258F%25E7%25A8%258B%25E5%25BA%258F%25E9%2585%258D%25E7%25BD%25AE%25E6%25A8%25AA%25E5%25B1%258F%25E5%259C%25A8%25E5%25AE%2589%25E5%258D%2593%25E6%2598%25BE%25E7%25A4%25BA%25E4%25B8%258D%25E5%2585%25A8

 

 

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

 

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

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

 

 

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

 

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

 

 

 

好了,下面我們看看結果

 

 

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

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM