预约演示
产品中心
解决方案
酒企数字化
增值服务
客户案例
关于海商
B2C电商
B2B交易系统
智慧门店
分销商城
社区电商
查看更多

品牌私域商城全渠道品牌官方私域零售商城

B2B2C多用户商城类“天猫&京东”多用户商城

小程序商城小程序开店，会员小程序

积分/员工福利商城全场景员工积分与福利平台

企业内购商城系统打通企业OA，实现员工交易裂变

专注连锁门店会员营销管理系统

线上+线下+进销存+收银+会员
获取验证码
立即登录
HiShop > Hi小程序 > 小程序开发 > 开发实例 >

小程序怎么做自适应各种手机尺寸

2020-09-27 作者：秩名

最新消息显示，我们可以看到很多小程序界面，一些动画，画布无法在不同分辨率手机上实现自适应，下面小编就为大家解答小程序怎么做自适应各种手机尺寸

 

解决的问题： 画布，动画等js里面的操作，默认是px而不是rpx, 无法根据手机屏幕自适应

达到的效果： 让画布，动画在不同分辨率的手机上实现rpx的自适应

实现思路，获取组件节点的宽高，然后把组件rpx单位的宽高填充到画布的px单位，通过

小程序怎么做自适应各种手机尺寸

wx.createSelectorQuery().select('#canvas-container').boundingClientRect(function (rect) {

var width = rect.width // 节点的宽度 节点高度 为 rect.height

}).exec()

获取节点的rpx单位的宽高会自动转换成px单位。

  <view id='canvas-container' style='width:200rpx;height:100rpx;'>
    wx.createSelectorQuery().select('#canvas-container').boundingClientRect(function (rect) {
      var width = rect.width/2   // 节点的宽度
    }).exec()
 

使用在画布里面：

          ctx.translate(width, width);

以上是小程序怎么做留存，如果有想了解更多小程序问题，请查看本网站，谢谢。

HiShop小程序工具提供多类型商城/门店小程序制作，可视化编辑 1秒生成5步上线。通过拖拽、拼接模块布局小程序商城页面，所看即所得，只需要美工就能做出精美商城。更多小程序请查看：小程序商店


线上+线下+进销存+收银+会员门店零售管理好帮手

  • 极速收银管理

    门店能实现快速收银，提升门店经营效率。

  • 进销存管理

    系统自带进销存管理，更好管理库存销售。

  • 软硬件一体化

    配备收银硬件一站式整体服务。

收 银 会员管理 库存管理 商品管理 交接班 数据报表 营销促单 售后处理 多种收款

获取报价

推荐文章

关于我们 产品中心 解决方案 新闻动态
产品&服务
酒企数字化营销 品牌私域商城 新零售门店 B2B2C多用户商城 S2B2B电商系统 B2B订货商城 链动2+1分销 团队合伙人分销 收银系统 同城即时零售 上门到家系统 社区团购
开店咨询热线
长沙总部热线
4006-089-731
北京公司
4006-601-982
深圳公司
4008-400-198

一对一咨询

立即扫码关注

产品试用 获取方案及报价
门店管理 电话咨询 功能演示 产品试用