微信小程序關(guān)于橫屏存在的一些問(wèn)題

最近新的項(xiàng)目中涉及到小程序通過(guò)webview跳轉(zhuǎn)h5時(shí)切換橫豎屏的需求，在項(xiàng)目正式開(kāi)工的時(shí)候我提前進(jìn)行了踩坑，關(guān)于小程序在前不久添加的橫屏屬性，只需要在app.json或者單個(gè)頁(yè)面的json文件中添加“pageOrientation”屬性，就可以實(shí)現(xiàn)橫豎屏的切換，如下面的示例代碼

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

關(guān)于屬性的具體配置，文檔中給出的是[auto：自動(dòng)切換]，[landscape：強(qiáng)制橫屏]，[portrait：強(qiáng)制豎屏]

對(duì)于橫屏，使用auto屬性，在ios中是可以正常的自動(dòng)切換，但是在安卓系統(tǒng)中，會(huì)出現(xiàn)一個(gè)問(wèn)題，就是微信的瀏覽器已經(jīng)自動(dòng)橫屏了，但是webview的內(nèi)容卻不會(huì)，就導(dǎo)致了手機(jī)屏幕橫屏了，但是webview的內(nèi)容多旋轉(zhuǎn)了90度，如下圖

這個(gè)問(wèn)題在官方社區(qū)中也有多人提出，但并未得到實(shí)際解決，下面是相關(guān)帖子鏈接

就連官方文檔也進(jìn)行了標(biāo)識(shí)

針對(duì)以上的問(wèn)題，我便請(qǐng)教了一位大牛，給了我提示，我的做法如下：

1、首先讓小程序在webview頁(yè)面中配置pageOrientation屬性為強(qiáng)制橫屏

2、由于這次的項(xiàng)目我使用了anniejs引擎，所以我在index.html中對(duì)系統(tǒng)進(jìn)行了判斷，并把相應(yīng)的判斷值用做一個(gè)全局的屬性進(jìn)行傳遞

3、在anniejs中讓整個(gè)stage舞臺(tái)進(jìn)行-90度的旋轉(zhuǎn)并把a(bǔ)nniejs中自動(dòng)旋轉(zhuǎn)的功能進(jìn)行關(guān)閉

好了，下面我們看看結(jié)果

這樣就解決了安卓?jī)?nèi)webview內(nèi)容無(wú)法自動(dòng)旋轉(zhuǎn)的問(wèn)題，但是這個(gè)不是長(zhǎng)久之計(jì)，只是曲線救國(guó)的方法，希望小程序的官方能盡快修復(fù)這個(gè)問(wèn)題，讓我們能愉快的使用這個(gè)功能

同樣，這個(gè)問(wèn)題也適用于其它引擎，如egret，cocos2d，laya等，因?yàn)橹皇且粋€(gè)思路，如果有更好的方法，可以一起學(xué)習(xí)交流，共同提高

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。