微信小程式能適配不同機型新手教程，我們都知道，小程式是乙個跨系統的平台。這就意味著，小程式會在不同的裝置上執行，但不同裝置的解析度會有差異。
在小程式中，如何在解析度不同的裝置上保證視覺元素的正常顯示？這就需要名為 rpx 的動態尺寸單位。
為什麼需要動態單位和 rpx？
在顯示屏上，每乙個畫面都是由無數的點陣形成的。這個點陣中，每乙個點叫做畫素，就是 pixel（縮寫為 px）。
上面的那句話，對於很多人來說都是常識。
但是，隨著 retina 螢幕（即「視網膜屏」）的推出和高分屏的普及，1 px 所能代表的實際長度並非是一成不變的。
對於跨平台、跨裝置的應用來說，單純使用 px 並不能滿足需要。因為，這很難保證小程式的元素，能在不同裝置上正常顯示——同樣 px 尺寸的元素，在高分屏上顯示會明顯要比在低分屏顯得更小。
因此，我們需要乙個動態的長度單位。這個單位通過對不同螢幕的解析度進行調整和適配，保證相同元素在不同螢幕上的展示是正常的。
蘋果和 google 對此都有相應的措施：
由於蘋果對高分屏的優化良好，所以在 ios 上，**中的 1 px 所代表的實際畫素數會根據不同裝置動態調整，開發者不需要進行二次換算。
由於 android 裝置碎片化嚴重，google 不得不建立了乙個新的名叫「density-independent pixel（密度無關畫素，縮寫為dp）」的尺寸單位，以適應不同解析度螢幕的尺寸換算。
微信也為小程式提供了乙個動態單位解決方案：它就是 responsive pixel（動態畫素），簡稱rpx。
pixel 與 rpx、dp 如何換算呢？
了解動態單位是怎麼來的以後，我們下一步就該學習如何在px和rpx、dp之間進行換算了。
動態單位與px換算的基本概念是：選擇乙個解析度作為基準，在基準解析度中，乙個畫素點顯示有多長，在其他螢幕上會顯示同樣長度。
例如，dp 與 px 換算公式是：dp = px * (目標裝置 dpi 解析度 / 160)。
但微信小程式的 rpx 換算方式，會與其他動態單位的換算方法有些出入。微信官方提供的換算方式更「傻瓜」一些：rpx = px * (目標裝置寬 px 值 / 750)。
舉個例子：
目標裝置的寬度如果是 375px，按照 750rpx 進行換算，則等於 1rpx = 0.5px
目標裝置的寬度如果是 1125px，換算後 1rpx = 1.5px
想想是不是有些不太對勁？沒錯，如果將微信小程式放到平板電腦上執行，螢幕的寬度px值有可能會變化（橫豎屏、分屏模式等等）。這時候，再以寬度為基準，就會出現元素顯示不正確的問題。
從這一點可以看出，微信團隊目前並不希望將小程式擴充套件到手機以外的裝置中。因此，開發者暫時可以專注於提高小程式在手機上的體驗，無需擔心多尺寸螢幕帶來的適配問題。
那能不能直接讓rpx和dp進行互換呢？當然不能！
dp是以螢幕解析度為基準的動態單位，而rpx是以長度為基準的動態單位。就像「公尺」和「平方厘公尺」不能互換一樣，dp和rpx兩者也是不能直接進行互換的，除非微信官方將rpx設定為解析度基準而非長度基準。
設計師該怎麼做？
由於微信使用了rpx動態單位，設計稿的尺寸單位也推薦使用rpx。
那麼問題來了，如果要改用rpx單位，以什麼尺寸的螢幕作為設計稿標準會比較合適呢？
在微信官方的文件中，我們看到這樣一句話：
在 iphone 6 上，螢幕寬度為 375px，共有 750 個物理畫素，則 750rpx = 375px = 750 物理畫素，1rpx = 0.5px = 1 物理畫素。
開發微信小程式時設計師可以用 iphone 6 作為視覺稿的標準。
也就是說，設計師在設計小程式時，可以這樣做：
直接以 iphone 6 的螢幕尺寸（375667）用作視覺稿尺寸，1 px = 0.5 rpx；
以 1 px = 1 rpx 的標準，將設計稿尺寸設定為 7501334。
在將設計稿轉交給程式設計師之前，設計師需要清楚地描述設計稿尺寸和單位換算標準等，以便程式設計師快速實現介面效果。
如果想讓你的小程式，在不同尺寸的機型上都能夠完美顯示，那就好好消化這篇文章吧。
微信小程式wx for的使用，動態傳參新手教程
微信小程式wx for的使用，動態傳參新手教程。一 wx for的使用 在小程式的開發過程中，經常會用到在前端頁面迴圈列印乙個陣列或者物件的資料，這樣的話就需要用wx for來實現。一般情況下，小程式的utils這個資料夾下，我們可以把本地的資料寫進去，封裝成.js檔案，提供對外暴露的介面，然後讀取...
微信小程式新手填坑
在正文之前，先叮囑一句。著手專案之前請務必把手冊過兩遍，不求記住多少乾貨，但求知道裡面都有什麼東西。最起碼的要求，要用到的元件和介面，至少要知道有這麼個東西。不然，別人再有耐心講得再詳細，你也不見得學的進一二。第二，彈性布局，小程式說白了屬於移動端頁面，也就是要做成響應式布局。所以強烈建議使用fle...
微信小程式 頭部適配 膠囊
樣式如上圖所示它的要求 乙個頭部樣式自定義，它在膠囊左邊的內容又分為左右兩部分，如何讓它螢幕寬自適應？只需要用到wx.getmenubuttonboundingclientrect 獲取膠囊資訊就可以寫出來 例子如下 1 let menubutton wx.getmenubuttonbounding...