艺灵设计

全部文章
×

微信小程序从入坑到放弃之坑一:适配的坑

作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2018-11-17 22:01:17 - 阅: - 评:0 - 积分:0

摘要:
在微信小程序中,官方提供了类似rem效果的rpx单位,这样我们就不用换算单位了,设计稿中的尺寸不变,直接将px修改成rpx就OK了。但是,我们还要注意壕机的安全区域,否则产品在用户手机上会出现问题。例如iphoneX底部的安全区域safe-area-inset-bottom挡住了内容......

说起适配,这个坑可从来没有停过!不管是以前的IE6还是现在的移动端适配,都让无数开发者抓狂!特别是现在手机品牌之多,各厂商独家功能之坑爹,说起来都是泪啊!......

拿上一篇中艺灵提供的首页设计稿来说,尺寸是750px宽度的,那我们在微信小程序里面要怎样写呢?

一、放弃px单位!

直到目前为止,仍有很多工程师在写移动端项目时,都是把设计稿直接除以2,然后用px做单位。比如750宽度的设计稿,写代码就是375px了。不能说错,也不能说对。只能说看项目需求吧。

我以往接的移动端项目,如果不明确要求,一般都是用对半的方式,就是px来处理,然后处理下适配就完事了。有特殊要求的才会用上淘宝的flexible.min.js来实现移动端的自适应布局。就是那个叫rem的东西,这样说,大家应该都知道了吧。不清楚的可以谷歌,百度就算了,瞎浪费时间!虽然网上有很多关于rem布局的教程文章,看似是很好的解决方案,其实也不绝对!!!尽管如此,rem还是值得使用的。

好像扯远了,我们还是来说微信小程序吧。在小程序中,也有类似rem单位的概念,那就是rpx,官方文档地址: developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html ,官方文档是这样写的:“rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。”

作用rpx为单位的好处就是可以自适应。举个最简单的例子。

二、rpx实战

还拿上篇文章中的首页设计稿来说,顶部的海报尺寸是:750px*376px的。我们写的时候可以直接写:.banner{width:750rpx;height:376rpx}这样就行了。然后在模拟器中切换不同的机型,海报都能自适应大小。忘记说了,在小程序里面,图片必须指定尺寸,不要想当然的只设置宽度不设置高度或让高度100%或自动来让图片像正常网页中那样自动适配大小,在小程序里面,这是不可能的!不信,你就试试!

虽然rpxpx是需要换算的,但我们写的时候可以不用考虑,设计稿的尺寸是多少我们就写多少,最后把px单位换成rpx就行了,是不是非常非常人性化!!!这点儿不像rem,需要将px转换成rem的单位比例。尽管有些编辑器可以自动转换,但鬼知道转换后的一长串小数点表示的原来尺寸是多少啊!调试时格外麻烦。

如果看官会Vue的话,写小程序会格外顺手很多。无奈艺灵我好久没碰Vue了,之前自学的现在都忘光了。(:笑哭)

三、iphone X的坑

这个问题差点搞忘记了,夜晚找小伙伴测试时才想起来。壕的iphoneX有安全区域的坑!作为一个没用过iphoneX我的来说,问题只能靠搜索,解决问题只能靠聊天沟通(:伤不起)

具体是什么坑呢,来张图吧:iphoneX中商品详情页的展示效果iphoneX中商品详情页的展示效果估计很多看官还不知道问题出在哪里。注意看最下面的那个黑色杠杠的位置!!!所以,iphoneX中,微信小程序里自带的tabBar是长这个样子的。iphoneX中,微信小程序里自带的tabBar是长这个样子的不知道看官看着觉得怎么样,反正艺灵我感觉一个字:搓!但没办法,于是又只好搜索来解决问题。查看社区中别人提的问题如何适配iPhone X/XS等 底部安全区

最后抱着试一试的态度,将帖子中的:padding-bottom: env(safe-area-inset-bottom);写了进去,模拟器上一点反应都没有!如图:添加padding-bottom: env(safe-area-inset-bottom);后,模拟器上并没有效果添加safe-area-inset-bottom后,模拟器上并没有效果但在真机上还真有效果了!如图:添加padding-bottom: env(safe-area-inset-bottom);后在iphoneX真机中是有效果的safe-area-inset-bottom的iphoneX真机中是有效果的

好吧,今天就不写了,先改bug去了。

转载声明:
  若亲想转载本文到其它平台,请务必保留本文出处!
本文链接:/xwzj/2018-11-17/weixin-iphoneX-safe-area.html

若亲不想直保留地址,含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载,随便修改,但请尊重艺灵的劳动成果!谢谢理解。

亲,扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助,您可以用支付宝打赏下艺灵哦!

Tag: 微信 小程序 开发者工具 设计稿 iphoneX rpx rem vue.js flexible 自适应布局 框架

上一篇: 微信小程序从入坑到放弃指南   下一篇: 微信小程序从入坑到放弃之坑二:image图片地址的坑

评论区