如何实现微信小程序的横屏及适配

微信小程序如何横屏

从小程序基础库版本 2.4.0 开始,小程序在手机上支持屏幕旋转。使小程序中的页面支持屏幕旋转的方法是:在 app.jsonwindow 段中设置 "pageOrientation": "auto" ,或在页面 json 文件中配置 "pageOrientation": "auto"

微信小程序开发文档

PS:1、以这种方式实现小程序屏幕旋转,需要用户关闭手机上的“屏幕锁定”选项
PS:2、由于开启横屏需要修改json文件的配置,而这个文件我们无法在程序运行中进行修改,故我们无法通过点击按钮或其他操作去使手机屏幕发生旋转,只是是设置为"pageOrientation": "auto"用户主动旋转手机触发
PS:3、我们可以在进入某一个页面的时候,固定屏幕横屏展示,设置"pageOrientation": "landscape "

如何获取当前屏幕状态

使用 selectorQuery.selectViewport可以获取到当前的屏幕状态。这种方式比较麻烦,这里介绍一种使用wx.onWindowResize进行监听的方式。

    onShow() {
        let that = this;
        wx.onWindowResize(function(res) {
            if (res.deviceOrientation === 'landscape') {
                that.isRotating = true;
            } else {
                that.isRotating = false;
            }
        })
          }

上面代码中,我们可以在wx.onWindowResize函数的回调中获取到当前屏幕的方向,并赋值给isRotating。当然,我们还可以在回调中拿到windowWidth(变化后的窗口宽度,单位 px)和windowHeight(变化后的窗口高度,单位 px)属性。

wx.onWindowResize函数是一个监听函数,类似Vue中的watch,我们可以把它放到onShow中。

横屏后出现的适配问题

我们都知道,微信小程序在竖屏状态下,宽度100%,100VW的值为750rpx。但是在横屏之后,750rpx的实际宽度为手机屏幕的高。如图:

竖屏状态使用rpx,px进行布局
横屏状态使用rpx,px进行布局1
横屏状态使用rpx,px进行布局2

在这种情况下,我们的界面将会变大。
举个简单例子,假如手机屏幕的宽高比为1:2,我们有一个按钮大小为100rpx100rpx,那么在竖屏状态下,显示正常,横屏状态下,按钮的显示宽高将会变成原来的2倍,当然他仍然是100rpx100rpx,但是显示出来却是变大了。

横屏后的适配方案

使用px进行布局

我们可以看到,使用px进行布局时,横屏之后元素并没有变大,所以这种方案是可行的。
但是,我们可以看到的是,375px在横屏时并没有占满全屏,也就是pxrpx之间并不是简单的1:2的对应关系。

rpx与px的对应关系

这里我们不讨论个物理像素、pt、px之间复杂的关系(/ω\)
所以,使用px布局,也不是那么好用。

使用vmin进行布局

先介绍下css3的两个属性vmaxvmin

vmax 相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax
vmin 相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin
文档说明

在这里我们只用到了vmin

当我们在竖屏时候,100vmin的取值为手机屏幕宽度,当横屏时候,100vmin的取值仍然为手机屏幕宽度,所以以vmin为单位的元素,在手机屏幕发生旋转的时候,其显示大小并不会发生改变(毕竟不管横屏竖屏,100vmin都等于屏幕的宽度)。
在使用rpx进行布局时,750rpx的取值为手机屏幕的宽度,而在使用vmin时,100vmin的取值为手机屏幕的宽度,所以,rpxvmin之间存在一个换算关系,即:x rpx=( x * 100 / 750)vmin。举个例子,75rpx转化为vmin75 * 100 / 750 = 10 vmin。所以,我们只要将rpx转化成vmin就可以愉快的码页面了~

使用scss进行转化

在实际开发中,我们不可能去手动计算每一个vmin的值,由于我用的是scss,所以我用scss进行了一下预处理。这里提供两种方式,一种是css函数,另一种是css mixin

//css函数
@function tovmin($rpx){//$rpx为需要转换的字号
    @return #{$rpx * 100 / 750}vmin; 
}
//使用方式
.slideAddPanel {
    width: tovmin(48);
    height: tovmin(80);
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0 tovmin(2) tovmin(12) 0 rgba(0, 0, 0, 0.2);
    line-height: tovmin(80);
    border-radius: 0 tovmin(10) tovmin(10) 0;
}
//css mixin
@mixin upx2vmin($property, $values...) {
    
  $max: length($values);//返回$values列表的长度值
  $pxValues: '';
  $remValues: '';

  @for $i from 1 through $max {
    $value: nth($values, $i);
    $remValues: #{$remValues + ($value * 100 / 750)}vmin;

    @if $i < $max {
      $remValues: #{$remValues + " "};
    }
  } 

  #{$property}: $remValues; 
}

//使用方式
.slideAddPanel {
    @include remCalc(width,45);
    @include remCalc(margin,1,.5,2,3);
}

PS:这两种方法均来自网络,我还是比较喜欢第一种~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,829评论 1 331
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,603评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,846评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,600评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,780评论 3 272
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,695评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,136评论 2 293
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,862评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,453评论 0 229
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,942评论 2 233
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,347评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,790评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,293评论 3 221
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,839评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,448评论 0 181
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,564评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,623评论 2 249