舟山闪爸电子技术有限公司

微信小程序canvas尺寸的設置方法教程

微信小程序尺寸設置可使用rpx來標記尺寸,類同rem可在微信小程序中自適應兼容換算不同的機型尺寸。
但在小程序canvas中,尺寸換算會無效(由于繪畫的滯后),因此需要自適應計算canvas尺寸。

一.解決方案

使用小程序提供的getSystemInfo可以獲取當前設備的系統(tǒng)信息,通過獲取當前的設備尺寸,來換算所需要設置的canvas尺寸,從而使得canvas繪圖可以適用于所有設備。

wx.getSystemInfo(OBJECT)

微信小程序canvas尺寸的設置方法教程

 

示例代碼:


  1. wx.getSystemInfo({
  2. success: function(res) {
  3. console.log(res.model)
  4. console.log(res.pixelRatio)
  5. console.log(res.windowWidth)
  6. console.log(res.windowHeight)
  7. console.log(res.language)
  8. console.log(res.version)
  9. console.log(res.platform)
  10. }
  11. })

二.計算示例

獲取當前窗口寬、高以動態(tài)換算需要的canvas尺寸


  1. wx.getSystemInfo({
  2. //獲取系統(tǒng)信息成功,將系統(tǒng)窗口的寬高賦給頁面的寬高
  3. success: function (res) {
  4. that.width = res.windowWidth
  5. that.height = res.windowHeight
  6. that.radius = 105 / 602 * that.height
  7. }
  8. })
小程序工具提供多類型商城/門店小程序制作,可視化編輯 1秒生成5步上線。通過拖拽、拼接模塊布局小程序商城頁面,所看即所得,只需要美工就能做出精美商城。

更多微信小程序相關資訊,請前往:http://www.fluoresville.cn/miniprogramschool/


【本站聲明】
  1、本站文章中所選用的圖片及文字來源于網絡以及用戶投稿,由于未聯(lián)系到知識產權人或未發(fā)現(xiàn)有關知識產權的登記,如有知識產權人并不愿意我們使用,如果有侵權請立即聯(lián)系。
  2、本網站不對文章中所涉及的內容真實性、準確性、可靠性負責,僅系客觀性描述,如您需要了解該類商品/服務詳細的資訊,請您直接與該類商品/服務的提供者聯(lián)系。


KESION 科汛軟件

KESION 科汛軟件是國內領先的在線教育軟件及私域社交電商軟件服務提供商,長期專注于為企業(yè)提供在線教育軟件及社交電商SaaS平臺解決方案。
公司核心產品云開店SaaS社交電商服務平臺、在線教育SaaS服務平臺、教育企業(yè)數(shù)字化SaaS云平臺、企微營銷助手、私有化獨立部署品牌網校和在線教育咨詢等。

KESION 不斷通過技術創(chuàng)新,提供產品和服務,助力企業(yè)向數(shù)字化轉型,通過科技驅動商業(yè)革新,讓商業(yè)變得更智慧!



▼點擊進入科汛官網了解更多



熱門標簽
微信小程序 SaaS
上/下篇
  • 微信小程序WXS模塊的使用詳解

  • 微信小程序游戲開發(fā)Adapter,Adapter模塊示例代碼

換一換相關推薦
精選內容
熱點精選