微信小程式

2022-02-21 04:25:16 字數 603 閱讀 7293

canvas 實現不同螢幕的自適應,其實在我看來就是獲取裝置的寬度,然後與自己的設計開發尺寸做乙個比值,然後給每個數值相乘就好了,

注意:本文** 

小程式canvas的api並沒有像其他的一樣支援小程式獨有的 rpx 自適應尺寸單位,在繪製內容時所應用的單位仍然是 px,那麼如何實現不同尺寸螢幕的自適應呢?

首先我們根據開發工具可知不同常用螢幕的尺寸:

那麼想要適應其他尺寸的螢幕時只需按照iphone6的繪製大小按比例進行換算即可:

首先利用wx.getsysteminfo (獲取系統資訊)的api獲取螢幕寬度,然後除iphone6的螢幕寬度,即可得到相對單位

var rpx;

//獲取螢幕寬度,獲取自適應單位

wx.getsysteminfo(,

})在繪製方法中將引數乘以相對單位即可實現自適應:

const s = wx.createcanvascontext("canvas");

s.drawimage(url, 0, 0, 265 * rpx, 262.5 * rpx);

(微信小程式)一 初識微信小程式

需要看的 先是檔案目錄 一 pages 他存放於多個頁面 如 index log頁面。可以把他裡面的每個資料夾看成乙個整體。這個整體存放著 html css 和 資料 1 index資料夾 存放的index頁面的目錄。2 index.js 他可以處理得到 ajax 或自定義定義的資料。把得到的值封裝...

微信小程式

2.單獨設定某一頁面下的頂部欄的背景顏色,在其對應的.json檔案下修改即可 3.this.setdata 注意 onload函式下面執行的是非同步操作,非同步操作裡面this.data.直接賦值,是無效的,必須使用this.setdata this.setdata msg he llo wor l...

微信小程式

你好!這是你第一次使用markdown編輯器所展示的歡迎頁。如果你想學習如何使用markdown編輯器,可以仔細閱讀這篇文章,了解一下markdown的基本語法知識。全新的介面設計,將會帶來全新的寫作體驗 在創作中心設定你喜愛的 高亮樣式,markdown將 片顯示選擇的高亮樣式進行展示 全新的ka...