一、1、将px 转为 rpx 

2、app.js

App({
  onLaunch() {
      wx.cloud.init({
          env: '',
          traceUser: true
      })
      if (!wx.cloud) {
          console.error('请使用2.2.3 或以上的基础库以使用云能力');
      } else {
          wx.cloud.init({
              traceUser: true
          })
      }
        let _self = this;
        //判断是安卓还是苹果
        wx.getSystemInfo({
          success: res => {
              const screen = res.screenHeight
              const bottom = res.safeArea.bottom
            if (screen != bottom) {
               wx.setStorageSync('modelmes', true)
            }
 
          }
        })

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
        var code = res.code
        wx.setStorage({
            // 名称
            key:'code',
            // 值
            data: code
        })

      },
      fail: function () {
      }
    })
  },


  globalData: {
    userInfo: null,
    height: 0,
    API_URL: '',
    // 用户是否已经登录
  },
})

主要的代码是:

      wx.getSystemInfo({
          success: res => {
              const screen = res.screenHeight
              const bottom = res.safeArea.bottom
            if (screen != bottom) {
               wx.setStorageSync('modelmes', true)
            }
          }
        })

3、在页面中应用

 let modelmes = wx.getStorageSync('modelmes');
        this.setData({
            isIphone: modelmes
        })
    <view class="footer" style="margin-bottom: {{isIphone ? '68rpx' : '0rpx'}};">

二、图片的自适应

   <image src="{{detailsAll.describe}}" style="width:100%" mode="widthFix"></image>

重点:mode=“widthFix”

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐