微信小程序mpvue自定義導航欄適配方案

在正文開始之前 首先得了解一下我們設計稿的1px在手機中是怎樣顯示出來的，首先看下圖

從上圖得知了各個安卓和IOS常規屏幕的寬高以及像素比，在日常設計稿常以iPhone6 750px(375 * 2 = 750) 為標準設計，從以上信息得知我們設計稿中的1px 在iPhone6中是占據了2px

下面將以10px為單位在每一個型號進行單位換算

型號	寬度	高度	設計稿單位（寬度）	像素比	轉換單位(10px)
iPhone5	320	568	640	2	20
iPhone6	375	667	750	2	20
iPhone6 Plus	414	736	1242	3	30
iPhone7	375	667	750	2	20
iPhone7 Plus	414	736	1242	3	30
iPhone X	375	812	1125	3	30
Nexus 5	360	640	1080	3	30
Nexus 5x	411	731	1078.875	2.625	26.25
Nexus 6	412	732	1536	3.5	35

從上表發現了一個規律 以iPhone6與iPhone6 Plus 為例 轉換單位是由 像素比 * 轉換單位 得出 由此推算得出單位轉換公式

（像素比 * 轉換單位）/ 像素比

例子：

（2 * 10）/ 2 = 10//iPhone6
（3 * 10）/ 3 = 10//iPhone6 Plus


那么得到了需要轉換的單位后怎么進行適配呢，首先要得到系統狀態欄高度，利用小程序API wx.getSystemInfo(Object object)（官方文檔傳送門）中的statusBarHeight得到了系統狀態欄高度（解決萬惡的劉海屏，水滴屏問題），現在問題最大的系統狀態欄高度已經獲取到之后就可以開始寫了

mpvue代碼：

App.vue





組件文件： frames.vue






調用組件頁面index.vue






效果圖：

安卓水滴屏 OPPP R17

IOS劉海屏 蘋果X

安卓常規屏 OPPO R11S

IOS常規屏 蘋果8